Angular Highcharts：堆叠和分组柱形图（Stacked and Grouped Column Chart）

 下面给出了一个堆叠和分组柱形图的示例。

plotOptions

  plotOptions是每个类型的配置对象的包装对象。每个系列的配置对象也可以根据系列数组中给出的每个系列项进行重写。

  将plotOptions.column.stacking配置为“normal”。默认值为空将禁用堆叠，“normal”按值堆叠，“percent”按百分比堆叠图表。

plotOptions : {
   column: {
      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: 'Total fruit consumption, grouped by gender'   
      },
      xAxis : {
         categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
      },
      yAxis : {
         allowDecimals: false,
         min: 0,
         title: {
            text: 'Number of fruits'
         }     
      },
      plotOptions : {
         column: {
            stacking: 'normal'        
         }
      },
      credits : {
         enabled: false
      },
      series : [
         {
            name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'male'
         }, 
         {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'male'
         }, 
         {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'female'
         }, 
         {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'female'
         }
      ]
   };
}

结果