Heim > Web-Frontend > js-Tutorial > So verwenden Sie die Zeitleiste, um Datenänderungen in Highcharts anzuzeigen

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

WBOY
Freigeben: 2023-12-17 15:06:39
Original
789 Leute haben es durchsucht

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 },
  //...
]
Nach dem Login kopieren

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

  1. 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: '日期'
    }
  },
  //...
})
Nach dem Login kopieren

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.

  1. 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],
      // ...
    ]
  }]
})
Nach dem Login kopieren

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.

  1. 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],
      // ...
    ]
  }]
})
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage