highcharts java json_jQuery-使用Highcharts通过JSON重新加载图表数据

我正在尝试通过JSON基于页面其他位置的按钮单击来重新加载Highcharts图表的数据。 最初，我想显示一组默认数据(按类别支出)，然后根据用户输入(例如按月支出)加载新数据。 我想到的最简单的从服务器输出JSON的方法是将GET请求传递到PHP页面，例如$ .get('/ dough / includes / live-chart.php？mode = month'，检索此信息 按钮的ID属性中的值。

到目前为止，这是我检索默认数据(按类别支出)的内容。 需要找到如何根据用户输入的需要将完全不同的数据加载到饼图中的方法：

$(document).ready(function() {

//This is an example of how I would retrieve the value for the button

$(".clickMe").click(function() {

var clickID = $(this).attr("id");

});

var options = {

chart: {

renderTo: 'graph-container',

margin: [10, 175, 40, 40]

},

title: {

text: 'Spending by Category'

},

plotArea: {

shadow: null,

borderWidth: null,

backgroundColor: null

},

tooltip: {

formatter: function() {

return ''+ this.point.name +': $'+ this.y;

}

},

credits: {

enabled: false

},

plotOptions: {

pie: {

allowPointSelect: true,

cursor: 'pointer',

dataLabels: {

enabled: true,

formatter: function() {

if (this.y > 5) return '$' + this.y;

},

color: 'white',

style: {

font: '13px Trebuchet MS, Verdana, sans-serif'

}

}

}

},

legend: {

layout: 'vertical',

style: {

left: 'auto',

bottom: 'auto',

right: '50px',

top: '100px'

}

},

series: [{

type: 'pie',

name: 'Spending',

data: []

}]

};

$.get('/dough/includes/live-chart.php', function(data) {

var lines = data.split('\n');

$.each(lines, function(lineNo, line) {

var items = line.split(',');

var data = {};

$.each(items, function(itemNo, item) {

if (itemNo === 0) {

data.name = item;

} else {

data.y = parseFloat(item);

}

});

options.series[0].data.push(data);

});

// Create the chart

var chart = new Highcharts.Chart(options);

});

});

任何帮助将不胜感激

编辑

感谢Robodude，这是更新的Javascript。 约翰，你在这里让我步入正轨-谢谢！ 现在，我陷入了如何替换AJAX请求中图表上数据的问题。 我必须承认$ .get()之后的代码很可能来自示例代码，我不完全了解运行时的情况-也许还有更好的方式格式化数据？

我能够取得一些进展，因为该图表现在加载了新数据，但是将其添加到已经存在的数据之上。 我怀疑罪魁祸首是这条线：

options.series[0].data.push(data);

我试过options.series [0] .setData(data); 但是什么也没发生。 从好的方面来说，基于选择菜单的值，AJAX请求可以正常工作，并且没有Javascript错误。 这是有问题的代码，没有图表选项：

$.get('/dough/includes/live-chart.php?mode=cat', function(data) {

var lines = data.split('\n');

$.each(lines, function(lineNo, line) {

var items = line.split(',');

var data = {};

$.each(items, function(itemNo, item) {

if (itemNo === 0) {

data.name = item;

} else {

data.y = parseFloat(item);

}

});

options.series[0].data.push(data);

});

// Create the chart

var chart = new Highcharts.Chart(options);

});

$("#loadChart").click(function() {

var loadChartData = $("#chartCat").val();

$.get('/dough/includes/live-chart.php?mode=' + loadChartData, function(data) {

var lines = data.split('\n');

$.each(lines, function(lineNo, line) {

var items = line.split(',');

var data = {};

$.each(items, function(itemNo, item) {

if (itemNo === 0) {

data.name = item;

} else {

data.y = parseFloat(item);

}

});

options.series[0].data.push(data);

});

// Create the chart

var chart = new Highcharts.Chart(options);

});

});

});

编辑2这是图表从中提取的格式-非常简单，类别名称和值后面都有\ n。

Coffee, 4.08

Dining Out, 5.05

Dining: ODU, 5.97

Dining: Work, 38.41

Entertainment, 4.14

Gas, 79.65

Groceries, 228.23

Household, 11.21

Misc, 12.20

Snacks, 20.27