How to use timeline to display data changes in Highcharts

In data visualization, timeline is one of the components that is often used. When displaying data changes, using a timeline can make data changes more intuitive and easy to understand. Highcharts is a very powerful data visualization tool that supports a variety of graph types and interaction methods, including timeline support.

This article will introduce how to use the timeline in Highcharts to display data changes, and provide specific code examples.

1. Prepare data

First, you need to prepare a set of data for display. This article takes the daily rainfall of a city in a year as an example. The data format is as follows:

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

The date field represents the date, and the value field represents the rainfall on the corresponding date.

2. Create Timeline

In Highcharts, the timeline is implemented through xAxis settings. You can use the timeline by setting the type to 'datetime'. The code example is as follows:

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

In this example, a line chart is created and the type of xAxis is set to datetime to use the timeline. At the same time, the title of xAxis is set to 'Date'.

3. Configuring data and graphics

Next, you need to configure the data and graphics. This article takes a line chart as an example. The code example is as follows:

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],
      // ...
    ]
  }]
})

In the example, the time axis is set through xAxis; the title of the y-axis is set to 'Rainfall (mm)' through yAxis; through the series in data sets the data of the line chart, which uses Highcharts' built-in Date.UTC() function to represent the date.

4. Improve the display of the time axis

The display of the time axis can be further improved, such as setting the time format and display interval. The following is a completed code example:

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],
      // ...
    ]
  }]
})

In the example code, the dateTimeLabelFormats attribute of xAxis is used to set the display format of the date, here it is '%e. %b', which represents the date and month (for example '1. Jan'). At the same time, the tickInterval attribute is used to set a tick per day on the timeline.

So far, we have completed the example of using timeline to display data in Highcharts. In addition to line charts, Highcharts also supports a variety of graphic types, such as bar charts, pie charts, etc. You can choose the corresponding graphic display method according to actual needs.

The above is the detailed content of How to use timeline to display data changes in Highcharts. For more information, please follow other related articles on the PHP Chinese website!