Javascript Canvasjs柱形图通过json更新无效_Javascript_Php_Jquery_Json_Canvasjs

Javascript Canvasjs柱形图通过json更新无效

javascript php jquery json

Javascript Canvasjs柱形图通过json更新无效,javascript,php,jquery,json,canvasjs,Javascript,Php,Jquery,Json,Canvasjs,我一直在试图找出这段代码的问题所在，但似乎还没有找到解决方案。所以我想让这个柱状图每秒刷新一次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_f

我一直在试图找出这段代码的问题所在，但似乎还没有找到解决方案。所以我想让这个柱状图每秒刷新一次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)
));

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>


window.onload=函数（）{
var dps=[
{标签：“第一个人”，y:0}，
{标签：“第二个人”，y:0}，
{标签：“第三个人”，y:0}，
];
var chart=new CanvasJS.chart（“chartContainer”{
主题：“主题2”，
标题：{
正文：“学生投票”
},
axisY：{
标题：“
},
图例：{
垂直排列：“顶部”，
水平对齐：“中心”，
尺寸：18
},
数据：[{
键入：“列”，
showInLegend：是的，
legendMarkerType：“无”，
传奇文本：“，
索引标签：“{y}”，
数据点：dps
}]
});
chart.render（）；
var updateInterval=1000；
var updateChart=函数（）{
$.each（数据、函数（n、val）{
控制台日志（n）；
控制台日志（val）；
chart.options.data[0].dataPoints[n]={label:val.id，y:val.count}；
});
chart.render（）；
};
setInterval（函数（）{updateChart（）}，updateInterval）；
}

好的，多亏@oneskinnydj的帖子（console.log idea）。我发现MySQL查询返回的是字符串，而不是CanvasJS需要的整数。为此，您需要更改mysqli_fetch_数组（）；进入：

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;

这个问题仍然存在。我相信问题出在php查询中。因为我需要它来查询，所以我将count更改为一个变量。现在，当变量为时，数据显示的结果是整数，但是如果我将变量更改为查询结果，数据将不会显示（与以前相同）。控制台日志显示查询中的变量是字符串而不是整数。很高兴听到这个消息，您能对我的答案进行投票吗，因为它对您有一些用处？

mysqli_fetch_assoc();

<?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;

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