Angular Highcharts:堆积面积图(Stacked Area Chart)
堆积面积图
现在,让我们看一个堆积面积图的例子。
plotOptions
plotOptions是每个系列类型的配置对象的包装对象。如系列数组中给出的,可以为每个系列项覆盖配置对象。这是将每个系列的值叠加在一起。
使用plotOptions.area.stacking配置图表堆叠为“normal”。允许的值:null将禁用堆叠,"normal"按值堆叠,"percent"按百分比堆叠图表。
var plotOptions = { area: { stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } };
例子
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: "area" }, title: { text: 'Historic and Estimated Worldwide Population Growth by Region' }, subtitle : { text: 'Source: Wikipedia.org' }, xAxis:{ categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'], tickmarkPlacement: 'on', title: { enabled: false } }, yAxis : { title: { text: 'Billions' }, labels: { formatter: function () { return this.value / 1000; } } }, tooltip : { shared: true, valueSuffix: ' millions' }, plotOptions : { area: { stacking: 'normal', lineColor: '#666666', lineWidth: 1, marker: { lineWidth: 1, lineColor: '#666666' } } }, credits:{ enabled: false }, series: [ { name: 'Asia', data: [502, 635, 809, 947, 1402, 3634, 5268] }, { name: 'Africa', data: [106, 107, 111, 133, 221, 767, 1766] }, { name: 'Europe', data: [163, 203, 276, 408, 547, 729, 628] }, { name: 'America', data: [18, 31, 54, 156, 339, 818, 1201] }, { name: 'Oceania', data: [2, 2, 2, 6, 13, 30, 46] } ] }; }
结果