Highcharts を使用してファネル チャートを作成する方法

Highcharts を使用してファネル チャートを作成する方法

データ視覚化の分野では、ファネル チャートはフロー、フィルタリング、およびデータを視覚的に表示する一般的なチャート タイプです。データの変換処理です。 Highcharts は、豊富なチャート タイプとカスタマイズ オプションを提供する強力な JavaScript チャート ライブラリです。この記事では、Highcharts を使用してファネル チャートを作成する方法を紹介し、具体的なコード例を示します。

まず、Highcharts ライブラリと必要なスタイル シートを導入する必要があります。 HTML ファイルの先頭に次のコードを追加します。

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

次に、ファンネル チャートを表示するコンテナ要素を HTML ファイルの本文部分に追加します。

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

次に、次のコードを作成します。 JavaScript 部分 Highcharts 構成オブジェクトとファネル チャートの関連オプションを設定します。以下は基本的な構成例です。

var options = {
  chart: {
    type: 'funnel',
    marginRight: 100
  },
  title: {
    text: '漏斗图表示例'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b> ({point.y})',
        connectorColor: 'silver'
      },
      neckWidth: '30%',
      neckHeight: '25%'
    }
  },
  legend: {
    enabled: false
  },
  series: [{
    name: '流失率',
    data: [
      ['浏览量', 5000],
      ['点击量', 4000],
      ['加入购物车', 3000],
      ['下单量', 2000],
      ['支付量', 1000]
    ]
  }]
};

上記の構成では、グラフの種類をファネル チャート (「ファネル」) に設定し、グラフのタイトル (「ファネル チャートの例」) を設定します。ファネル チャート データ。このうちデータは配列形式で表現され、各配列要素には 2 つの値が含まれ、最初の値は処理ステップの名前を表し、2 番目の値はステップ番号を表します。

次に、Highcharts の chart 関数を使用して、指定されたコンテナーにグラフを描画します。

Highcharts.chart('container', options);

上記のコードを JavaScript セクションに追加して、Highcharts を使用して単純なファネル チャートを作成します。

上記の基本的な構成オプションに加えて、Highcharts にはファネル チャートの外観と相互作用をカスタマイズするための豊富なオプションも用意されています。これらのカスタム関数は、構成オブジェクトのプロパティを変更することで実装できます。

options.plotOptions.series.dataLabels.format = '<b>{point.name}</b> ({point.y}，{point.percentage:.1f}%)';
options.plotOptions.series.minHeight = '10';
options.legend.enabled = true;

たとえば、データ ラベルの形式を変更したり、データの割合を表示したり、ファネル チャートの最小の高さを調整したり、凡例を有効にしたりできます。

上記の手順により、Highcharts ライブラリを使用してファネル チャートを作成し、ニーズに応じてカスタマイズできます。 Highcharts には他の豊富なチャート タイプとオプションも用意されており、詳細については公式ドキュメントを参照してください。この記事が、ハイチャートを使用してファネル チャートを作成する方法を学ぶのに役立つことを願っています。

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