我有一个单轴折线图。用户可以从下拉列表中选择
yearloan_typeannual_paymentscheduled_payment仪表板.vue
<div class="card-header bg-white p-2">
<div class="row justify-content-md-between">
<div class="col-12 col-md-7 d-md-flex justify-content-md-end">
<div class="input-group custom-select2">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Loan Type:</span>
</div>
<select2
id="selected_loan_type_annual_payment"
name="selected_loan_type_annual_payment"
class="form-control"
v-model="is_inputs.annual_payment.loan_type"
@input="selectLoanType($event)"
>
<option
v-for="(item, index) in types"
:key="item.id"
:selected="item.id==is_inputs.annual_payment.loan_type"
:value="item.id">{{ item.text }}
</option>
</select2>
</div>
</div>
<div class="col-12 col-md-4 d-md-flex justify-content-md-end">
<div class="input-group custom-select2">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Year:</span>
</div>
<select2
id="selected_year_annual_payment"
name="selected_year_annual_payment"
class="form-control"
v-model="is_inputs.annual_payment.year"
@input="selectPaymentYear($event)"
>
<option
v-for="(item, index) in years"
:key="item.id"
:selected="item.id==is_inputs.annual_payment.year"
:value="item.id">{{ item.text }}
</option>
</select2>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row justify-content-center">
<div
class="col-md-12"
v-bind:class="{
'load_chart': !is_loaded.annual_payment,
'': is_loaded.annual_payment
}"
>
<line-chart
v-if="is_loaded.annual_payment"
:width="100" :height="60"
:chartdata="chart_data.annual_payment"
:options="chart_options.annual_payment">
</line-chart>
</div>
</div>
</div>
.
.
<script>
export default {
data() {
return {
is_inputs: {
annual_payment: {
year: "",
loan_type: "",
}
},
is_loaded: {
annual_payment: true,
},
chart_options: {
annual_payment: {
responsive: true,
maintainAspectRatio: true,
legend: {
display: true,
position: 'bottom',
labels: {boxWidth: 0}
},
scales: {
yAxes: [{
ticks: {
min: 0,
reverse: false,
beginAtZero: true
}
}]
}
}
},
chart_data: {
annual_payment: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: [],
backgroundColor: ['#54478c', '#2c699a', '#048ba8', '#0db39e', '#16db93', '#83e377', '#b9e769', '#efea5a', '#f1c453', '#f35b04', '#bf0603', '#941b0c'],
data: [],
borderColor: "#0db39e",
pointBorderColor: "#bf0603",
pointBackgroundColor: "#bf0603",
pointHoverBackgroundColor: "#bf0603",
pointHoverBorderColor: "#bf0603",
pointBorderWidth: 6,
pointHoverRadius: 6,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: false,
borderWidth: 2,
tension: 0.1
},
{
label: [],
backgroundColor: ['#2c699a', '#54478c', '#0db39e', '#048ba8', '#83e377', '#16db93', '#efea5a','#b9e769', '#f35b04', '#f1c453', '#941b0c','#bf0603'],
data: [],
borderColor: "#0db39F",
pointBorderColor: "#bf0604",
pointBackgroundColor: "#bf0604",
pointHoverBackgroundColor: "#bf0604",
pointHoverBorderColor: "#bf0604",
pointBorderWidth: 6,
pointHoverRadius: 6,
pointHoverBorderWidth: 1,
pointRadius: 3,
fill: false,
borderWidth: 2,
tension: 0.1
}
]
}
},
selectLoanType(e) {
this.is_inputs.annual_payment.loan_type = e;
this.getCreditAnnualPayment();
},
selectPaymentYear(e) {
this.is_inputs.annual_payment.year = e;
this.getCreditAnnualPayment();
},
getCreditAnnualPayment() {
this.is_loaded.annual_payment = false;
var loan_type = this.is_inputs.annual_payment.loan_type;
var year = this.is_inputs.annual_payment.year;
var data = {'loan_type': loan_type, 'year': year};
var url = this.routes.annual_payment;
axios
.post(url, data)
.then(response => {
var json = response.data;
this.chart_data.annual_payment.datasets[0].label = year;
this.chart_data.annual_payment.datasets[0].data = json;
this.is_loaded.annual_payment = true;
})
.catch(err => {
console.log('err',err);
this.is_loaded.annual_payment = true;
});
}
}
}
}
</script>
AjaxDataController.php
.
.
public function annual_payment(Request $request) {
$data = [];
$selected_loan_type = $request->loan_type;
$selected_year = $request->year;
for($i=0; $i<12; $i++) {
$dt = \Carbon\Carbon::createFromFormat('Y-n', $selected_year.'-'.($i+1))->format('Y-m');
$payment_amount = \App\Payment::where('loan_type_id', $selected_loan_type)
->where('paid_at', 'like', $dt.'%')->sum('amount');
$scheduled_amount = \App\Payment::where('loan_type_id', $selected_loan_type)
->sum('scheduled_amount');
$data[$i] = [$payment_amount, $scheduled_amount];
}
return $data;
}
.
.
如果有人能指出我哪里出了问题以及如何进行更正，那将是一个很大的帮助，因为目前图表不会加载任何线条。
在数据集中你有 2 个对象。两个对象都具有
data您将
[$payment_amount, $scheduled_amount]我认为你想要做的是将
$payment_amount$scheduled_amount类似这样的事情
var json = response.data;
this.chart_data.annual_payment.datasets[0].label = year;
this.chart_data.annual_payment.datasets[0].data = json[0];
this.chart_data.annual_payment.datasets[1].data = json[1];
this.is_loaded.annual_payment = true;
AjaxDataController.php
public function annual_payment(Request $request) {
$data = [];
$data1 = [];
$data2 = [];
$selected_loan_type = $request->loan_type;
$selected_year = $request->year;
for($i=0; $i<12; $i++) {
$dt = \Carbon\Carbon::createFromFormat('Y-n', $selected_year.'-'.($i+1))->format('Y-m');
$payment_amount = \App\Payment::where('loan_type_id', $selected_loan_type)
->where('paid_at', 'like', $dt.'%')->sum('amount');
$scheduled_amount = \App\Payment::where('loan_type_id', $selected_loan_type)
->sum('scheduled_amount');
$data1[$i] = $payment_amount;
$data2[$i] = $scheduled_amount;
}
$data = [
'payment_amount' => $data1,
'monthly_amount' => $data2
];
return $data;
}
仪表板.vue
.
.
axios
.post(url, data)
.then(response => {
var json = response.data;
this.chart_data.annual_payment.datasets[0].label = year;
this.chart_data.annual_payment.datasets[0].data = json.payment_amount;
this.chart_data.annual_payment.datasets[1].data = json.monthly_amount;
this.is_loaded.annual_payment = true;
})
.catch(err => {
console.log('err',err);
this.is_loaded.annual_payment = true;
});
.
.