CanvasJs dynamic Data with PHP, mySQL

本文关键字：mySQL PHP with dynamic Data CanvasJs | 更新日期: 2023-09-27

屏幕截图

您好，我的图表有障碍来自 CanvasJs。

我只是用简单的代码来获得带有参数目标和实际的简单图表，我在 dataPoint 中发现了错误：我认为问题只是错误的陈述。

这是我的错误代码：

数据点： [

<?PHP $mkmi3= mysql_query("SELECT * FROM monthkpimontindv WHERE idKpiDetIndv='$q'");
    While ($mkmi4= mysql_fetch_assoc($mkmi3)) 
        {
            echo "{ label: ".$mkmi4['period'].", y: ".$mkmi4['actual']." },'n";
        }
?>

以下是我们如何在CanvasJS中显示MySQL数据，尝试这样。

在这里，创建一个以 JSON 格式返回数据的 PHP 服务。向服务器发出 AJAX 请求并获取数据的 HTML 页面。获取数据后，它会呈现一个图表。

用于返回 JSON 数据的 PHP 服务

<?php
header('Content-Type: application/json');
$con = mysqli_connect("127.0.0.1","user","password","canvasjssampledb");
// Check connection
if (mysqli_connect_errno($con))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
    $data_points = array();
    $result = mysqli_query($con, "SELECT * FROM sales");
    while($row = mysqli_fetch_array($result))
    {        
        $point = array("label" => $row['product'] , "y" => $row['total_sales']);
        array_push($data_points, $point);        
    }
    echo json_encode($data_points, JSON_NUMERIC_CHECK);
}
mysqli_close($con);
?>

用于获取数据和呈现图表的 HTML 页面

!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script src="jquery.js"></script>
    <script src="canvasjs.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.getJSON("data.php", function (result) {
                var chart = new CanvasJS.Chart("chartContainer", {
                    data: [
                        {
                            dataPoints: result
                        }
                    ]
                });
                chart.render();
            });
        });
    </script>
</head>
<body>
    <div id="chartContainer" style="width: 800px; height: 380px;"></div>
</body>
</html>

注意：：在 v1.3 及更高版本中支持 IE8-。