web-dev-qa-db-fra.com

Comment définir les highcharts par défaut sur les données manquantes

J'ai une série chronologique à 1 minute d'intervalle. Je voudrais afficher cela dans un graphique avec des points manquants comme 0.

J'ai trouvé xAxis.ordinal et l'ai désactivé, ce qui affiche la série temporelle correctement espacée. Le problème est qu’il trace directement des lignes entre les points sans passer à 0 pour les données manquantes.

javascripthighcharts
47
Wraithan

Une solution consiste à pré-traiter les données, en remplaçant null par 0:

var withNulls = [null, 12, 23, 45, 3.44, null, 0];
var noNulls = withNulls.map(function (item) {
    return (item === null) ? 0 : item;
});

Exemple enregistré sur jsfiddle: http://jsfiddle.net/7/7mhMP/

5
eolsson

J'ai minutieusement cherché la référence API de HighCharts , mais ils n'offrent pas cette option. Ce qu’ils proposent, c’est l’option de désactiver la connexion de points lorsque null données se trouvent entre (uniquement les graphiques linéaires et surfaciques):

var chart = new Highcharts.Chart({
    plotOptions: {
        line: {
            connectNulls: false
        }
    }
});

Ceci est le paramètre par défaut selon l'API, donc je ne suis pas sûr de savoir pourquoi vos données se connectent avec des valeurs null entre les deux. Peut-être qu'ils ont changé les valeurs par défaut récemment?

Example of HighChart with missing data

Je pense que ceci est une bonne représentation de vos données, car le défaut de null à 0 semble induire en erreur.

5
Justus Romijn

Vous devez remplir les données manquantes avec la valeur 0 . Parce que Highchart ne reconnaît pas l'intervalle xAxis.

Si vous avez une série chronologique à un intervalle de 1 minute, définissez toutes les données minute manquantes sur 0; Si vous avez une série chronologique à 1 jour)} intervalle, vous devez définir toutes les jour données manquantes sur 0.

1
Aaronlong31

J'ai le même problème et ce que je comprends, c'est que vous devez définir votre structure de données dans la base de données en tant que VARCHAR et définir la valeur par défaut sur null afin que, lorsque vous ne disposez pas de données, il devienne NULL. Ensuite, il accepte les valeurs nulles et le graphique en grille ne s’affiche pas et ne connecte pas les zones manquantes avec des valeurs null.
De plus, vous devez recevoir les données en tant que NULL et ne les changez pas en ''.
voir cet exemple de travail: 

var chart = new Highcharts.Chart({

    chart: {
        defaultSeriesType: 'spline', // use line or spline
        renderTo: 'container1'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [9, 4,null, 2, 1, 0, 6, 5, 4, 1, 6, 4]
    }]

});

ici est le violon avec deux graphiques différents utilisant null et ''

METTRE À JOUR:
Si vous utilisez parseINT pour transmettre des données, vous devez vous rappeler que parseINT(NULL) vous donne NAN. Pour ce bogue, essayez d’appuyer manuellement sur NULL avec quelque chose comme ceci: 

var val = parseInt(rows[i]);
if (isNaN(val))
{
  val = null;
  result.Push(val);
}
0
osyan