Cara menggunakan garis masa untuk memaparkan perubahan data dalam Highcharts

Dalam visualisasi data, garis masa adalah salah satu komponen yang sering digunakan. Apabila memaparkan perubahan data, menggunakan garis masa boleh menjadikan perubahan data lebih intuitif dan mudah difahami. Highcharts ialah alat visualisasi data yang sangat berkuasa yang menyokong pelbagai jenis graf dan kaedah interaksi, termasuk sokongan garis masa.

Artikel ini akan memperkenalkan cara menggunakan garis masa dalam Highcharts untuk memaparkan perubahan data dan memberikan contoh kod khusus.

1. Sediakan data

Mula-mula anda perlu menyediakan set data untuk paparan. Artikel ini mengambil hujan harian bandar dalam setahun sebagai contoh Format data adalah seperti berikut:

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

di mana medan tarikh mewakili tarikh dan medan nilai mewakili hujan pada tarikh yang sepadan.

2. Cipta Garis Masa

Dalam Highcharts, garis masa dilaksanakan melalui tetapan xAxis. Anda boleh menggunakan garis masa dengan menetapkan jenis kepada 'datetime' Contoh kod adalah seperti berikut:

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

Dalam contoh ini, carta garisan dibuat dan jenis xAxis ditetapkan kepada datetime untuk menggunakan garis masa. Pada masa yang sama, tajuk xAxis ditetapkan kepada 'Tarikh'.

3. Konfigurasikan data dan grafik

Seterusnya, anda perlu mengkonfigurasi data dan grafik. Artikel ini mengambil carta garisan sebagai contoh. Contoh kod adalah seperti berikut:

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

Dalam contoh, garis masa ditetapkan melalui xAxis; polyline ditetapkan melalui data dalam siri Data graf menggunakan fungsi Date.UTC() terbina dalam Carta Tinggi untuk mewakili tarikh.

4. Tingkatkan paparan garis masa

Paparan garis masa boleh dipertingkatkan lagi, seperti menetapkan format masa dan selang paparan. Berikut ialah contoh kod yang dipertingkatkan:

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

Dalam kod contoh, atribut dateTimeLabelFormats xAxis digunakan untuk menetapkan format paparan tarikh, di sini ialah '%e %b', yang mewakili tarikh dan bulan (contohnya , '1. Jan '). Pada masa yang sama, atribut tickInterval digunakan untuk menetapkan tanda setiap hari pada garis masa.

Pada ketika ini, kami telah melengkapkan contoh penggunaan garis masa untuk memaparkan data dalam Highcharts. Selain carta garis, Highcharts juga menyokong pelbagai jenis grafik, seperti carta bar, carta pai, dll. Anda boleh memilih kaedah paparan grafik yang sepadan mengikut keperluan sebenar.

Atas ialah kandungan terperinci Cara menggunakan garis masa untuk memaparkan perubahan data dalam Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!