将我的 canvasjs 图表转换为 chart.js 图表

问题描述

我为我的项目制作了一个 canvasjs 图表，但问题是我的试用版将在几天后结束，而且我对 javascript 还很陌生。我看到了一个类似的图表制作工具，叫做 chart.js，它是免费的。有人可以帮我将我的 canvasjs 图表转换为 chart.js 图表吗？谢谢。

<head>
    <script type="text/javascript" src="../javascript/canvasjs.min.js"></script>

    <script type="text/javascript" src="../javascript/jquery.js"></script>

    <script type="text/javascript">
        window.onload = function() {
            var chart = new CanvasJS.Chart("chartContainer",{
                animationEnabled: true,title: {
                    text: "Mesures"
                },axisY: {
                    title: "Temperature (°C) Humidité (%)",suffix: ""
                },legend: {
                    cursor: "pointer",fontSize: 12,itemclick: toggleDataSeries
                },toolTip: {
                    shared: true
                },data: [{
                        type: "spline",dataPoints: [],},{
                        type: "spline",}
                ]
            });

            $.getJSON("Connexion.PHP",function(data) {
                $.each((data),function(key,value) {
                    chart.options.data[0].dataPoints.push({
                        label: value[0],y: parseInt(value[1])
                    });
                    chart.options.data[1].dataPoints.push({
                        label: value[0],y: parseInt(value[2])
                    });
                });
                chart.render();
                updateChart();
            });

            function updateChart() {
                $.getJSON("Connexion.PHP",function(data) {
                    chart.options.data[0].dataPoints = [];
                    chart.options.data[1].dataPoints = [];

                    $.each((data),value) {
                        chart.options.data[0].dataPoints.push({
                            label: value[0],y: parseInt(value[1])
                        });
                        chart.options.data[1].dataPoints.push({
                            label: value[0],y: parseInt(value[2])
                        });
                    });
                    chart.render();
                });
            };

            function toggleDataSeries(e) {
                if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
                chart.render();
            };

            setInterval(function() {
                updateChart()
            },1000);
        }
    </script>
</head>

<body>
    <div id="chartContainer" style="height: 360px; width: 100%;"></div>
</body>

</html>

这是我的 Connexion.PHP :

<?PHP

$host = 'localhost';
$bd = 'Fablab';
$login = 'root';
$password = '';

$conn = new MysqLi($host,$login,$password,$bd);
if ($conn->connect_error) {
    die("Connection Failed: " . $conn->connect_error);
}

$sql = "SELECT Date,Temperature,Humidite FROM Mesures";

$result = $conn->query($sql);


if ($result->num_rows > 0) {
    // output data of each row
    $obj = array();
    while($row = $result->fetch_assoc()) {
        $element = array($row["Date"],$row["Temperature"],$row["Humidite"]);
        array_push($obj,$element);
    }
    echo json_encode($obj);
} else {
    echo "0 results";
}
$conn->close();
?>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

canvas charts javascript