[英]How can i display my data in a chart using chart js
请帮助我,我不知道如何在图表栏中显示我的数据,我正在使用 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));
}
我想将产品显示为标签,将斯托克显示为数据,这是购物车栏
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>
这是您可以对数据库进行基本迭代并初始化标签和数据数组的方法
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 对象的迭代。 我不知道你是什么以及如何使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.