堆積和分組柱形圖

以下是堆積和分組柱形圖的示例。

我們已看到在 Highcharts 配置語法 一章中，用於繪製圖表所使用的配置。現在讓我們看看其他配置，以及如何向 **plotoptions** 中新增堆積屬性。

下面給出了堆積和分組柱形圖的示例。

plotOptions

plotOptions 是針對每種系列型別的配置物件的包裝物件。每個系列的配置物件還可以按 series 陣列中給定的每個系列項進行覆蓋。這樣可以將各個系列的值堆疊在一起。這樣可以將各個系列的值堆疊在一起。

使用 plotOptions.column.stacking 將圖表堆積方式配置為 “normal”。可能的值包括 null（停用堆積）、“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'
         }
      ]
   };
}

結果

驗證結果。