Question

我正在尝试在 vue-chartjs 中绘制图形。

我想从我的 MySQL 数据库中获取所需的值，并将其存储到数组中。然后使用它们绘制图表。但是我不太清楚如何从数据库中获取这些记录的逻辑。

这是我尝试的代码

<?php
$servername = "172.18.2.2";
$username = "cs161050";
$password = "aman";
$dbname = "0187cs161050";

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

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

$sql = "SELECT progress FROM wf_progress";
$result = $conn->query($sql);

if ($result->num_rows) {
    // output data of each row
    while($row = $result->fetch_assoc()) {
        return $row;
    }
}
$conn->close();
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Circle Gauge Chart - Multiple</title>

    <style>
        #chart {
            max-width: 650px;
            margin: 35px auto;
        }
    </style>
</head>

<body>
    <div id="chart">

    </div>


    <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        var options = {
            chart: {
                height: 250,
                type: 'radialBar',
            },
            plotOptions: {
                radialBar: {
                    dataLabels: {
                        name: {
                            fontSize: '22px',
                        },
                        value: {
                            fontSize: '16px',
                        },
                        total: {
                            show: true,
                            label: 'Total',
                            formatter: function (w) {
                                return 249
                            }
                        }
                    }
                }
            },
            series: []

        },

        methods: {
            concatArray: function() {

                axios.get('script.php')
                .then(function (response) {
                    this.series = this.series.concat(response.data);
                })
                .catch(function(error) {
                    console.log(error);
                })
            }
        }



        var chart = new ApexCharts(
            document.querySelector("#chart"),
            options
            );

        chart.render();
    </script>
</body>
</html>

有人可以告诉我我在做什么错吗？

从数据库中获取数据，将其存储在数组中，以在vuejs中绘制图表

0 个答案: