将散点图和线型与chart.js合并

ecbunoof  于 2023-03-02  发布在  Chart.js
关注(0)|答案(1)|浏览(156)

我必须显示一个图表,该图表表示从数据库中提取的点和一条预设的直线。我必须查看这些点相对于这条直线的位置
我开始写程序,以创建2个图表的作品,但我不能显示他们在一起,我知道这是因为散点图使用线性轴的X轴默认和折线图使用类别轴,这些是不兼容的,但我不能使用第二个X轴。

<!DOCTYPE html>
<html>
<head>
    <title>Line and Scatter Charts</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div style="width: 50%;">
        <canvas id="lineChart"></canvas>
    </div>
    <div style="width: 50%;">
        <canvas id="scatterChart"></canvas>
    </div>

    <script>
        // Define the data for the line chart
        var lineData = {
            labels: ['Point 1', 'Point 2'],
            datasets: [{
                label: 'Line Chart',
                data: [
                    {x: 0, y: 0},
                    {x: 5, y: 10}
                ],
                fill: false,
                borderColor: 'rgb(75, 192, 192)',
                lineTension: 0.1
            }]
        };

        // Define the options for the line chart
        var lineOptions = {
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom'
                }]
            }
        };

        // Create a new line chart
        var lineChart = new Chart(document.getElementById('lineChart'), {
            type: 'line',
            data: lineData,
            options: lineOptions
        });

        // Retrieve data from SQL database
        var sqlData = <?php
            $servername = "???";
            $username = "???";
            $password = "???";
            $dbname = "???";

            // Create connection
            $conn = new mysqli($servername, $username, $password, $dbname);

            // Check connection
            if ($conn->connect_error) {
                die("Connection failed: " . $conn->connect_error);
            }

            // Retrieve data from database
            $sql = "SELECT x,y FROM test";
            $result = $conn->query($sql);

            // Create array of data for scatter chart
            $dispersioneData = array();
            if ($result->num_rows > 0) {
                while($row = $result->fetch_assoc()) {
                    $dispersioneData[] = array(
                        'x' => $row["x"],
                        'y' => $row["y"]
                    );
                }
            }

            echo json_encode($dispersioneData);

            // Close connection
            $conn->close();
        ?>;

        // Define the data for the scatter chart
        var scatterData = {
            datasets: [{
                label: 'Scatter Chart',
                data: sqlData,
                backgroundColor: 'rgba(75, 192, 192, 0.5)'
            }]
        };

        // Define the options for the scatter chart
        var scatterOptions = {
            scales: {
                xAxes: [{
                    type: 'linear',
                    position: 'bottom'
                }]
            }
        };

        // Create a new scatter chart
        var scatterChart = new Chart(document.getElementById('scatterChart'), {
            type: 'scatter',
            data: scatterData,
            options: scatterOptions
        });
    </script>
</body>
</html>
41ik7eoe

41ik7eoe1#

您可以创建一个mixed chart,这很自然,唯一不同的是为每个数据集单独设置type(图表本身不设置类型);你的线数据与散点数据兼容,因为它已经有了xy。在下面的代码片段中,我用随机散点数据替换了你的sql代码,x在区间[0,6],y在区间[0,10]。

var lineData = {
    labels: ['Point 1', 'Point 2'],
    datasets: [{
        type: 'line',
        label: 'Line Chart',
        data: [
            {x: 0, y: 0},
            {x: 5, y: 10}
        ],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        lineTension: 0.1
    }]
};

var sqlData = Array.from({length: 100}, ()=>({x: 6*Math.random(), y: 10*Math.random()}));

// Define the data for the scatter chart
var scatterData = {
    datasets: [{
        label: 'Scatter Chart',
        type: 'scatter',
        data: sqlData,
        backgroundColor: 'rgba(75, 192, 192, 0.5)'
    }]
};

var chartOptions = {
    scales: {
        x: {
            type: 'linear',
            position: 'bottom'
        }
    }
};

/*var mixedChart = */new Chart(document.getElementById('mixedChart'), {
    data: {datasets: scatterData.datasets.concat(lineData.datasets)},
    options: chartOptions
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"
        integrity="sha512-t41WshQCxr9T3SWH3DBZoDnAT9gfVLtQS+NKO60fdAwScoB37rXtdxT/oKe986G0BFnP4mtGzXxuYpHrMoMJLA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div style="height:300px; width:500px">
<canvas id="mixedChart"></canvas>
</div>

相关问题