通过 json 更新的 Canvasjs 柱形图不起作用

Canvasjs column chart updating through json not working

本文关键字：柱形图 不起作用 Canvasjs json 更新 通过      更新时间：2023-09-26

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

这是图表一.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

从页面加载一秒钟后，图表变成这

我试过document.write（）;它和数据显示得很好。有人可以帮助我吗？提前谢谢。

问题在于如何将数据添加到图表中。重要的一行是这样的：

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>
好的

，感谢@oneskinnydj的帖子（控制台.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  };
相关文章：