Question

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

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

我希望显示器在当地时间（即观察夏令时）。

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

a）highcharts可以处理这个吗？

b）如果没有，我可以改为在标准时间内绘图（即没有时间变化），而是用本地时间标签标记x轴。如果是的话：

b.1）我是否可以指定仅在本地时间标签为00:00（而不是标准时间值）时显示的标签，当数据跨越几天时，我只想在午夜时更改标签在当地时间？

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

[我的解决方案更新]

我最终通过指定要使用的xAxis类别和tickPosition来解决此问题。这将正确绘制夏令时变化天数（包括图表的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
}]

你如何做这个服务器端取决于你使用的技术，但原则是相同的。

这将始终产生连续的图表。

highcharts在timechange上显示数据

1 个答案: