如何使用图表 js 在图表中显示我的数据

Question

请帮助我，我不知道如何在图表栏中显示我的数据，我正在使用 ChartJs

这是我的销售表

id  | product     | stock | 
1   | brown cloth | 50    |
2   | jeans neavy | 35    |

这是我的控制器

public function chart2()
{
   $sell= DB::table('sell')->get();
       return view('myblade')>with('sell',json_encode($sell,JSON_NUMERIC_CHECK));
}

我想将产品显示为标签，将 stok 显示为数据，这是购物车栏

var db == {{ url('chart2') }}; // your db object
          var your_labels  = new Array();
          var your_data = new Array();  //array that will hold your data

          db.forEach((item, index, arr) => {
            your_labels.push(item.product);
            your_data.push(item.stock);
          })

          var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: your_labels, 
                datasets: [{
                    label: '# of stocks',
                    data: your_data, 
                    backgroundColor: "rgba(220,220,220,0.5)",  //create them the same way. with same size 1 for each data entry
                    borderColor: color_border_array,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });

这是画布

<div class="panel panel-default">
    <div class="panel-heading text-center"><b>Data Penjualan</b></div>
      <div class="panel-body">
        <canvas id="canvas" height="280" width="400"></canvas>
    </div>
</div>

Answer 1

这是您可以对您的数据库进行基本迭代并初始化标签和数据数组的方法

var db; // your db object
var your_labels, your_data;  //array that will hold your data

db.forEach((item, index, arr) => {
  your_labels.push(item.product);
  your_data.push(item.stock);
})

像这样在初始化时将它们传递到图表中。

var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: your_labels, 
                datasets: [{
                    label: '# of stocks',
                    data: your_data, 
                    backgroundColor: color_background_array,  //create them the same way. with same size 1 for each data entry
                    borderColor: color_border_array,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });

要记住的重要一点是您必须自己查看 db 对象的迭代。我不知道你是怎么用它的。