javascript - 在javascript中将数据从控制器插入数组
问题描述
我尝试使用 Chart.js 创建图表并从数据库中获取数据,但我很困惑如何将数据传递给视图中的数组变量。
这是控制器
public function ApiLaporanBulanan()
{
$data = DB::table("transaksipenjualan")->select(DB::raw('EXTRACT(MONTH FROM tanggaltransaksi) AS Bulan, SUM(total) as Pendapatan'))
->groupBy(DB::raw('EXTRACT(MONTH FROM tanggaltransaksi)'))
->get();
return response()->json($data);
//Accessing Data
dd($data[0]->Bulan);
}
这是视图中的脚本
<script>
var url = "{{url('laporan/pendapatanAPI')}}";
var Bulan = [];
var Pendapatan = [];
$(document).ready(function(){
$.get(url, function(response){
response.forEach(function(data){
Bulan.push(data->Bulan);
Pendapatan.push(data->Pendapatan);
});
var ctx = document.getElementById("canvas").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: Bulan,
datasets: [{
label: 'Nilai Pendapatan',
data: Pendapatan,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
});
});
</script>
解决方案
您可以在控制器中创建两个数组。
$label = [];
$dataset = [];
并遍历您的集合并将数据推送到这些数组
foreach($data as $value){
$label[] = $value->data_field;
$dataset[] = $value->data_field;
}
并将其传递给您的刀片并将这些数组分配给您的图表
...
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: Bulan,
datasets: [{
label: 'Nilai Pendapatan',// label data
data: Pendapatan, // dataset
borderWidth: 1
}]
},
....
推荐阅读
- flutter - 如何从资产上传图片?
- android - 我可以通过应用内购买交易 ID 识别用户吗?
- php - Laravel 查询中的空数据
- regex - 如果管道输出中的任何行以带有 Where-Object 的 powershell 中的某个字符开头,则匹配
- python - 如何在streamlit中添加提交按钮(按钮内的按钮似乎重置了整个应用程序。为什么?)
- javascript - 某些浏览器上的 Recaptcha 超时
- django - 一对多通用列表视图 Django
- c# - Xamarin 形成 ViewModels 继承
- android - 如何在数组中上传多个图像 URL 字符串
- parsing - 有没有办法在前端编写没有抽象语法树的编译器?