Question

在这段代码中，我能够以JSON格式从数据库中获取数据。现在iam努力在JS中绘制一个图表，其中列作为值和行作为时间戳。我有一个控制器（chartController）进入数据库并提取所需的数据并将其更改为JSON格式，即值和时间戳。然后我为这个控制器int

创建了一条路线

我有如下js课程，

Route::get('json/{notification_id}','ChartController@speedHistory')->name('speedhistory')

我没有从控制器获取数据到app.js类，任何人如何得到这个想法？我学习js但在这一点上看起来有点困难。这是我的图表控制器

document.addEventListener('DOMContentLoaded', function() {

    $.getJSON("json", function getdata(data) {
        console.log(data);
        var pageSpeedValues = o_response;
        createChartHistory(pageSpeedLabels);
    });

    function fetchValues(Labels, Values) {

        var pageSpeedLabels = Values;
        var pageSpeedValues = Labels;

        createChartHistory(pageSpeedLabels);
    }


    // This function allows us to create a chart for the history page
    function createChartHistory(pageSpeedLabels, pageSpeedValues) {
        var ctx = document.getElementById("pageSpeedHistoryChart");
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: pageSpeedLabels,
                datasets: [{
                    label: 'PageSpeed History',
                    data: pageSpeedValues,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.5)',
                        'rgba(54, 162, 235, 0.5)',
                        'rgba(255, 206, 86, 0.5)',
                        'rgba(75, 192, 192, 0.5)',
                        'rgba(153, 102, 255, 0.5)',
                        'rgba(255, 159, 64, 0.5)',
                        'rgba(255, 99, 132, 0.5)',
                        'rgba(54, 162, 235, 0.5)',
                        'rgba(32, 206, 86, 0.5)',
                        'rgba(77, 192, 192, 0.5)',
                        'rgba(153, 102, 255, 0.5)',
                        'rgba(255, 159, 64, 0.5)'
                    ]
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true,
                            max: 100,
                            min: 0
                        }
                    }]
                }
            }
        });
    }



    if(document.querySelector('#pageSpeedHistoryChart')) {
        getdata();
    }



});

如何从js中的json数据绘制图表

0 个答案: