Question

我正在使用jqplot绘制四个图表，我想在一个页面上一次显示一个图表，即可以使用按钮选择它们之间切换。我查询了页面加载时所有图表的所有数据。我想存储数据以在隐藏的div中生成3个备用图，然后根据需要将它们交换出来。

例如，我有一个id ='weight_chart'的按钮，我想用它来切换我的图表div中的内容，id ='chartdiv'。所以我在.js中有以下功能：


    $('#weight_chart').click(function(event) {

       $('#chartdiv').html(""); // clears the 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:'Body Mass Index',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}});

取代......


    $.jqplot('chartdiv', graph_data);

...然后它运作正常。

那么如何在事件触发时传递我在页面加载时计算的参数。我不想在这个阶段进行另一个数据库调用。我只想拿一些我已经收集的参数......

即。

[[['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);

                    //alert (dataString);return false;  
                    $.ajax({  
                      type: "POST",  
                      url: "/ajax_handler/graph_data.php",  
                      data: dataString,
                      dataType: 'json',
                      success: function(data) {
                        //alert(data);
                        var results_list = "";
                        $.each(data, function(i,result){

                            results_list = results_list + "['" + result.date + "'," + result.bmi + "],"; 

                        });
                        results_list = results_list.slice(0, -1)
                        $('#chartdiv').html("");

                        $.jqplot('chartdiv',[[ results_list ]],{ title:'My Weight',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}});

                      }  
                    }); 
          });

....................更新2

感谢甜菜根 - 甜菜根 - 我在看到你的更新之前得到了它。我认为你的方式也会奏效，但这是我的解决方案现在正在运作：

根据dee38 here - JSON for jqPlot - 必须在php中创建名称/值对。然后将小数组合成一个大数组。 json_encode并通过ajax返回。然后在ajax成功函数中使用了eval（数据），一切正常。这是最终的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));

Answer 1

如果你的JSON字符串只是在元素的HTML中表示，你可能需要使用jQuery的parseJSON函数：

graph_data = $.parseJSON($('#weight-graph-data').html());

Answer 2

Will Domaine的建议听起来不错，但另一种方法是将三组图表数据存储为javascript vars而不是DOM中的字符串。

例如，

var graphData = [
    [[['2012-03-30',30.80],['2012-03-31',30.59]]],{ title:'Body Mass Index',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}},
    [[['2012-03-30',30.80],['2012-03-31',30.59]]],{ title:'Body Mass Index',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}},
    [[['2012-03-30',30.80],['2012-03-31',30.59]]],{ title:'Body Mass Index',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}},
];

（我使用了相同的数据x3，但你的三个会有所不同）。

然后按如下方式构建按钮：

<button class="weightChart" data-index="0">Weight Chart 1</button>
<button class="weightChart" data-index="1">Weight Chart 2</button>
<button class="weightChart" data-index="2">Weight Chart 3</button>

然后使用：

为按钮设置动画

$('.weightChart').click(function(event) {
    $('#chartdiv').empty();
    $.jqplot('chartdiv', graphData[Number($(this).attr('data-index'))]);
});

编辑....

更详细地查看数据，我看到每个数据集由两个变量而不是一个变量组成。无论你尝试什么，这都可能会让你感到困惑。

我的js方法修订：

var graphData = [
    {
        coords: [[['2012-03-30',30.80],['2012-03-31',30.59]]],
        options: { title:'Body Mass Index',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}}
    },
    {
        coords: [[['2012-03-30',30.80],['2012-03-31',30.59]]],
        options: { title:'Body Mass Index',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}}
    },
    {
        coords: [[['2012-03-30',30.80],['2012-03-31',30.59]]],
        options: { title:'Body Mass Index',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}}
    }
];

（同样，相同的数据x3）

现在使用以下命令设置按钮的动画：

$('.weightChart').click(function(event) {
    $('#chartdiv').empty();
    var data = graphData[Number($(this).attr('data-index'))];
    $.jqplot('chartdiv', data.coords, data.options);
});

如果选项始终相同，那么这将简化如下。

var graphOptions = { title:'Body Mass Index',axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}}};
var graphData = [
    [[['2012-03-30',30.80],['2012-03-31',30.59]]],
    [[['2012-03-30',30.80],['2012-03-31',30.59]]],
    [[['2012-03-30',30.80],['2012-03-31',30.59]]]
];

with：

$('.weightChart').click(function(event) {
    $('#chartdiv').empty();
    var data = graphData[Number($(this).attr('data-index'))];
    $.jqplot('chartdiv', data, graphOptions);
});

无法将参数传递给基于隐藏页面内容的jQuery函数

2 个答案: