x軸上顯示Highcharts 24小時

我想在x軸上以1小時爲間隔並在y軸上以7天爲間隔顯示穿過Highcharts圖表的24小時天。x軸上顯示Highcharts 24小時

我怎樣才能讓圖表在午夜開始運行24小時？

正如您在下面看到的那樣，該圖表現在開始於上午8:00，直到下午3:00。相反，我們希望它在上午12:00開始，晚上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>

----------------編輯--------------- - 我更新了數據以複製我們實際需要的內容。輸出正在工作，但「破碎」。我們希望圖表看起來像圖片。

來源

2016-10-04 T.Okahara

您可以使用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/

來源

2016-10-05 12:11:12

謝謝！這很好。我們看到了一個不同的問題/答案的答案，建議像您一樣使用最小值和最大值。是否有任何負面因素可以用來硬編碼最小值和最大值？ –

我意識到我的數據是無效的，因此硬編碼日期到最小和最大導致圖形不繪製我的數據。 –

是的，我認爲在你的xAxis和yAxis中使用setExtremes可能會更好，因爲在加載圖表之前，你可能不知道想要在圖表中顯示的範圍。但在你的情況下，它應該沒問題。我的例子是爲你工作嗎？如果是的話，你能否將我的答案標記爲正確的？ –

x軸上顯示Highcharts 24小時

回答

相關問題