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 
}] 

你如何做这个服务器端取决于你使用的是什么技术，但原理是一样的。

这将导致在所有时间连续图表。