ハイチャートを使用してピラミッド チャートを作成する方法

Highcharts を使用してピラミッド チャートを作成する方法

はじめに:
ピラミッド チャートは、階層関係を表示するために使用される視覚化ツールです。データ状況の分布と比例関係。データ分析や意思決定支援では、さまざまなレベルの割合やグループの分布を表すためにピラミッド チャートがよく使用されます。この記事では、Highcharts ライブラリを使用してピラミッド チャートを作成する方法と詳細なコード例を紹介します。

ステップ 1: Highcharts ライブラリをインポートする
まず、Highcharts ライブラリ ファイルを HTML に導入する必要があります。これを行うには、次のコードを

タグに追加します:

<script src="https://code.highcharts.com/highcharts.js"></script>

ステップ 2: コンテナを作成する
HTML で、ピラミッド チャートを表示するためのコンテナ要素を作成する必要があります。

要素は、次のコードを追加することで作成できます:

<div id="container" style="width: 500px; height: 400px;"></div>

ステップ 3: データを定義する
JavaScript で、ピラミッド チャートに必要なデータを定義する必要があります。具体的には、データの名前と値を定義する必要があります。データは次のコードで定義できます。

var data = [
  {
    name: '第一层级',
    value: 30
  },
  {
    name: '第二层级',
    value: 50
  },
  {
    name: '第三层级',
    value: 70
  }
];

ステップ 4: ピラミッド チャートを作成する
JavaScript では、Highcharts を使用してピラミッド チャートを作成できます。まず、Highcharts.chart() メソッドを通じて基本的なチャート オブジェクトを作成し、コンテナ要素の ID を指定する必要があります。次に、options 属性を通じてチャートの構成項目を設定できます。ピラミッド チャートは、次のコードで作成できます。

Highcharts.chart('container', {
  chart: {
    type: 'pyramid'
  },
  title: {
    text: '金字塔图表示例'
  },
  series: [{
    name: '金字塔图',
    data: data
  }]
});

ステップ 5: ピラミッド チャートのスタイルとインタラクティブ効果を設定する
ピラミッド チャートのスタイルとインタラクティブ効果は、構成を設定することで変更できます。チャートの項目。一般的に使用される構成項目の例を次に示します。

title: {
  text: '金字塔图表示例',
  style: {
    color: '#333',
    fontSize: '18px',
    fontWeight: 'bold'
  }
},
plotOptions: {
  pyramid: {
    dataLabels: {
      enabled: true,
      format: '{point.name}: {point.y}%',
      color: '#333'
    }
  }
},
tooltip: {
  formatter: function() {
    return this.point.name + ': ' + this.point.y + '%';
  }
}

概要:
上記の手順を通じて、Highcharts ライブラリを使用してピラミッド グラフを作成し、グラフのスタイルとインタラクティブな効果をカスタマイズできます。必要です。この記事が、読者がハイチャートをより効果的に使用してピラミッド チャートを作成し、データ分析や意思決定支援の作業に適用するのに役立つことを願っています。

参考リンク: https://www.highcharts.com/docs/chart-and-series-types/pyramid-chart

以上がハイチャートを使用してピラミッド チャートを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。