Блог

Главная - Вопросы по программированию - Извлекать данные из базы данных, сохранять их в массиве, для построения диаграмм в vuejs

Извлекать данные из базы данных, сохранять их в массиве, для построения диаграмм в vuejs

#vue.js #vue-chartjs

#vue.js #vue-chartjs

Вопрос:

Я пытаюсь построить график в 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>

Кто-нибудь может сказать, что я здесь делаю не так?

Комментарии:

1. Vue — это фреймворк, используемый в основном для создания пользовательских интерфейсов. Пожалуйста, используйте язык программирования, такой как PHP (laravel), Python (django) или даже Javascript (aurelia), чтобы облегчить извлечение данных из базы данных. Было бы лучше использовать подход API для ваших проектов. В скобках у меня указаны фреймворки, связанные с соответствующими языками, которые помогут вам.

2. Короче говоря: вам понадобится серверное приложение с rest API и протоколом связи с базой данных. На стороне клиента вы вызываете этот API по определенному маршруту, например, localhost: 4000 / getChartData с axios помощью, например, и отправляете полученные данные в массив диаграмм.

3. Это то, что я пытаюсь выяснить. Я пробовал использовать PHP, но я не могу точно понять, какой код использовать для хранения значений в массиве. Пример будет высоко оценен.

4. Если у вас есть базовое понимание PHP , то было бы лучше использовать Laravel . Сделайте новую установку, подключите ее к своей базе данных и следуйте хорошему руководству по использованию REST API и Vue

5. Я извлек данные из базы данных с помощью PHP, затем использовал axios для объединения данных ответа в массив, уже находящийся в vue. Но выхода нет. Журнал консоли выдал следующую ошибку: Uncaught SyntaxError: Неожиданный токен :