Highcharts 24 часа, отображаемые по оси x

Question

Я хотел бы показать 24-часовые дни, проходящие через диаграмму Highcharts с интервалом в 1 час на оси x и 7 дней на оси y.

Как получить график, чтобы начать в полночь и работать в течение 24 часов?

Как вы можете видеть ниже, график в настоящее время начинается в 8:00 и продолжается до 15:00. Вместо этого мы хотели бы, чтобы он начинался в 12:00 и заканчивался в 23:59.

$('#graph').highcharts({ 
 
    exporting: { enabled: false }, 
 
    chart: { 
 
    type: 'columnrange', 
 
    inverted: true 
 
    }, 
 
    title: { 
 
    text:'' 
 
    }, 
 
    yAxis: { 
 
    type: 'datetime', 
 
    tickAmount: 24, 
 
    tickInterval: 3600 * 1000, 
 
    minTickInterval: 3600 * 1000, 
 
    lineWidth: 1, 
 
    dateTimeLabelFormats: { 
 
     day: '%H:%M' 
 
    }, 
 
    title: { 
 
     enabled: false 
 
    } 
 
    }, 
 
    xAxis: { 
 
    categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] 
 
    }, 
 
    legend: { 
 
    enabled: false 
 
    }, 
 
    plotOptions: { 
 
    series: { 
 
     pointWidth: 10, 
 
    } 
 
    }, 
 
    series: [{ 
 
    data: [ 
 
    { 
 
     x: 0, 
 
     low: Date.UTC(2010, 1, 1, 9, 0, 0), 
 
     high: Date.UTC(2010, 1, 1, 12, 0, 0), 
 
     color: 'blue' 
 
    }, { 
 
     x: 0, 
 
     low: Date.UTC(2010, 1, 1, 12, 30, 0), 
 
     high: Date.UTC(2010, 1, 1, 14, 0, 0), 
 
     color: 'blue' 
 
    }, 
 

 
    { 
 
     x: 1, 
 
     low: Date.UTC(2010, 1, 2, 9, 0, 0), 
 
     high: Date.UTC(2010, 1, 2, 12, 0, 0), 
 
     color: 'blue' 
 
    }, 
 
    { 
 
     x: 2, 
 
     low: Date.UTC(2010, 1, 3, 9, 0, 0), 
 
     high: Date.UTC(2010, 1, 3, 12, 0, 0), 
 
     color: 'blue' 
 
    }, 
 
    { 
 
     x: 3, 
 
     low: Date.UTC(2010, 1, 4, 9, 0, 0), 
 
     high: Date.UTC(2010, 1, 4, 12, 0, 0), 
 
     color: 'blue' 
 
    }, 
 
    { 
 
     x: 4, 
 
     low: Date.UTC(2010, 1, 5, 9, 0, 0), 
 
     high: Date.UTC(2010, 1, 5, 12, 0, 0), 
 
     color: 'blue' 
 
    }, 
 
    { 
 
     x: 5, 
 
     low: Date.UTC(2010, 1, 6, 9, 0, 0), 
 
     high: Date.UTC(2010, 1, 6, 12, 0, 0), 
 
     color: 'blue' 
 
    }, 
 
    { 
 
     x: 6, 
 
     low: Date.UTC(2010, 1, 7, 9, 0, 0), 
 
     high: Date.UTC(2010, 1, 7, 12, 0, 0), 
 
     color: 'blue' 
 
    }, 
 

 
    ] 
 
    }] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 

 
<div id="graph"></div>

---------------- EDIT --------------- - Я обновил данные, чтобы воспроизвести то, что мы действительно хотим. Выход работает, но «сломан». Мы хотели бы, чтобы график выглядел как картинка.

Answer 1

Вы можете использовать yAxis.min и yAxis.max для установки минимальных и максимальных значений вашей оси. Вы можете использовать tickPositioner для установки позиции ваших меток на оси: http://api.highcharts.com/highcharts/yAxis.tickPositioner

yAxis: { 
    min: Date.UTC(2010, 0, 1, 0, 0, 0), 
    max: Date.UTC(2010, 0, 2, 0, 0, 0), 
    type: 'datetime', 
    tickPositioner: function() { 
    var info = this.tickPositions.info; 
    var positions = []; 
    for (i = Date.UTC(2010, 0, 1, 0, 0, 0); i <= Date.UTC(2010, 0, 2, 0, 0, 0); i += 3600 * 1000) { 
     positions.push(i); 
    } 
    positions.info = info; 
    return positions; 
    }, 
    lineWidth: 1, 
    dateTimeLabelFormats: { 
    day: '%H:%M' 
    }, 
    title: { 
    enabled: false 
    } 
}, 

Здесь вы можете увидеть пример того, как это может работать: http://jsfiddle.net/1yccghgy/1/