使用JSON数据的Highcharts图表空白

时间:2014-10-28 18:54:05

标签: javascript json highcharts

我是使用HighCharts和JSON的新手。我从我的数据库中提取数据,它正在生成以下JSON:

{"GS10":[{"data_date":-528656400,"value":2.83},{"data_date":-526064400,"value":3.05},{"data_date":-523386000,"value":3.11},{"data_date":-520794000,"value":2.93},{"data_date":-518115600,"value":2.95},{"data_date":-515437200,"value":2.87},{"data_date":-512845200,"value":2.66},{"data_date":-510166800,"value":2.68},{"data_date":-507574800,"value":2.59},{"data_date":-504896400,"value":2.48},{"data_date":-502218000,"value":2.47},{"data_date":-499798800,"value":2.37},{"data_date":-497120400,"value":2.29},{"data_date":-494528400,"value":2.37},{"data_date":-491850000,"value":2.38},{"data_date":-489258000,"value":2.3},{"data_date":-486579600,"value":2.36},{"data_date":-483901200,"value":2.38}]}

然后使用HighCharts将此JSON渲染为折线图。脚本如下。它呈现图形,但图形为空白。我目前只测试一个系列,但目的是一旦我能成功绘制一个系列就能够使用多个系列。任何帮助将不胜感激,谢谢。

<script>
$(function () {
var test_point = 'GS10';
$(document).ready(function() {
    $.getJSON("get_data.php", function(json) {
    var seriesArr = [];
    var series = {
        name: test_point,
            data: []
        };
        $.each(json[test_point], function(key, data){
                series.data.push({
                    date: data.data_date,
                    value: data.value
                });

    });
    seriesArr.push(series);

    var options = {
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'line'
        },
        xAxis: {
            type: 'datetime'
            },
        series: seriesArr
        };
        var chart = new Highcharts.Chart(options);
    });
});
});
</script>

1 个答案:

答案 0 :(得分:1)

问题出在那个部分:

            series.data.push({
                date: data.data_date,
                value: data.value
            });

不应该是data / value,而是x / y

            series.data.push({
                x: data.data_date,
                y: data.value
            });