堆积和分组柱形图

以下是堆积和分组柱形图的示例。

我们已经在 Highcharts 配置语法 章节中看到了用于绘制图表的配置。 现在让我们看看其他配置以及如何在 plotoptions 中添加 stacking 属性。

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

plotOptions

plotOptions 是每个系列类型的配置对象的包装对象。 每个系列的配置对象也可以被系列数组中给定的每个系列项目覆盖。 这是将每个系列的值堆积在一起。 这是将每个系列的值堆积在一起。

使用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: '按性别分组的水果消费总量'   
      },
      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'
         }
      ]
   };
}

结果

验证结果。

❮ angular_highcharts_column_charts.html