Angular Highcharts:堆积柱形图(Stacked Column Chart)
让我们看一个堆积柱形图的例子。我们还将了解其他的配置。
plotOptions
将plotOptions.series.stacking配置为“normal”。默认值为空,将禁用堆叠,“normal”按值堆叠,“percent”按百分比堆叠。
var plotOptions = { series: { stacking: 'normal' } };
例子
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: 'column' }, 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 : { column: { dataLabels: { enabled: true } }, series: { stacking: 'normal' } }, 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] } ] }; }
结果