Question

我正在尝试用PHP中的MySQL查询数据填充Flot图表。我确定这是一个糟糕的方式来处理事情（没有Ajax或JSON，我也不熟悉），但我将其数据点的Flot需要的格式输出到隐藏的div中我的PHP页面，如下：

function get_team_chart($arr) {
    $data1 = array();
    $data2 = array();
    foreach ($arr as $a) {
        $data1[] = '[' . $a['week'] . ',' . $a['pts'] . ']';
        $data2[] = '[' . $a['week'] . ',' . $a['league_avg'] . ']';
    }
    $str1 = implode(', ', $data1);
    $str2 = implode(', ', $data2);
    echo "  <div id='series1' style='display:none;'>" . $str1 . "</div>
            <div id='series2' style='display:none;'>" . $str2 . "</div>";           
}

然后我尝试在JavaScript中将数据提取到我的图表中，如下所示：

function plot_team_chart() {
    var series1 = $('#series1').html();
    var series2 = $('#series2').html();
    $.plot( $("#team-chart"),
            [   series1,
                series2],
            {   xaxis: {min:0,
                        max:13},
                yaxis: {max:150,
                        min:0}}
    );

}

这不会在运行时抛出任何JS错误，并且图表会显示指定的分钟和最大值，但不会绘制数据。我检查了series1和series2的值，它们都没有数字值引号（即它们类似于[1,120.3], [2,89.0]，而不是["1","120.3"], ["2","89.0"]）。

这是我第一次涉足Flot的世界，所以请保持温柔。此外，我验证了图表与硬编码值的关系很好。

谢谢。

Answer 1

搞定了。随意回答如何使用Ajax和/或JSON完成此功能，但这里是我如何完成在隐藏div中提取数据以绘制Flot：

function plot_team_chart() {
    var tmp1 = new Array();
    var tmp2 = new Array();
    var tmp3 = new Array();
    var data = new Array();
    $('.to-plot').each(function() {
        tmp1 = $(this).html().split('|');
        for (var i=0; i<tmp1.length; i++) {
            tmp2 = tmp1[i].split(',');
            tmp3.push(tmp2);
        }
        data.push({ label: $(this).attr('data_label'),
                    data: tmp3});
        tmp3 = [];
    });

    var options = { xaxis: {    min:1,
                                max:13},
                    yaxis: {    max:120,
                                min:30},
                    grid: {     borderColor:'#ccc'},
                    legend: {   show:true,
                                position:'se'}};

    if (data.length > 0) {
        $.plot( $("#team-chart"),
                data,
                options
        );
    }
}

修改后的PHP以适应变化：

function get_team_chart($arr) {
    $data1 = array();
    $data2 = array();
    foreach ($arr as $a) {
        $data1[] = $a["week"] . "," . $a["pts"];
        $data2[] = $a["week"] . "," . $a["league_avg"];
    }
    $str1 = implode('|', $data1);
    $str2 = implode('|', $data2);
    echo "  <div id='series1' data_label='avg score' style='display:none;'>" . $str1 . "</div>
            <div id='series2' data_label='league avg' style='display:none;'>" . $str2 . "</div>";           
}

Answer 2

如果您只想引用这些变量，为什么不这样做：

$data1[] = '["' . $a['week'] . '","' . $a['pts'] . '"]';
$data2[] = '["' . $a['week'] . '","' . $a['league_avg'] . '"]';

这将通过懒人的方式引用你的输出。

使用div中的文本填充Flot图表

2 个答案: