So verwenden Sie die Zeitleiste, um Datenänderungen in Highcharts anzuzeigen

Bei der Datenvisualisierung ist die Zeitleiste eine der häufig verwendeten Komponenten. Bei der Anzeige von Datenänderungen kann die Verwendung einer Zeitleiste dazu führen, dass Datenänderungen intuitiver und leichter verständlich werden. Highcharts ist ein sehr leistungsfähiges Datenvisualisierungstool, das eine Vielzahl von Diagrammtypen und Interaktionsmethoden unterstützt, einschließlich Zeitleistenunterstützung.

In diesem Artikel wird erläutert, wie Sie die Zeitleiste in Highcharts zum Anzeigen von Datenänderungen verwenden, und es werden spezifische Codebeispiele bereitgestellt.

1. Daten vorbereiten

Zuerst müssen Sie einen Datensatz für die Anzeige vorbereiten. In diesem Artikel wird als Beispiel der tägliche Niederschlag einer Stadt in einem Jahr verwendet. Das Datenformat ist wie folgt:

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

wobei das Datumsfeld das Datum und das Wertfeld den Niederschlag am entsprechenden Datum darstellt.

2. Zeitleiste erstellen

In Highcharts wird die Zeitleiste über xAxis-Einstellungen implementiert. Sie können die Zeitleiste verwenden, indem Sie den Typ auf „datetime“ festlegen. Das Codebeispiel lautet wie folgt:

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

In diesem Beispiel wird ein Liniendiagramm erstellt und der Typ von xAxis wird auf „datetime“ festgelegt, um die Zeitleiste zu verwenden. Gleichzeitig wird der Titel von xAxis auf „Datum“ gesetzt.

3. Daten und Grafiken konfigurieren

Als nächstes müssen Sie die Daten und Grafiken konfigurieren. In diesem Artikel wird ein Liniendiagramm als Beispiel verwendet:

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

Im Beispiel wird die Zeitachse über die y-Achse auf „Niederschlag (mm)“ festgelegt. Die Polylinie wird durch die Daten in der Reihe festgelegt. Die Daten des Diagramms verwenden die integrierte Date.UTC()-Funktion von Highcharts, um das Datum darzustellen.

4. Verbessern Sie die Anzeige der Zeitleiste.

Die Anzeige der Zeitleiste kann weiter verbessert werden, z. B. durch Einstellen des Zeitformats und des Anzeigeintervalls. Das Folgende ist ein verbessertes Codebeispiel:

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

Im Beispielcode wird das dateTimeLabelFormats-Attribut von xAxis verwendet, um das Anzeigeformat des Datums festzulegen, hier ist es „%e %b“, das das Datum und den Monat darstellt ( zum Beispiel „1. Jan“). Gleichzeitig wird das tickInterval-Attribut verwendet, um einen Tick pro Tag auf der Timeline festzulegen.

An diesem Punkt haben wir das Beispiel der Verwendung der Zeitleiste zur Anzeige von Daten in Highcharts abgeschlossen. Neben Liniendiagrammen unterstützt Highcharts auch verschiedene Grafiktypen wie Balkendiagramme, Kreisdiagramme usw. Sie können die entsprechende grafische Darstellungsmethode entsprechend den tatsächlichen Anforderungen auswählen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Zeitleiste, um Datenänderungen in Highcharts anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!