Question

我一直试图弄清楚这段代码的问题是什么，但我似乎无法找到解决方案。所以我希望这个柱形图每秒刷新一次来自chartOne.php的数据，图表会更新，但数据不会显示。

这是chartOne.php代码：

<?php
include_once("connect.php");

$grabOne = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='1'") or die(mysql_error());
while($rows = mysqli_fetch_array($grabOne)){
    $oneCount = $rows['count'];
}
$grabTwo = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='2'") or die(mysql_error());
while($rows = mysqli_fetch_array($grabTwo)){
    $twoCount = $rows['count'];
}
$grabThree = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='3'") or die(mysql_error());
while($rows = mysqli_fetch_array($grabThree)){
    $threeCount = $rows['count'];
}

echo json_encode( array(
  array("id"=>"0","count"=>$oneCount),
  array("id"=>"1","count"=>$twoCount),
  array("id"=>"2","count"=>$threeCount)
));

这是脚本：

window.onload = function () {
    var dps = [
        {label: "Person One", y: 0} ,
        {label: "Person Two", y: 0},
        {label: "Person Three", y: 0},
    ];

    var chart = new CanvasJS.Chart("chartContainer",{
        theme: "theme2",
        title:{ 
            text: "Students' Votes"
                },
            axisY: {                
            title: ""
                },                  
            legend:{
            verticalAlign: "top",
            horizontalAlign: "centre",
            fontSize: 18

        },
        data : [{
            type: "column",
            showInLegend: true,
            legendMarkerType: "none",               
            legendText: " ",
            indexLabel: "{y}",
            dataPoints: dps
        }]
    });
    chart.render();
    var updateInterval = 1000;
    var updateChart = function () {
        $.get("chartOne.php", function(data) {
            $.each(data, function(n, val) {
                chart.options.data[0].dataPoints[n].y = val.count;
            });
        }, "json");
        chart.render();
    };
    setInterval(function(){updateChart()}, updateInterval);
}

MySQL端的数据是这样的：

id | count
1  | 100
2  | 200
3  | 150

从页面加载一秒后，图表变为 this

我已经尝试过document.write（）;它和数据显示良好。有谁能够帮我？提前谢谢。

Answer 1

问题是如何将数据添加到图表中。重要的是这个：

chart.options.data[0].dataPoints[n] = { label: val.id,  y: val.count  };

下面的完整工作示例，不是我打印json数据而不是远程获取它，但如果你换回$ .get它应该可以正常工作：

<!DOCTYPE HTML>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
    <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script type="text/javascript">

        <?php

        $data = json_encode( array(
            array("id"=>"Person One","count"=>20),
            array("id"=>"Person Two","count"=>10),
            array("id"=>"Person Three","count"=>15)
        ));

        echo "var data = {$data}";

?>

        window.onload = function () {
            var dps = [
                {label: "Person One", y: 0} ,
                {label: "Person Two", y: 0},
                {label: "Person Three", y: 0},
            ];

            var chart = new CanvasJS.Chart("chartContainer",{
                theme: "theme2",
                title:{
                    text: "Students' Votes"
                },
                axisY: {
                    title: ""
                },
                legend:{
                    verticalAlign: "top",
                    horizontalAlign: "centre",
                    fontSize: 18

                },
                data : [{
                    type: "column",
                    showInLegend: true,
                    legendMarkerType: "none",
                    legendText: " ",
                    indexLabel: "{y}",
                    dataPoints: dps
                }]
            });
            chart.render();
            var updateInterval = 1000;
            var updateChart = function () {

                    $.each(data, function(n, val) {
                        console.log(n);
                        console.log(val);
                        chart.options.data[0].dataPoints[n] = { label: val.id,  y: val.count  };

                    });

                chart.render();
            };
            setInterval(function(){updateChart()}, updateInterval);
        }
    </script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

Answer 2

好的，感谢@ oneskinnydj的帖子（console.log的想法）。我发现MySQL查询返回了一个字符串而不是CanvasJS需要的整数。所以要做到这一点你需要改变mysqli_fetch_array（）;成：

mysqli_fetch_assoc();

因此php部分的最终结果是：

<?php
include_once("connect.php");

$grabOne = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='1'") or die(mysql_error());
while($rows = mysqli_fetch_assoc($grabOne)){
    $oneCount = intval($rows['count']);
}
$grabTwo = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='2'") or die(mysql_error());
while($rows = mysqli_fetch_assoc($grabTwo)){
    $twoCount = intval($rows['count']);
}
$grabThree = mysqli_query($con, "SELECT * FROM tb_cndts WHERE id='3'") or die(mysql_error());
while($rows = mysqli_fetch_assoc($grabThree)){
    $threeCount = intval($rows['count']);
}

$data = json_encode( array(
                    array("id"=>"Person One","count"=>$oneCount),
                    array("id"=>"Person Two","count"=>$twoCount),
                    array("id"=>"Person Three","count"=>$threeCount)
                ));

echo $data;

javascript部分与之前相同，但更好（感谢@oneskinnydj）更改chart.options.data [0] .dataPoints [n] .y = val.count;进入这个：

chart.options.data[0].dataPoints[n] = { label: val.id,  y: val.count  };

Canvasjs通过json更新柱形图无法正常工作

2 个答案: