縦棒グラフとバケット チャートを使用してハイチャートにデータを表示する方法

縦棒グラフとバケット チャートを使用してハイチャートにデータを表示する方法

縦棒グラフとバケット チャートは、ハイチャートで一般的に使用されるデータ視覚化グラフ タイプであり、表示できます。直感的にさまざまなカテゴリのデータを扱い、そのサイズを比較します。この記事では、Highcharts を使用して縦棒グラフとバケット チャートを作成する方法を紹介し、詳細なコード例を示します。

まず、Highcharts ライブラリと関連する依存関係ファイルを導入する必要があります。ライブラリ ファイルは、Highcharts の公式 Web サイト (www.highcharts.com) からダウンロードして、HTML ファイルに組み込むことができます。 Highcharts ライブラリは JQuery に依存しているため、JQuery も導入する必要があります。

次に、縦棒グラフとバケット チャートを表示するための HTML コンテナを作成する必要があります。以下に示すように、div 要素を使用して一意の id 属性を指定できます。

<div id="container"></div>

次に、縦棒グラフとバケット チャートに表示するデータを準備する必要があります。データはサーバーから静的に取得することも、動的に取得することもできます。ここでは、次のデータがあると仮定します。

var data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 15 },
  { name: 'D', value: 25 }
];

次に、ハイチャートを使用して縦棒グラフとバケット チャートを作成できます。まず、グラフの種類、タイトル、X 軸と Y 軸のラベルなど、グラフの構成オプションを定義する必要があります。次に、データをチャートに渡し、チャート構成オプションをパラメーターとして使用してチャートを作成する必要があります。具体的なコードは次のとおりです。

$(function() {
  Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: '柱桶图'
    },
    xAxis: {
      categories: data.map(function(item) {
        return item.name;
      })
    },
    yAxis: {
      title: {
        text: '数值'
      }
    },
    series: [{
      name: '数值',
      data: data.map(function(item) {
        return item.value;
      })
    }]
  });
});

上記のコードでは、Highcharts の chart メソッドを使用して縦棒グラフとバケット チャートを作成します。このうち、chart属性はグラフの種類を縦棒(縦棒グラフ)として指定し、title属性はグラフのタイトルを「縦棒グラフとバケットグラフ」として指定し、xAxis属性はX軸のラベルをname属性として指定します。データ内では yAxis 属性で Y 軸のラベルを「数値」で指定します。 series 属性はチャートのデータ系列を指定します。name 属性はデータ系列の名前を「値」として指定し、data 属性はデータ系列の特定の値をデータ内の value 属性として指定します。

最後に、Highcharts.chart メソッドの最初のパラメーターを、以前に作成した HTML コンテナーの ID に設定して、チャートをコンテナーにレンダリングします。

上記の手順を完了すると、ブラウザでコードを実行し、HTML コンテナに縦棒グラフとバケット チャートを表示してデータを表示できます。

以上が縦棒グラフとバケット チャートを使用してハイチャートにデータを表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。