通过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
