AngularでのHighchartsのドリルダウンカラムのデモを紹介

まず、HighchartsをAngularプロジェクトに統合するために必要な手順を説明します。まず、highchartsとhighcharts-angularのパッケージをインストールします。次に、Angularのapp.module.tsファイルで、HighchartsChartModuleをインポートし、imports配列に追加します。

次に、Highchartsのドリルダウンカラムチャートを表示するコンポーネントを作成します。コンポーネント内で、Highchartsの設定オプションを定義し、データを準備します。ドリルダウンカラムチャートでは、親カテゴリと子カテゴリの階層構造を持つデータを使用します。

以下は、Highchartsのドリルダウンカラムチャートのコンポーネントの例です。

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
  selector: 'app-drilldown-column-chart',
  template: `
    <highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions"></highcharts-chart>
  `,
})
export class DrilldownColumnChartComponent {
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    chart: {
      type: 'column',
    },
    title: {
      text: 'ドリルダウンカラムチャート',
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      title: {
        text: '値',
      },
    },
    series: [
      {
        name: '親カテゴリ',
        data: [
          {
            name: '子カテゴリ1',
            y: 10,
            drilldown: '子カテゴリ1',
          },
          {
            name: '子カテゴリ2',
            y: 5,
            drilldown: '子カテゴリ2',
          },
        ],
      },
    ],
    drilldown: {
      series: [
        {
          id: '子カテゴリ1',
          data: [
            ['子カテゴリ1-1', 4],
            ['子カテゴリ1-2', 6],
          ],
        },
        {
          id: '子カテゴリ2',
          data: [
            ['子カテゴリ2-1', 3],
            ['子カテゴリ2-2', 2],
          ],
        },
      ],
    },
  };
}

上記のコードでは、DrilldownColumnChartComponentという名前のコンポーネントを定義しています。chartOptionsオブジェクト内で、カラムチャートの設定やデータを指定しています。series配列内のdrilldownプロパティを使用して、子カテゴリのドリルダウンデータを定義します。drilldownオブジェクト内のseries配列に、各子カテゴリのデータを指定します。

以上で、AngularでHighchartsのドリルダウンカラムチャートを作成する方法を紹介しました。このコードを実行すると、ドリルダウン機能が備わったカラムチャートが表示されます。必要に応じて、データやグラフの設定をカスタマイズしてください。

この投稿では、AngularとHighchartsを組み合わたてて、ドリルダウンカラムチャートを作成する方法を説明しました。また、スタックブリッツを使用して実際のコード例を提供しました。これにより、読者は実際の動作するデモを確認しながら学習することができます。