Lorsque vous tracez des données de séries chronologiques, supposez que j'ai des comptes par jour de quelque chose. Données de démonstration:

Jan 1: 10
Jan 2: 20
Jan 3: 30
Jan 4: <no data>
Jan 5: 50
Jan 6: 60
etc.

Notez que les données sont manquantes pour un jour, le 4 janvier.

Lorsque vous affichez ceci dans highcharts (jsfiddle), cela ressemble à ceci:

jsfiddle screenshot

Notez que le «décalage» du jour manquant est de deux jours. Pourquoi? Comment éviter cela?

Ce que j'espère, c'est d'afficher les données du 3 janvier sous la forme d'une ligne verticale comme celle-ci:

manually fixed jsfiddle screenshot

Je ne peux pas simplement tricher et ajouter 6 heures à l'horodatage et utiliser step: "left" car une telle triche sera révélée lorsque l'utilisateur zoomera et que des horodatages plus précis commenceront à apparaître.

0
Peter V. Mørch 20 avril 2017 à 20:17

3 réponses

Meilleure réponse

Mon patron a eu une idée brillante: en plus d'avoir un point de données au début d'un intervalle, pourquoi ne pas simplement créer de faux points de données à la fin des intervalles? Ainsi, ces données deviennent à la place:

Jan 1 00:00:00: 10
Jan 1 23:59:59: 10
Jan 2 00:00:00: 20
Jan 2 23:59:59: 20
Jan 3 00:00:00: 30
Jan 3 23:59:59: 30
Jan 4 00:00:00: <no data>
Jan 4 23:59:59: <no data>
Jan 5 00:00:00: 50
Jan 5 23:59:59: 50
Jan 6 00:00:00: 60
Jan 6 23:59:59: 60
etc.

Cela fonctionne à merveille! (jsfiddle):

solution

(Ceci a bien sûr l'inconvénient de présenter des Highcharts avec deux fois plus de données pouvant causer des problèmes de performances)

0
Peter V. Mørch 21 avril 2017 à 10:48

La réponse de @ wergeld m'a amené à réaliser que j'avais posé la mauvaise question. J'ai donc accepté la réponse de @ wergeld, mais je voulais fournir plus de détails ici:

Le problème n'est pas seulement lié à la largeur des données null, mais à l'hypothèse sous-jacente que

xAxis: { type: 'datetime' }

Signifie que les données représentent un point unique dans le temps . J'ai des données chronologiques, où chaque point de données représente un intervalle de temps (voir ci-dessous).

Je ne pense pas que HighCharts me permette de tracer cela comme je le souhaite.

Je suppose que je dois utiliser une catégorie xAxis. (La longueur des intervalles peut varier entre les "colonnes" - je ne l'ignorerai pas pour l'instant.)

Côté serveur, nous avons les intervalles avec une granularité beaucoup plus fine, donc zoomer a un sens pour nous. Je viens de découvrir à ma grande surprise que le zoom fonctionne également pour les graphiques de catégorie xAxis (jsfiddle):

zoomable column highchart

Alors c'est ce que je vais faire:

  • Utilisez une catégorie xAxis
  • Prétendre que toutes les colonnes sont également larges
  • Faites-les zoomer en écoutant l'événement setExtremes xAxis (voir jsfiddle)

Note de bas de page sur les dérivés par rapport au temps

Je dirais que chaque fois que les données mesurées représentent une dérivée par rapport au temps (et ont des unités comme par exemple bits/s ou $/month), alors une mesure effectuée à n vraiment représente l'intervalle de temps

[t n-1 ; t n ]

Et pas un point dans le temps tel que t n car quand il est mesuré, le "dérivé" il est calculé / approximé comme: Δbits / Δt, mais Δt n'est pas proche de 0 dans fait réel.

Par exemple. ventes pr. Le mois est pour le mois d'avril, pas pour le 1er avril ou le 1er mai à 12h.

L'approche de Highchart (et de Flot?) Consistant à prétendre que toutes les données de séries chronologiques représentent un point unique dans le temps crée des graphiques qui sont trompeurs et difficiles à interpréter correctement.

0
Peter V. Mørch 20 avril 2017 à 22:43

Ce n'est pas 2 jours de large. Vous avez vos données le 3 janvier et le 5 janvier. La largeur entière correspond à cette date. Vos points sont à minuit pour chaque jour. Vous n'avez aucune donnée valable pour une journée entière (de minuit à minuit). Vous avez donc 24 heures sans données entre le 3 janvier et le 5 janvier. Pour résoudre, vous devrez ajouter plus de données basées sur le temps ou peut-être utiliser une catégorie xAxis

2
wergeld 20 avril 2017 à 17:29