Comment utiliser la chronologie pour afficher les modifications de données dans Highcharts

Dans la visualisation de données, la chronologie est l'un des composants souvent utilisés. Lors de l'affichage des modifications de données, l'utilisation d'une chronologie peut rendre les modifications de données plus intuitives et plus faciles à comprendre. Highcharts est un outil de visualisation de données très puissant qui prend en charge une variété de types de graphiques et de méthodes d'interaction, y compris la prise en charge de la chronologie.

Cet article expliquera comment utiliser la chronologie dans Highcharts pour afficher les modifications de données et fournira des exemples de code spécifiques.

1. Préparer les données

Tout d'abord, vous devez préparer un ensemble de données à afficher. Cet article prend comme exemple les précipitations quotidiennes d'une ville au cours d'une année. Le format des données est le suivant :

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

où le champ date représente la date et le champ valeur représente les précipitations à la date correspondante.

2. Créer une chronologie

Dans Highcharts, la chronologie est implémentée via les paramètres xAxis. Vous pouvez utiliser la chronologie en définissant le type sur 'datetime'. L'exemple de code est le suivant :

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

Dans cet exemple, un graphique linéaire est créé et le type de xAxis est défini sur datetime pour utiliser la chronologie. Dans le même temps, le titre de xAxis est défini sur « Date ».

3. Configurer les données et les graphiques

Ensuite, vous devez configurer les données et les graphiques. Cet article prend un graphique linéaire comme exemple. L'exemple de code est le suivant :

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

Dans l'exemple, la chronologie est définie via l'axe x ; le titre de l'axe y est défini sur « Précipitations (mm) » via l'axe y ; la polyligne est définie à travers les données de la série. Les données du graphique utilisent la fonction Date.UTC() intégrée de Highcharts pour représenter la date.

4. Améliorer l'affichage de la chronologie

L'affichage de la chronologie peut être encore amélioré, comme le réglage du format de l'heure et de l'intervalle d'affichage. Voici un exemple de code amélioré :

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

Dans l'exemple de code, l'attribut dateTimeLabelFormats de xAxis est utilisé pour définir le format d'affichage de la date, ici c'est '%e %b', qui représente la date et le mois ( par exemple, '1. janvier'). Dans le même temps, l'attribut tickInterval est utilisé pour définir un tick par jour sur la timeline.

À ce stade, nous avons complété l'exemple d'utilisation de la chronologie pour afficher les données dans Highcharts. En plus des graphiques linéaires, Highcharts prend également en charge une variété de types graphiques, tels que les graphiques à barres, les diagrammes circulaires, etc. Vous pouvez choisir la méthode d'affichage graphique correspondante en fonction des besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!