我目前在我的页面上有一个Highcharts散点图,其结构如下:
$(function() {
$('#container').highcharts({
/*chart options, etc... this does not change*/
series: [/*there is some default data here*/]
});
});
此图表看起来和工作都很好。此外,我在页面上有几个复选框和一个按钮。按下按钮时,我有一些jQuery,它会查看选中了哪些复选框,并将此信息发送到PHP文件,该文件根据选定的复选框返回新的数据系列。该代码如下所示:
var Obj = {};
$('button').click(function(e) {
var tableIDs = $("#boxes input:checkbox:checked").map(function() {
return $(this).val();
}).get();
var idClicked = e.target.id;
Obj.tables = tableIDs;
$.ajax({
url: 'update.php',
type: 'post',
data: {
"points": JSON.stringify(Obj)
},
success: function(data) {
console.log(data); /*for testing*/
}
});
});
这段代码位于脚本的最后,在我的 highcharts 函数之外。我已经来回彻底测试了 AJAX,一切正常。PHP 的设置方式,AJAX 返回的格式如下:
{name: 'series1', data: [[...,...],[...,...],...]},
{name: 'series2', data: [[...,...],[...,...],...]}
不是一个数组,只是一个很长的字符串,里面有很多数字(为了清楚起见,我把上面的放在两行上)。换句话说,它的格式完全符合我的Highchart的"系列:"选项中的需要。我的 PHP 返回的系列数根据选中的复选框/数量而变化。
因此,这是我的问题:将已显示在 highchart 上的默认数据替换为 AJAX 返回的新数据的最佳方法是什么?或者,默认数据是可选的,如果它使此操作更容易,则可以将其删除。
有很多类似的问题,但我似乎正在采用其他人的解决方案来解决我的问题。我已经查看了一些直接更新解决方案,例如rockStar和LeJared提出的解决方案,但是我没有运气让他们将旧数据更新为新数据或为此插入任何数据。
我特别喜欢 DemoUser 提出的解决方案,基本上将数据作为变量传递给包装的 highcharts 函数。这通常看起来像:
function my_chart(data) {
$('#container').highcharts({
/*chart options, etc... this does not change*/
series: [ /*there is some default data here*/ ]
});
}
但是,当我这样做时,它完全破坏了我的图表,我无法正常工作并通过。
任何建议/意见将不胜感激。
我是这样做
的var chart = $('#container').highcharts();
if (chart) {
chart.series[0].setData([]);
}
这应该会从图表中清除数据。
我刚刚在我的代码中注意到我从头开始为新数据重新创建图表,但我认为没有必要。
获得新数据后,请尝试使用
chart.series[0].setData([data]);