Как получить данные из данной строки в 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
                }
            }]
        }
    }
});
}