Highchart UTC日期始终设置为1970年1月1日

时间:2015-03-24 13:12:28

标签: javascript json highcharts

从外部服务我收到的转换为UTC的日期。 Highcharts工具提示显示Jan 01, 1970我不确定为什么它没有正确解释日期。如果我手动将UTC时间转换为字符串,然后使用Date.UTC JavaScript方法,它可以正常工作。我不确定为什么UTC格式的日期不起作用。

    var weightChart;
    var weightData = [];
    var minWeight;
    var maxWeight;
    $(function () {

        var json = {"ibw":175,"max_weight":300,
"min_weight":175,
"weights":[{"date":1232521200,"weight":300},
{"date":1245218400,"weight":300},
{"date":1313042400,"weight":290},
{"date":1319522400,"weight":270},
{"date":1330498800,"weight":200},
{"date":1342591200,"weight":250},
{"date":1365141600,"weight":235}]};


                    minWeight = json.min_weight;
                    maxWeight = json.max_weight;
                    $.each(json.weights, function(i, item) {
                        weightData.push([item.date, item.weight]);
                    });

                    displayGraph();


    });

    function displayGraph() {
                //graph
                weightChart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'spline',
                        zoomType: 'xy',
                        height: 113
                    },
                    credits: {
                        enabled: false
                    },
                    title: {
                        text: ''
                    },
                    tooltip: {
                        xDateFormat: '%b %d, %Y',
                        headerFormat: 'Date: <b>{point.key}</b><br />',
                        pointFormat: 'Weight: <b>{point.y}</b>'
                    },
                    xAxis: {
                        type: 'datetime',                   
                        labels: {
                            enabled: false
                        }
                    },
                    yAxis: {
                        title: {
                            text: ''
                        },
                        plotLines: [{
                            color: '#FF0000',
                            width: 2,
                            value: 125
                        }],
                        min: minWeight,
                        max: maxWeight
                    },
                    series: [{
                        name: ['Weight'],
                        data: weightData

                    }],
                    exporting: {
                        enabled: false
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            colorByPoint: false,
                            pointWidth: 12,
                            shadow: true
                        }
                    }
                });
            }

Here is the fiddle for it

2 个答案:

答案 0 :(得分:6)

您的数据看起来像是来自您的后端的UNIX时间戳。 Highcharts期望javascript时间是UNIX时间,以毫秒为单位。它显示1970年1月1日是因为这是什么&#34; 1232521200&#34;是的日期。将您的日期戳乘以1000,您将获得适当的时间。直播demo

var json = {
    "ibw": 175,
    "max_weight": 300,
    "min_weight": 175,
    "weights": [{
        "date": 1232521200000,
        "weight": 300
    }, {
        "date": 1245218400000,
        "weight": 300
    }, {
        "date": 1313042400000,
        "weight": 290
    }, {
        "date": 1319522400000,
        "weight": 270
    }, {
        "date": 1330498800000,
        "weight": 200
    }, {
        "date": 1342591200000,
        "weight": 250
    }, {
        "date": 1365141600000,
        "weight": 235
    }]
};

答案 1 :(得分:1)

我建议您在字符串中转换服务器端的日期并提供正确的日期格式,然后将数据作为字符串返回,高图将以正确的格式显示。

例如,在服务器端,我有DateTime对象

DateTime date = DateTime.Now

我以正确的格式转换日期并将其作为字符串日期返回.ToString(&#34; dd.MM.yyyy&#34;)