タイムラインを使用してハイチャートでデータの変化を表示する方法

データ視覚化では、タイムラインはよく使用されるコンポーネントの 1 つです。データの変更を表示する場合、タイムラインを使用すると、データの変更をより直感的で理解しやすくなります。 Highcharts は、タイムラインのサポートを含む、さまざまなグラフ タイプと対話方法をサポートする非常に強力なデータ視覚化ツールです。

この記事では、ハイチャートのタイムラインを使用してデータの変更を表示する方法を紹介し、具体的なコード例を示します。

1. データの準備

まず、表示するデータのセットを準備する必要があります。この記事では、ある都市の 1 年間の日次降雨量を例として取り上げます。データ形式は次のとおりです:

[
  { date: '2021-01-01', value: 1.2 },
  { date: '2021-01-02', value: 0.9 },
  { date: '2021-01-03', value: 1.5 },
  //...
]

日付フィールドは日付を表し、値フィールドは対応する日付の降雨量を表します。

2. タイムラインの作成

ハイチャートでは、タイムラインは xAxis 設定を通じて実装されます。タイプを「datetime」に設定すると、タイムラインを使用できます。コード例は次のとおりです:

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  xAxis: {
    type: 'datetime',
    title: {
      text: '日期'
    }
  },
  //...
})

この例では、タイムラインを使用するために折れ線グラフが作成され、xAxis のタイプが datetime に設定されます。 。同時に、xAxis のタイトルは「日付」に設定されます。

3. データとグラフィックの構成

次に、データとグラフィックを構成する必要があります。この記事では、折れ線グラフを例として取り上げます。コード例は次のとおりです:

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  xAxis: {
    type: 'datetime',
    title: {
      text: '日期'
    }
  },
  yAxis: {
    title: {
      text: '降雨量(mm)'
    }
  },
  series: [{
    name: '降雨量',
    data: [
      [Date.UTC(2021, 0, 1), 1.2],
      [Date.UTC(2021, 0, 2), 0.9],
      [Date.UTC(2021, 0, 3), 1.5],
      // ...
    ]
  }]
})

この例では、時間軸は xAxis で設定され、y 軸のタイトルは「降雨量 (mm)」に設定されます。 )' から yAxis; データ セットの系列を通じて、Highcharts の組み込み Date.UTC() 関数を使用して日付を表す折れ線グラフのデータが表示されます。

4. 時間軸の表示を改善する

時間形式や表示間隔を設定するなど、時間軸の表示をさらに改善することができます。完成したコード例を次に示します:

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  xAxis: {
    type: 'datetime',
    title: {
      text: '日期'
    },
    dateTimeLabelFormats: {
      day: '%e. %b'
    },
    tickInterval: 24 * 3600 * 1000 // 一天一个刻度
  },
  yAxis: {
    title: {
      text: '降雨量(mm)'
    }
  },
  series: [{
    name: '降雨量',
    data: [
      [Date.UTC(2021, 0, 1), 1.2],
      [Date.UTC(2021, 0, 2), 0.9],
      [Date.UTC(2021, 0, 3), 1.5],
      // ...
    ]
  }]
})

コード例では、xAxis の dateTimeLabelFormats 属性を使用して日付の表示形式を設定します。ここでは、日付を表す '%e. %b' です。日付と月 (例: '1. Jan')。同時に、tickInterval 属性を使用して、タイムライン上で 1 日あたりのティックを設定します。

ここまでで、タイムラインを使用してハイチャートにデータを表示する例が完成しました。 Highcharts は、折れ線グラフに加えて、棒グラフ、円グラフなどのさまざまなグラフィック タイプもサポートしています。実際のニーズに応じて、対応するグラフィック表示方法を選択できます。

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