Question

我正在使用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}
 ]

结果

谢谢你们，

陈

Answer 1

这是因为您发送的'x'值为Date.UTC(2016, 0, 14)而不是div { height: 150px; overflow: scroll; }。一个是字符串，另一个是将日期评估为javascript时间的函数。

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

1 个答案: