提取json数据后无法正确显示日期，highcharts答案

【问题标题】：can not display date properly after extract json data, highcharts提取json数据后无法正确显示日期，highcharts
【发布时间】：2016-03-02 12:30:30
【问题描述】：

我正在使用 highcharts 模板来可视化数据。

我推送json数据（日期和值）后，日期无法正常显示。

以下是相关文件：

test1.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>*****************</title>

    <script type="text/javascript" src="/static/js/highcharts/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/highcharts/highcharts.js"></script>
    <style type="text/css">
${demo.css}
        </style>
        <script type="text/javascript">
$(function () {
    var processed_json = new Array();
    $.getJSON('/static/json/test_load.json', function(data) {
                    // Populate series
                    for (i = 0; i < data.length; i++){
                        processed_json.push([data[i].key, data[i].value]);
                    }
        $('#container').highcharts({
            chart: {
            type: 'spline'


    },
        title: {
        text: '****************'
        },

        xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        },
        title: {
            text: 'Date'
        }
        },
        yAxis: {
        title: {
            text: 'Number'
        },
        min: 0
        },
        tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x:%e. %b}: {point.y:.0f} '
        },

        plotOptions: {
        spline: {
            marker: {
            enabled: true
            }
        }
        },

        series: [{
        name: 'claim',
        data: processed_json


   }]
        });
        });
});


</script>
    </head>
    <body>
<script src="/static/js/highcharts/highcharts.js"></script>
<script src="/static/js/highcharts/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    </body>
</html>

test_load.json

[{"key":"Date.UTC(2016, 0, 14)","value":7},
 {"key":"Date.UTC(2016, 0, 15)","value":0},
 {"key":"Date.UTC(2016, 0, 16)","value":2},
 {"key":"Date.UTC(2016, 0, 17)","value":4},
 {"key":"Date.UTC(2016, 0, 18)","value":7},
 {"key":"Date.UTC(2016, 0, 19)","value":88},
 {"key":"Date.UTC(2016, 0, 20)","value":8}
 ]

结果

谢谢你们，

陈

【问题讨论】：

标签： javascript json date datetime highcharts

【解决方案1】：

这是因为您发送的“x”值是"Date.UTC(2016, 0, 14)"，而不是Date.UTC(2016, 0, 14)。一个是字符串，另一个是将日期计算为 javascript 时间的函数。

【讨论】：

这会很棘手，因为它是 JSON，而不是 JSONP，所以Date.UTC() 不起作用，对吧？我宁愿建议已经传递时间戳（数字，以毫秒为单位）。
@PawełFus 是的，我总是会尝试直接从 DB 或从数据层传递时间戳。其他选择是为年、月和日设置其他键/值，然后尝试以编程方式构建 Data.UTC() 代码……但这种方式很疯狂。
@wergeld，感谢您的回复。我替换为 Date.UTC(2016, 0, 14) ，但它不起作用...现在甚至无法绘制图表...
@jennywei - 你能尝试在后端计算时间戳吗？而不是使用Date.UTC()。
@PawełFus，抱歉我的回复晚了。谢谢！