javascript - 如何使用图表 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));
}
我想将产品显示为标签,将 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>
解决方案
这就是您可以对数据库进行基本迭代并初始化标签和数据数组的方法
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 对象的迭代。我不知道你是什么以及如何使用它。
推荐阅读
- r - 当数据是分类时如何编写 Jags 代码?
- javascript - 复制带时间戳的文件、重命名并即时更改内容
- javascript - 使用 jQuery 粘贴内容后在 CKEditor 中失去焦点
- django - 如果我想正确加载模板,是否需要创建模板?
- javascript - 查找方法上的嵌套 AND 和 OR 条件(不是 queryBuilder)
- go - 如何处理关闭同一频道的多个 go-routines?
- c# - 通过代码创建 chsarp 文档字符串
- java - 生产者不能将消息分发给多个消费者?
- python - Pandas 无法识别文档中的列
- amazon-dynamodb - 在 Javascript 中使用分区键和二级索引查询 DynamoDB