javascript - 使用 ajax 使用 Highcharts 动态绘制图形

Question

我尝试使用 highchart 的 ajax 功能来绘制此图 http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-negative/

这是我的javascript代码

$(document).ready(function() {
    $.getJSON('http://localhost/dashboard/graphdata', function(data) {
        console.log(data);
        var options = $('#container').highcharts({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Column chart with negative values'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },
        credits: {
            enabled: false
        },
        series: data
    });
    });
});

这是对 http://localhost/dashboard/graphdata 的回应

"\"\\\"[{name: 'John', data: [5, 3, 4, 7, 2]},\\\\n            {name: 'Jane', data: [2, -2, -3, 2, 1]},\\\\n            {name: 'Joe', data: [3, 4, 4, -2, 5]}]\\\"\""

然而，我得到的不是图表，而是这个

Answer 1

首先您需要初始化您的 Highcharts ，然后您需要从ajax 获取值。

$(document).ready(function() {

    var options = {
    chart: {
        renderTo: 'chart',
        defaultSeriesType: 'column'
    },

    title: {
        text: 'Voting Results'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: 'votes'
        }
    },
    series: [{}]

};

    $.getJSON('http://localhost/dashboard/graphdata', function(data) {
        options.series[0].name = "Votes";
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });

});