Question

我正在解析CSV数据以便放置在HighCharts图表上。我的日期字段位于第一列，如下所示：

Time, Summary
9/1/2015 12:00 AM,189
9/1/2015 12:15 AM,202

为解析数据，我使用：

var dataSeries = []
    var lines = csv.split('\n');
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');
        if (lineNo !== 0) {
            var x = +new Date(items[0]),
                summary = parseInt(items[1]);
            dataSeries.push([x, summary]);
        }
    });

当数据放在我的图表上时，它似乎是UTC时间而不是CSV数据中指定的实际时间。我的图表从早上5点开始，而不是凌晨12:00。我像这样设置我的图表：

 var options = { 
        chart: {
            backgroundColor: '#f6f6f6',
            renderTo: 'chart1'
        },
        xAxis: {
            title: {
                text: 'Hour'
            },
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%b %e %l:%M %P',
                hour: '%l:%M %P'
            },                    
        },
        yAxis: [{
            title: {
                text: 'Average Whatever'
            },
            min: 0,
        },{opposite: true, min: 1}],
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: []
    };

    var chart = new Highcharts.Chart(options);
    chart.addSeries({
        name: 'Summaries',       
        data: dataSeries,
        type: 'line',
        marker: { enabled: true }
    });
});

以下是jsfiddle的链接。

Answer 1

在高图调用之前使用以下函数。它将防止日期显示为utc日期。

$( function () {
    Highcharts.setOptions( {
        lang : {
            rangeSelectorZoom : ' '
        },
        global : {
            useUTC : false
        }
    } );
} );

Answer 2

尝试类似这样的简单演示

$(function () {
    $('#container').highcharts({
        xAxis: {
            type: 'datetime'
        },

        plotOptions: {
            series: {
                pointStart: Date.UTC(2015, 8, 1,12,0),
                pointInterval:  3600 * 1000 // one hour
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }, {
            data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]
        }]
    });
});

http://jsfiddle.net/ddx0upcd/

JavaScript日期在HighCharts上转换为UTC

2 个答案: