ウォーターフォール チャートを使用してハイチャートにデータを表示する方法

ウォーターフォール チャートを使用してハイチャートにデータを表示するには、特定のコード サンプルが必要です。

ウォーターフォール チャートは、一般的に使用されるデータ視覚化チャートであり、データの浮き沈みを表示できます。データ、特に財務データ、販売データ、在庫データなどの表示に適しています。ハイチャートでは、ウォーターフォール チャートを使用してデータを表示し、いくつかのパラメーターを設定することでデータをカスタマイズすることが簡単にできます。以下では、ウォーターフォール チャートを使用してデータをハイチャートに表示する方法と、具体的なコード例を紹介します。

1. Highcharts ライブラリ ファイルを紹介します。

Highcharts.js や Highcharts-more.js などの Highcharts ライブラリ ファイルを HTML ファイルに導入します。 Highcharts のヒストグラム モジュールを使用する必要がある場合は、highcharts-3d.js ファイルも導入する必要があります。

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

2. コンテナを作成します。

Highcharts グラフを表示するコンテナを HTML ファイル内に作成します。

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

3. JavaScript コードを作成します。

ウォーターフォール チャートを生成する JavaScript 関数を作成します。

function createWaterfallChart() {
  // 定义数据
  var categories = ['开支1', '收入1', '开支2', '收入2', '开支3'];
  var amounts = [1000, -800, -500, 600, -300];

  // 创建图表
  Highcharts.chart('container', {
    chart: {
      type: 'waterfall'
    },
    title: {
      text: '瀑布图示例'
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      title: {
        text: '金额'
      }
    },
    legend: {
      enabled: false
    },
    series: [{
      name: '金额',
      data: amounts,
      dataLabels: {
        enabled: true,
        formatter: function() {
          return Highcharts.numberFormat(this.y, 0, '', ',');
        },
        style: {
          color: '#ffffff',
          textOutline: 0
        }
      }
    }],
    tooltip: {
      pointFormat: '<b>{point.y}</b> 元'
    }
  });
}

// 调用函数生成瀑布图
createWaterfallChart();

上記のコードでは、まずデータを定義します。カテゴリはデータのカテゴリを表し、量はデータの数値を表します。次に、Highcharts.chart メソッドを使用してグラフを作成します。chart.type は「waterfall」に設定されており、これはウォーターフォール グラフが生成されることを意味します。構成項目 xAxis と yAxis は、それぞれ x 軸と y 軸の関連パラメーターを設定します。 Legend は false に設定されます。これは、凡例が表示されないことを意味します。この系列では、名前を「量」に設定し、データを表示するデータを表す量に設定します。 dataLabels.enabled を通じてデータ ラベルを表示するように設定し、フォーマッタを通じてデータ ラベルの形式を設定します。ツールチップは、プロンプト ボックスの内容を設定するために使用されます。

4. コードを実行します。

HTML ファイルを保存し、ブラウザで開くと、生成されたウォーターフォール チャートが表示されます。

上記の手順により、ウォーターフォール チャートを使用してハイチャートにデータを簡単に表示できます。実際のニーズに応じて、色やスタイルなどの調整を含めて、チャートをさらにカスタマイズできます。上記の内容がお役に立てば幸いです。

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