通过JSON与Highcharts重新载入图表数据

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

这是我迄今为止检索默认数据(按类别开支)。 需要find如何根据用户input,按需要将完全不同的数据加载到饼图中:

$(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 '<b>'+ this.point.name +'</b>: $'+ 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); }); }); 

任何帮助将不胜感激

编辑

这是更新的Javascript感谢Robodude。 约翰,你让我走在正确的轨道上 – 谢谢! 我现在陷入了如何从AJAX请求中replace图表上的数据。 我必须承认,$ .get()之后的代码很可能来自示例代码,我不完全理解运行时发生了什么 – 也许有更好的方法来格式化数据?

我能够取得一些进展,图performance在加载新的数据,但它已经被添加到已有的数据之上。 我怀疑罪魁祸首是这一行:

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

我试过options.series [0] .setData(data); 但没有任何反应。 好的一面,AJAX请求基于select菜单的值完美地工作,没有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 

编辑:下面的回应是更正确的!

https://stackoverflow.com/a/8408466/387285

http://www.highcharts.com/ref/#series-object

HTML:

 <SELECT id="list"> <OPTION VALUE="A">Data Set A <OPTION VALUE="B">Data Set B </SELECT> <button id="change">Refresh Table</button> <div id="container" style="height: 400px"></div> 

使用Javascript:

 var options = { chart: { renderTo: 'container', defaultSeriesType: 'spline' }, series: [] }; $("#change").click(function() { if ($("#list").val() == "A") { options.series = [{name: 'A', data: [1,2,3,2,1]}] // $.get('/dough/includes/live-chart.php?mode=month' } else { options.series = [{name: 'B', data: [3,2,1,2,3]}] // $.get('/dough/includes/live-chart.php?mode=newmode' } var chart = new Highcharts.Chart(options); }); 

这是一个非常简单的例子,因为我没有我的文件在这里,但基本的想法是,每当用户select他们想要看到的东西的新选项,你将有replace.series数据对象与您的服务器的新信息,然后使用新的Highcharts.Chart();重新创build图表。

希望这可以帮助! 约翰

编辑:

看看这个,从我以前的工作中得到:

 $("table#tblGeneralInfo2 > tbody > tr").each(function (index) { if (index != 0) { var chartnumbervalue = parseInt($(this).find("td:last").text()); var charttextvalue = $(this).find("td:first").text(); chartoptions.series[0].data.push([charttextvalue, chartnumbervalue]); } }); 

我有一张桌子,里面有我需要添加到饼图中的第一个和最后一个tds的信息。 我遍历每一行并推入值。 注:我使用chartoptions.series [0] .data,因为饼图只有1个系列。

其他答案不适合我。 我在他们的文档中find了答案:

http://api.highcharts.com/highcharts#Series

使用此方法( 请参阅JSFiddle示例 ):

 var chart = new Highcharts.Chart({ chart: { renderTo: 'container' }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); // the button action $('#button').click(function() { chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] ); }); 

您需要先清除旧的数组,然后再推入新的数据。有很多方法可以实现这一点,但是我使用了这个:

 options.series[0].data.length = 0; 

所以你的代码应该是这样的:

 options.series[0].data.length = 0; $.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); }); 

现在当button被点击时,旧数据被清除,只有新数据应该显示出来。 希望有所帮助。

其实也许你应该selectfunctionupdate更好。
以下是函数update文档http://api.highcharts.com/highcharts#Series.update

你可以像下面这样input代码:

chart.series[0].update({data: [1,2,3,4,5]})

这些代码将合并原始选项,并更新已更改的数据。

正确答案是:

 $.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); data = {}; }); 

您需要刷新“数据”数组。

 data = {}; 

如果您正在使用push将数据dynamic推送到option.series,请使用

 options.series = []; 

清除它。

 options.series = []; $("#change").click(function(){ } 

你可以随时加载一个json数据

在这里我将Chart定义为命名空间

  $.getJSON('data.json', function(data){ Chart.options.series[0].data = data[0].data; Chart.options.series[1].data = data[1].data; Chart.options.series[2].data = data[2].data; var chart = new Highcharts.Chart(Chart.options); }); 

data = [150,300]; // data from ajax or any other way chart.series[0].setData(data, true);

setData将调用重绘方法。

参考: http : //api.highcharts.com/highcharts/Series.setData