我正在使用 jqplot 绘制四个图表，我想在页面上一次显示一个图表，即可以使用按钮在它们之间进行切换。我已经查询了页面加载时所有图表的所有数据。我想存储数据以在隐藏的 div 中生成 3 个备用图表，然后根据需要将它们换出。
例如，我有一个 id='weight_chart' 的按钮，我想用它来切换 id='chartdiv' 的图表 div 中的内容。所以我的 .js 中有以下函数：
$('#weight_chart').click(函数(事件) {
$('#chartdiv').html(""); // 清除 div
graph_data = $('#weight-graph-data').html();
$.jqplot('chartdiv', graph_data);
});
参数都以 html 的形式存储在一个隐藏的 div id='weight-graph-data' 中。
现在我有点明白为什么它不起作用了。尝试使用字符串变量替换我的参数是问题所在。如果我只是用硬代码替换实际参数......
$.jqplot('chartdiv', [[['2012-03-30',30.80],['2012-03-31',30.59]]],{ title:'身体质量指数',axes:{xaxis: {renderer:$.jqplot.DateAxisRenderer}}}）；
代替...
$.jqplot('chartdiv', graph_data);
...然后它工作正常。
那么，当事件触发时，我如何传递稍后在页面加载时计算的参数。我不想在这个阶段进行另一个数据库调用。我只想获取我已经收集的部分参数......
IE
[[['2012-03-30',30.80],['2012-03-31',30.59]]],{ title:'Body Mass Index',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}}
...然后将其传递给函数。
我是客户端的新手，所以请耐心等待。在此先感谢您的帮助。
.................. 更新
根据最初的反馈，我尝试使用 JSON 并将参数放入 javascript 变量中，但由于变量作为一个整体包括分隔符等，它似乎不起作用。
所以我尝试了一种完全不同的方法，目的是通过 ajax 动态地重新查询数据库。我现在正确地生成了值对（第二个 jqPlot 参数），并且我只是尝试插入该部分，同时对其余部分进行硬编码。但它仍然行不通。请看下面的代码。我已经测试了“results_list”的值，它很好。如果我只是在函数调用中替换该位置的值，那么它可以正常工作并生成图形，但编码如图所示图形是空白的。当然，必须有一种方法来处理这种事情。再次感谢。
$('.btn-graph').click(function(event) {
var member_id = $('#member_id').val();
var dataString = 'graph_type=' + this.id + '&member_id=' + member_id;
//警报（数据字符串）；
//alert (dataString);return false;
$.ajax({
类型：“发布”，
url: "/ajax_handler/graph_data.php",
数据：数据字符串，
数据类型：'json'，
成功：函数（数据）{
//警报（数据）；
var results_list = "";
$.each（数据，函数（i，结果）{
results_list = results_list + "['" + result.date + "'," + result.bmi + "],";
});
results_list = results_list.slice(0, -1)
$('#chartdiv').html("");
$.jqplot('chartdiv',[[ results_list ]],{ title:'我的体重',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}});
}
});
});
.....................更新 2
谢谢 beetroot-beetroot - 我在看到你的更新之前就知道了。我认为您的方式也可以，但这是我现在可以使用的解决方案：
根据这里的 dee38 - jqPlot 的 JSON - 必须在 php 中创建名称/值对。然后将小数组组合成一个大数组。json_encode 并通过 ajax 返回。然后在 ajax 成功函数中使用 eval(data) ，一切正常。这是最终的jquery函数：
$('.btn-graph').click(function(event) {
var member_id = $('#member_id').val();
var dataString = 'graph_type=' + this.id + '&member_id=' + member_id;
//alert(dataString);
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/ajax_handler/graph_data.php",
data: dataString,
success: function(data) {
$('#chartdiv').html("");
$.jqplot('chartdiv',eval(data),{ title:'BMI',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}});
}
});
});
我在后端的 php 是......
$sql = mysql_query("SELECT * FROM stats WHERE id = '".$mid."'");
//Create an array with the results
$pairs=array();
while($v = mysql_fetch_object($sql)){
$pairs[$v->date] = (float) $v->bmi;
}
$result = array();
foreach ($pairs as $label => $value) {
$result[] = array($label,$value); // make a "small" array for each pair
}
echo json_encode(array($result));