Angular-highcharts-column-stacked-grouped

積み上げおよびグループ化された縦棒グラフ

以下は、積み上げられグループ化された縦棒グラフの例です。

link：/angular_highcharts/angular_highcharts_configuration_syntax [Highcharts構成構文]の章で、チャートを描画するために使用される構成をすでに確認しました。 追加の構成と、 plotoptions でスタッキング属性を追加した方法を見てみましょう。

積み上げてグループ化された縦棒グラフの例を以下に示します。

plotOptions

plotOptionsは、各シリーズタイプの構成オブジェクトのラッパーオブジェクトです。 また、各シリーズの構成オブジェクトは、シリーズ配列で指定された各シリーズ項目に対してオーバーライドできます。 これは、各シリーズの値を互いの上に積み重ねることです。 これは、各シリーズの値を互いの上に積み重ねることです。

plotOptions.column.stackingを使用して「標準」としてチャートの積み重ねを構成します。 可能な値はnullで、スタックは無効になり、「通常」のスタックは値で、「パーセント」はチャートをパーセントでスタックします。

plotOptions : {
   column: {
      stacking: 'normal'
   }
},

例

*_app.component.ts_*

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   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'
         }
      ]
   };
}

結果

結果を確認します。

積み上げおよびグループ化された縦棒グラフ