Angular Highcharts:基本条状图(Basic Bar Chart)
让我们看一个基本条状图的例子。我们还将了解其他配置。我们已经更改了chart中的类型属性。
chart
将chart类型配置为基于“bar”。chart.type决定图表的类型。这里,默认值是“line”。
var chart = { type: 'bar' };
例子
app.component.ts
import { Component } from '@angular/core'; import * as Highcharts from 'highcharts'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { highcharts = Highcharts; chartOptions = { chart: { type: 'bar' }, title: { text: 'Historic World Population by Region' }, subtitle : { text: 'Source: Wikipedia.org' }, legend : { layout: 'vertical', align: 'left', verticalAlign: 'top', x: 250, y: 100, floating: true, borderWidth: 1, backgroundColor: ( (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), shadow: true }, xAxis:{ categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], title: { text: null } }, yAxis : { min: 0, title: { text: 'Population (millions)', align: 'high' }, labels: { overflow: 'justify' } }, tooltip : { valueSuffix: ' millions' }, plotOptions : { bar: { dataLabels: { enabled: true } } }, credits:{ enabled: false }, series: [ { name: 'Year 1800', data: [107, 31, 635, 203, 2] }, { name: 'Year 1900', data: [133, 156, 947, 408, 6] }, { name: 'Year 2008', data: [973, 914, 4054, 732, 34] } ] }; }
结果