时间戳

首页 > 解决方案 > 将我的 canvasjs 图表转换为 chart.js 图表

javascript - 将我的 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",
                        dataPoints: [],
                    }
                ]
            });

            $.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), 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();
                });
            };

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

标签： javascriptcanvaschartschart.jscanvasjs

解决方案

推荐阅读