ウォーターフォールチャートを使用してハイチャートにデータを表示する方法-jsチュートリアル-php.cn

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

王林

リリース： 2023-12-17 15:18:51

オリジナル

579 人が閲覧しました

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

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

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

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>

ログイン後にコピー

コンテナを作成します。

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

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

ログイン後にコピー

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 を通じてデータラベルを表示するように設定し、フォーマッタを通じてデータラベルの形式を設定します。ツールチップは、プロンプトボックスの内容を設定するために使用されます。