时间戳

首页 > 解决方案 > 条形图无法读取laravel中的数据和标签

javascript - 条形图无法读取laravel中的数据和标签

问题描述

我是使用 Chart.js 的初学者，我遇到了标签和数据问题。我的图表没有显示。这是我的代码。我正在使用 laravel 框架。和 sqlite 数据库。

这是我的代码

var labelGrafik = [];
        for(var i=0; i<totunsur; i++){
            var arr1 = [];
            var ket = $('#unsur-'+i).val();
            arr1.push(ket);
            labelGrafik.push(arr1);
        }

        var dataGrafik = [];
        for(var i=0; i<totunsur; i++){
            var arr2 = [];
            var value = $('#mean-'+i).val();
            arr2.push(value);
            dataGrafik.push(arr2);
        }

        var barchart = document.getElementById('flot-bar2-chart-ikm');
        var chart = new Chart(barchart, {
        type: 'bar',
        data: {
            labels: labelGrafik,
            datasets: [{
            label: 'Data Penjualan',
            data: dataGrafik,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(255, 99, 132, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)',
                'rgba(255,99,132,1)'
            ],
            borderWidth: 2
            }]
        }
        });

有人可以帮忙吗？

标签： javascriptlaravelchart.js

解决方案

我可以看到，就您对 arr1 和 arr2 数组的使用而言，您的 for 循环看起来格式不正确。这是对您的代码的编辑

var labelGrafik = [];
for(var i=0; i<totunsur; i++){
    var ket = $('#unsur-'+i).val();
    labelGrafik.push(ket);
}

var dataGrafik = [];
for(var i=0; i<totunsur; i++){
    var value = $('#mean-'+i).val();
    dataGrafik.push(value);
}

var barchart = document.getElementById('flot-bar2-chart-ikm');
var chart = new Chart(barchart, {
type: 'bar',
data: {
    labels: labelGrafik,
    datasets: [{
    label: 'Data Penjualan',
    data: dataGrafik,
    backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 99, 132, 0.2)'
    ],
    borderColor: [
        'rgba(255,99,132,1)',
        'rgba(255,99,132,1)',
        'rgba(255,99,132,1)',
        'rgba(255,99,132,1)',
        'rgba(255,99,132,1)',
        'rgba(255,99,132,1)',
        'rgba(255,99,132,1)',
        'rgba(255,99,132,1)'
    ],
    borderWidth: 2
    }]
}
});

推荐阅读