2017-08-25 47 views
-1

如何確保數據彼此靠近按日期時間排序&。我想用顯示日期時間的所有數據如何在Highchart中顯示所有數據

var charts = Highcharts.chart('container', { 
 
    xAxis: { 
 
    type: 'datetime' 
 
    }, 
 
    series: [{ 
 
    type: 'area', 
 
    data: [ 
 
     [Date.UTC(2015, 9, 25, 14, 13, 00), 3.500], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 02), 3.501], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 04), 3.502], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 06), 3.505], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 08), 3.509], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 10), 3.507], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 12), 3.510], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 14), 3.525], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 16), 3.536], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 18), 3.575], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 20), 3.595], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 22), 3.514], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 24), 3.525], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 26), 3.536], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 28), 3.514], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 30), 3.510], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 32), 3.523], 
 
     [Date.UTC(2015, 9, 25, 14, 13, 34), 3.596], 
 
     [Date.UTC(2015, 9, 26, 18, 13, 34), 4.596] 
 
    ] 
 
    }] 
 
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

它看起來像你的文章大多是代碼;請添加更多的細節。是的,我很抱歉

+0

問題是你有一個幾秒鐘內得到很多點數,然後a指出一整天的時間。 '日期時間'情節可能不是這種類型的應用程序的最佳選擇。 –

回答

0

除了@Z。 Bagley寫道,爲了解決這個問題,你可以使用一些解決方案。第一個將涉及使用Highstock圖表。在Highstock圖表中,有一個名爲ordinal的屬性(默認情況下爲true),它在xAxis上平均分配點數。其次,您可以使用breaks以及設置新的xAxis極值以減少最後兩個日期之間的距離。您也可以嘗試添加scrollbar

API參考:
http://api.highcharts.com/highstock/xAxis.ordinal
http://api.highcharts.com/highcharts/xAxis.breaks
http://api.highcharts.com/highstock/scrollbar

例子:
http://jsfiddle.net/pbdor59x/ - 使用Highstock和序財產 http://jsfiddle.net/abwpqs19/ - 利用休息 http://jsfiddle.net/4cc2n3sp/ - 使用滾動條