Javascript 使用ajax使用Highcharts动态绘制图形

我正在尝试使用highchart的ajax功能绘制此图

这是我的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
    });
    });
});

这是政府的回应

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

---

只需在代码中的console.log（）下面添加这一行即可。它将字符串转换为json格式

//data = "\"\\\"[{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]}]\\\"\"";
data = data.replace(/\\+n\s*/g,'');
data = data.replace(/.*?\[/,'[');
data = data.replace(/\}\][\\\"]+$/,'}]');
data = data.replace(/'/g,'"');
data = data.replace(/([a-z\_\-0-9]+)\:/g,'"$1":');
data = JSON.parse(data);

---

我们得用绳子稍微清理一下。另请参考：

首先，您需要初始化您的高位图表，然后您需要从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);
    });

});

---

你有任何控制台错误吗没有，我没有任何控制台错误你的回答看起来很奇怪。。。为什么会有这些斜杠？你能在JSFIDDLE中重新编译同样的东西吗？看起来你加载了一个包含json的txt文件。尝试在后端返回本机JSON，然后通过ajax加载。如何在后端返回json？我得到了相同的输出，请记住您在php文件中添加了允许跨源代码

$(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);
    });

});