通过JSON与Highcharts重载图表数据
https://stackoverflow.com/questions/4210879
-
25-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我试图重新加载基于一个按钮通过JSON一个Highcharts图表中的数据单击该页面的其他地方。最初我想显示的数据（按类别花费）的默认集合，但然后加载基于用户输入（由月消费，例如）新的数据。我可以从服务器认为JSON的输出最简单的方法是通过将一个GET请求到PHP页面，例如 $。获得（'/面团/包括/活chart.php？模式=一个月下，检索从按钮的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 '<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请求图表上的数据。我必须承认，按照$获得（）的代码是最有可能从样本代码，我不完全明白是怎么回事在运行时的 - 也许有更好的方式对数据进行格式化？
我能够取得一些进展，该图表现在加载新的数据，但它是在对什么是已经存在的顶部增加。我怀疑是罪魁祸首是此行：
options.series[0].data.push(data);
我试图options.series [0] .setData（数据）;但没有任何反应。在光明的一面，AJAX请求完美的作品基础上，选择菜单中的价值，并没有JavaScript错误。下面是有问题的代码，SANS图表选项：
$.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);
});
这是一个非常简单的例子，因为我没有我的档案在这里与我，但基本思想是，每一个他们想要看到的东西，用户选择新的选择的时候，你将不得不更换。从你的服务器，然后使用新的Highcharts.Chart（）重新创建图表新的信息系列数据对象;
希望这有助于！ 约翰
编辑：
检查了这一点，从东西我已经在过去的工作的：
$("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]。数据因为饼图只有1个系列
。其他提示
其他的答案并没有为我工作。我发现自己的文档中的答案：
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);
});
现在，当按钮被点击的旧数据被清除，只有新的数据应显示出来。希望有所帮助。
其实也许你应该选择的功能update是更好的。结果
下面是函数的文档update http://api.highcharts.com/highcharts#Series.update
可以只输入像下面的代码：
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 = {};
如果您的是使用推动态推数据到option.series ..只是使用
options.series = [];
以清除它。
options.series = [];
$("#change").click(function(){
}
可以总是加载JSON数据
在这里，我定义图表作为命名空间
$.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将调用再拉法。
