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

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

route:：get（'json/{notification_id}'，'ChartController@speedHistory'）->name（'speedhistory'）

我有一个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();
    }



});

我没有将控制器中的数据输入app.js类，有人怎么知道？我正在学习js，但在这一点上似乎有点困难。 这是我的图表控制器

<?php

namespace App\Http\Controllers;
use App\Notification;
use App\Status;

use Illuminate\Http\Request;

class ChartController extends Controller
{
    public  function speedHistory($notification_id){

        $o_notification = Notification::find(intval($notification_id));
        $o_status = Status::where('name','speed')->first();

        $o_response = $o_notification->statuses()->where('status_id', $o_status->id)
        ->select('values AS value', 'created_at AS timestamp')->orderBy('created_at','DESC')->get()
        ->transform(function ($item, $key) {
            return collect([
                'values' => $item->pivot->values,
                'created_at' => $item->pivot->created_at->toDateTimeString()
            ]);
        });

        return response()->json($o_response);
    }
}

---

什么是
o_响应在此行
var pageSpeedValues=o_响应我看不到它被设置为任何东西你用一个参数调用这个函数
createChartHistory（pageSpeedLabels）但它是用2个参数定义的。您可以查看浏览器调试器控制台。我希望在编辑
$o_response
是一个PHP变量之后，您会看到很多错误消息。。。。您不能在javascript中引用它。PHP在服务器上运行，javascript在浏览器上运行（在PHP长时间运行之后），我建议您在返回并重构所有这些代码之前，先看看简单的AJAX和JSON教程。所以这不是一个教程网站