highcharts在timechange上顯示數據

Question

我想使用高位圖來繪製數天的數據（可能會從1天到7天）。

數據可能是小時或半小時。

我想顯示是在本地時間（即觀察夏令時）。

我希望圖形是連續的，即春季時間變化時，在冬季時間變化當天沒有「間隙」，在時間變化當天沒有雙倍的迴轉（即之字形）。

a）可以用highcharts來處理嗎？

b）若沒有，可能我不是繪製標準時間（即沒有時間變化），但標註的X軸與本地時間標籤。如果是這樣的話：

b.1）我可以指定標籤，只有當本地時間標籤是00:00（而不是標準時間值）時，數據跨越幾天，我只想要一個標籤當地時間一天變化的午夜？

非常感謝您的幫助。我希望已經有一個jsfiddle例子或者我在尋找解決方案時錯過了一些東西。

[更新了我的解決方案]

我結束了指定x軸類別和tickPositions使用解決這個。 這將繪製夏天的時候改變天正確（包括圖表的X軸刻度/網格線） 我有一個對象（在C＃中定義，並通過JSON傳回的JavaScript），它看起來是這樣的：

public class DataTableList 
{ 
    public int numDays = 0; 
    public List<string> heading = null; 
    public List<List<string>> table = null; 
}; 

和一個函數，它會查看要繪製的天數，如果是一天或兩天，只需繪製時間，否則繪製日期。 還使用xAxisCategories來告訴圖表在哪裏繪製刻度（即網格線）。

function RefreshChartData() {  
    if (_data == null) 
     return; 

    var datePos, timePos, load_fcstPos; 

    //we will 'line up' chartTickPositions and xAxisCategories so there's a tick for each label 
    var chartTickPositions = Array(); //values on the x axis to display labels (x axis just goes 0,1,2,3,...,n) 
    var xAxisCategories = new Array(); //labels to display on the xAxis 

    //find column positions for data we're interested in plotting 
    for (var col = 0; col < _data.heading.length; col++) 
    { 
     if (_data.heading[col].toLowerCase() == 'date') 
      datePos = col; 
     if (_data.heading[col].toLowerCase() == 'time') 
      timePos = col; 
     if (_data.heading[col].toLowerCase() == 'load_fcst') 
      load_fcstPos = col; 
    } 

    var seriesStr = []; //y values to plot 

    //iterate through table rows, extracting data to plot, sorting out chart tick labels, etc 
    for (var row = 0; row < _data.table.length; row++) { 
     //get number of days we're plotting 
     var numDays = parseInt(_data.numDays); 

     //extract values to plot from row 
     var date = _data.table[row][datePos]; 
     var time = _data.table[row][timePos]; 
     var iTime = parseInt(time); 
     var value = _data.table[row][load_fcstPos]; 

     //create xAxis Label 
     switch (numDays) { 
      case (1): 
      case (2): 
       if (iTime % 200 == 0) { 
        chartTickPositions.push(row); //want to plot this label every two hours 
        xAxisCategories.push(time); 
       } 
       else 
        xAxisCategories.push(''); 
       break; 
      case (3): 
      case (4): 
      case (5): 
      case (6): 
      case (7): 
      default: 
       //just return date 
       if (iTime == 0) { 
        chartTickPositions.push(row); //want to plot this label midnight every day 
        xAxisCategories.push(date); 
       } 
       else 
        xAxisCategories.push(''); 
     } 

     //add value to series to plot 
     seriesStr.push(parseInt(value, 10)); 
    } 

    var chart = new Highcharts.Chart({ //buid up our chart javascript to be triggered on client browser 

     chart: { 
      renderTo: 'chartContainer', 
      animation: false, 
      zoomType: 'x' 
     }, 

     //http://api.highcharts.com/highcharts#xAxis 
     xAxis: { 
      categories: xAxisCategories, 
      tickPositions: chartTickPositions, 
      gridLineWidth: '1', 
      lineWidth: 1, 
      labels: { 
       rotation: -90, 
       align: 'right' 
       //}, 
       //formatter: function() { 
       // return chartFormatter(this.value); 
       //}     
      } 
     }, 

     //http://api.highcharts.com/highcharts#plotOptions.series 
     series: [{ 
      data: seriesStr, 
      draggableY: false, 
      color: 'green' 
     }] 
    }); 
} 

Answer 1

您沒有指定是要在服務器本地時間顯示圖形，還是在客戶機上顯示本地時間。

概念你想要做的是存儲你的數據在UTC時間，然後申請一個本地時區偏移到它，無論是在服務器上它傳遞給Highcharts或在客戶端之前。

在你使用類似的客戶端：所以你需要通過3600乘以轉換到毫秒

var myStartDateTimeInUTC = <assumed to be initialized in milliseconds>; 
var d = new Date(); 
var timeZoneOffset = d.getTimezoneOffset() * 3600; 

使用getTimezoneOffset（）返回分鐘偏差。

series: [{ 
    data: [ your data here ], 
    pointStart: myStartDateTimeInUTC - timeZoneOffset 
}] 

你如何做這個服務器端取決於你使用的是什麼技術，但原理是一樣的。

這將導致在所有時間連續圖表。