Отображение часов и минут на оси X с Highcharts

Question

Я хочу вывести следующие данные (время, уровень заряда батареи) в диаграмме области:

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]
]

ось X должна начинаться в 00.00 утра 00.00 вечера, целый день.

К сожалению, я не понимаю, какие варианты использовать при просмотре API. То, что я сейчас получаю, это ось х, которая идет от 8.00 до 8.55,8.60,8.65 ~ 9.00. Таким образом, он использует десятичную систему вместо минутной системы.

Как настроить, чтобы линия состояла из 24 часов и 60 минут?

С текущими данными, график будет пустым, только с точками с 8:00 до 9:00.

Я надеюсь, что кто-нибудь может помочь мне в моем пути.

Спасибо

Mattijs

Answer 1

вы можете попробовать этот код для создания оси X в 12-часовом формате времени

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

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

Также для "всплывающей подсказки" попробуйте это:

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

И, конечно, серия будет:

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]
        ]
    }]

Надеюсь, это решит вашу проблему.Благодаря.

Answer 2

Highcharts имеет встроенный способ отображения времени или даты в виде оси Xaxis. Как правило, в этом случае ваши данные будут использовать значение времени в миллисекундах, и старшие диаграммы будут отображать его соответствующим образом ( см. Этот пример ).

Если вы хотите иметь 24-часовой рабочий день, включая ваши данные, это может выглядеть примерно так:

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

Затем вы можете сделать что-то вроде использования пользовательского xAxis форматера или форматера даты для отображения меток так, как вы хотите.