Affichage des heures et des minutes sur l'axe des abscisses avec Highcharts

Je veux à la sortie de la suite de données (temps, le niveau de la batterie) dans une zone de graphique:

data: [
    [08.15, 14.8],
    [08.20, 13.9],
    [08.25, 12.8],
    [08.30, 11.8],
    [08.35, 13.9],
    [08.40, 14.1],
    [08.45, 13.9],
    [08.50, 14],
    [08.55, 14],
    [09.00, 14.1],
    [09.05, 14.4]
]

l'axe x doit commencer à 00.00 suis 00.00 heures, une journée entière.

Malheureusement je ne comprends pas quelles sont les options à utiliser, quand je relis l'API.
Ce que je reçois aujourd'hui est un axe x qui va de 8.00~8.55,8.60,8.65 ~ 9.00. Elle utilise donc un système décimal au lieu d'une minute du système.

Comment puis-je configurer que la ligne doit se composent de 24 heures à 60 minutes?

Avec les données actuelles, le tableau serait une sorte de vide, de n'avoir que des points autour de 8h00 à 9h00.

J'espère que quelqu'un peut m'aider sur mon chemin.

Merci,

Mattijs

source d'informationauteur Mattijs

  1. 29

    vous pouvez essayer ce code pour l'axe des x dans 12hour format de l'heure

    xAxis: {
    title: {
        enabled: true,
        text: 'Hours of the Day'
    },
    type: 'datetime',

    dateTimeLabelFormats : {
        hour: '%I %p',
        minute: '%I:%M %p'
    }
},

    Aussi pour les "info-bulle" essayez ceci:

    tooltip: {
    formatter: function() {
        return ''+
                "" +
                'Time: '+ Highcharts.dateFormat('%I:%M %p', this.x);
    }
},

    Et bien sûr de la série serait:

    series: [{
        data: [
            [Date.UTC(2013, 3, 22, 1, 15), 12.7], 
            [Date.UTC(2012, 3, 24, 3, 20), 13.5], 
            [Date.UTC(2012, 2, 22, 2, 25), 18.8]
        ]
    }]

    L'espoir qu'il pourrait résoudre votre problème. Merci.

  2. 8

    Highcharts a construit dans le mode de traçage les heures et les dates que le xaxis. Typiquement, dans ce cas, vos données serait d'utiliser une valeur de temps en millisecondes, et highcharts tracera en conséquence (voir cet exemple).

    Si vous voulez avoir une journée de 24 heures, y compris vos données, il pourrait ressembler à quelque chose comme ceci:

    var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime' //ensures that xAxis is treated as datetime values
    },

    series: [{
        data: [
            [Date.UTC(2012, 5, 22, 8, 15), 14.8], 
            [Date.UTC(2012, 5, 22, 8, 20), 13.9], 
            [Date.UTC(2012, 5, 22, 8, 25), 12.8]
            //and so on...
        ]
    }]
});

    Vous pourriez faire quelque chose comme utiliser un xAxis formateur ou date de formateur pour afficher les étiquettes comme vous le souhaitez.