ハイチャート24時間をx軸に表示

Question

Highchartsチャートを横切る24時間の日をx軸に1時間、y軸に7日間表示したいとします。

チャートを真夜中に開始し、24時間にわたって実行するにはどうすればよいですか？

現在、チャートは午前8時から午後3時にかけています。代わりに、午前12時に開始し、午後11時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/