如何解决Laravel：在打开模式窗口时使用chart.js 条形图显示相同的数据
我想在放置在数据表 UI 元素中的模态窗口中显示 chart.js 条形图。
<div>
<canvas class="Chart" width="550" height="330">
</canvas>
</div>
[点击表格UI截图链接]
图片链接：https://ibb.co/s5Bk1R2 要么 https://i.stack.imgur.com/Byw3X.png
我尝试使用 document.getElementsByClassName("Chart"); 按类访问所有模式的画布元素；在 JavaScript 中。下面是我的javascript代码
<script>
$(document).ready(function() {
var ctx = document.getElementsByClassName("Chart");
var i;
for (i = 0; i < ctx.length; i++) {
var myChart = new Chart(ctx[i],{
type: 'bar',data: {
labels: ["0-30 Days","31-60 Days","61-90 Days","91-120 Days","121-180 Days","> 180 Days"],datasets: [{
label: 'Ageing',data: [{{$bal['UPTO30_DAYS']}},{{$bal['UPTO60_DAYS']}},{{$bal['UPTO90_DAYS']}},{{$bal['UPTO120_DAYS']}},{{$bal['UPTO180_DAYS']}},{{$bal['ABOVE180_DAYS']}}],backgroundColor: [
'rgba(255,99,132,0.2)','rgba(54,162,235,'rgba(255,206,86,'rgba(75,192,'rgba(153,102,255,159,64,0.2)'
],borderColor: [
'rgba(255,1)',1)'
],borderWidth: 1
}]
},options: {
responsive: false,scales: {
xAxes: [{
ticks: {
maxRotation: 0,minRotation: 0
}
}],yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
});
</script>`enter code here`
代码以所有模式显示图形，但为每个图形提供相同的数据点值（在条形图中）（即使从数据表传递的数据不同）。 [注意：所有图表中显示的数据与数据表中行的最后一个值相同]。所以我怀疑每个图表元素的数据会在使用上次调用中传递的数据调用 Chart.js 类后立即被覆盖。
[点击链接到带有图表的模态弹出窗口的屏幕截图]
图片链接：https://ibb.co/61R2Kk7 要么 https://i.stack.imgur.com/8UGVi.png
我在我的页面中使用以下 json 数据
{
"TYPE_CODE": "FAR","EMP_NAME": "ABHAY SINGH","TYPE": "Farmer","CUSTOMER_ID": "1","RELATIONSHIP": "1","CUSTOMER_NAME": "Ram Singh","CUSTOMER_CITY": "etah","CUSTOMER_MOB": "9876543210","CUSTOMER_BANK_ACC_NO": "1234543219","CUSTOMER_STATUS": "0","CUSTOMER_BAL": [
{
"CUSTOMER_ID": "1","TYPE_CODE": "FAR","CLOSING_BALANCE": "1000.00","opening_BALANCE": "500.00","opening_BALANCE_TIME": "2020-12-01 13:19:47","IMM_DUES": "100.00","TOTAL_OUTSTANDING": "4000.00","ADVANCE": "5000.00","UPTO30_DAYS": "166.00","UPTO60_DAYS": "356.00","UPTO90_DAYS": "654.00","UPTO120_DAYS": "754.00","UPTO180_DAYS": "876.00","ABOVE180_DAYS": "987.00","TOTAL_CREDIT_LIMIT": "6789.00","REMAINING_CREDIT_LIMIT": "4567.00","UPDATED_AT": "2020-12-18 13:19:47"
}
]
}
以下是modal的完整代码
<a class='btn btn-success' href='#' data-toggle='modal' data-target="#view1_{{$value['CUSTOMER_ID']}}_{{$value['TYPE_CODE']}}" title="View details of customer">
<i class='fas fa-eye'></i>
</a>
<div class="modal fade text-left" id="view1_{{$value['CUSTOMER_ID']}}_{{$value['TYPE_CODE']}}">
<div class="modal-dialog modal-xl">
<div class="modal-content" style="width: 1240px; height:100px;">
<div class="card card-success">
<div class="card-header">
<h3 class="card-title">Details of Customer</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- /.card-header -->
<!-- form start -->
<div class="card-body">
@foreach ($value['CUSTOMER_BAL'] as $bal)
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header bg-light">
Financial KPI
</div>
<!-- /.card-header -->
<div class="card-body">
<table class="table table-bordered">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>KPI Name</th>
<th class="text-center">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>opening Balance</td>
<td class="text-success text-center">
{{$bal['opening_BALANCE']}}
</td>
</tr>
<tr>
<td>2.</td>
<td>Closing Balance</td>
<td class="text-info text-center">
{{$bal['CLOSING_BALANCE']}}
</td>
</tr>
<tr>
<td>3.</td>
<td>Imm. Dues</td>
<td class="text-warning text-center">
{{$bal['IMM_DUES']}}
</td>
</tr>
<tr>
<td>4.</td>
<td>Advance</td>
<td class="text-danger text-center">
{{$bal['ADVANCE']}}
</td>
</tr>
<tr>
<td>5.</td>
<td>Total Credit Limit</td>
<td class="text-muted text-center">
{{$bal['TOTAL_CREDIT_LIMIT']}}
</td>
</tr>
<tr>
<td>6.</td>
<td>Remaining Credit Limit</td>
<td class="text-maroon text-center">
{{$bal['REMAINING_CREDIT_LIMIT']}}
</td>
</tr>
<tr>
<td>7.</td>
<td>Total Outstanding</td>
<td class="text-purple text-center">
{{$bal['TOTAL_OUTSTANDING']}}
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
</div>
</div>
<div class="card">
<div class="card-header bg-light">
Ageing
</div>
<div class="card-body">
<div>
<canvas class="Chart" width="550" height="330">
</canvas>
</div>
</div>
<!-- /.card-body -->
</div>
</div>
@endforeach
</div>
</div>
</div>
<!-- /.modal-content -->enter code here
</div>
<!-- /.modal-dialog -->
</div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。