highcharts 显示时间变化数据

Question

我想使用 highcharts 绘制几天（可能是 1 到 7 天）的数据。

数据可以是每小时或每半小时。

我希望显示为当地时间（即遵守夏令时）。

我希望图表是连续的，即在春季时间变化时，线中没有“间隙”，在冬季时间变化日，时间变化日没有加倍（即之字形）。

a) highcharts 可以处理这个吗？

b) 如果不是，我可以改为以标准时间（即没有时间变化）绘制，但用本地时间标签标记 x 轴。如果是这样：

b.1) 我是否可以指定仅在本地时间标签为 00:00（而不是标准时间值）时显示标签，因为数据跨越数天，并且我只希望在日期变化时的午夜显示标签当地时间？

非常感谢您的帮助。我希望已经有一个 jsfiddle 示例或我在寻找解决方案时遗漏的东西。

[用我的解决方案更新]

我最终通过指定要使用的 xAxis 类别和 tickPositions 解决了这个问题。 这将正确绘制夏令时变化天数（包括图表的 xAxis 刻度线/网格线） 我有一个对象（在 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 或在客户端。

在客户端你会使用类似的东西：

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

getTimezoneOffset() 以分钟为单位返回偏移量，因此您需要乘以 3600 才能转换为毫秒。

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

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

这将始终生成连续图。