解析JSON以用作HighCharts中的数据

时间:2016-05-02 00:53:46

标签: javascript json charts highcharts

我正在尝试使用带有日期的x轴创建一个图表。 我正在使用Highcharts网站上的以下示例,因为它几乎正是我想要实现的。 使用getJson我从这个格式的URL获取json:

[[Date.UTC(2016,04,29),3],[Date.UTC(2016,04,30),1],[Date.UTC(2016,05,02),4]]

正如您所看到的,它与示例中使用的格式类似。但是我从getJson得到以下错误:

angular.js:12416 SyntaxError: Unexpected token D in JSON at position 2

我认为Date.UTC不是问题,因为当我删除它时,我仍然会收到下一个字符的错误“(”。 当我删除getJson函数并简单地将上述值硬编码为数据时,完全按照上面的格式,图表呈现完美。当我对它进行硬编码时,我不明白它是如何工作的,但如果不是,则不知道。

代码如下(与官方高图示例完全相同)

$(function () {
$.getJSON('http://localhost:8181/graphData', function (data) {

    $('#container').highcharts({
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'Visitors per day'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: 'Num people'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },

        series: [{
            type: 'area',
            name: 'USD to EUR',
            data: data
        }]
    });
});

});

0 个答案:

没有答案