如何從javascript中的給定字符串中獲取數據？

Question

我正在使用Laravel 5.6。 我正在嘗試使用CHARTJS創建折線圖。 這是控制器。

 public function index()
{
    $currentMonth = date('m');
    $category = Category::where('isActive', 1)->count();
    $product = Product::where('isActive', 1)->count();
    $suppliers = Supplier::where('isActive', 1)->count();
    $saleorderCount = SaleOrderDetail::count();
    $sale_order_detail = SaleOrderDetail::whereRaw('MONTH(created_at) = ?',[$currentMonth])->get(['sale_order', 'grand_total']);
    $data_points = SaleOrderDetail::select('sale_order', 'grand_total')->whereRaw('MONTH(created_at) = ?',[$currentMonth])->get();
    $data_points = str_replace('sale_order', 'x', $data_points);
    $data_points = str_replace('grand_total', 'y', $data_points);
    $data_points = str_replace(',y:', '",y:', $data_points);
    dd($data_points);
           // dd($sale_order_detail);
    return view('welcome', ['category' => $category, 'product' => $product, 'suppliers' => $suppliers, 'salecount' => $saleorderCount, 'sale_order_detail' => $sale_order_detail, 'data_points' => $data_points]);
}

使用$data_points ，將值傳遞給視圖。 這是腳本

 <script type="text/javascript"> window.onload = function () { var data_point = {!! $data_points !!}; console.log(data_point); var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: data_point, datasets: [{ label: 'Sale of the Month', data: data_point, backgroundColor: [ 'rgba(54, 162, 235, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); } </script> 

這是數據點的控制台輸出。

在這里它如何顯示圖表。

標簽未顯示。

Answer 1

您正在傳遞標簽和數據的對象數組。 您要為標簽傳遞字符串數組，並為數據傳遞數值數組。 將代碼更改為此：

window.onload = function () {
var data_points = {!! $data_points !!};
//create your new arrays here
var data_labels = data_points.map((index) => index.x);
var data_values = data_points.map((index) => parseInt(index.y));

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        //use data_labels array here
        labels: data_labels,
        datasets: [{
            label: 'Sale of the Month',
            //use data_values array here
            data: data_values,
            backgroundColor: [
                'rgba(54, 162, 235, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
}