bounty还有5天到期。回答此问题可获得+50声望奖励。user16780927希望引起更多的注意这个问题。

我有一个单轴线图。用户可以从下拉列表中选择year，从另一个下拉列表中选择loan_type。然后，图表应该加载annual_payment和scheduled_payment的12个月记录，两者都是线性线。

Dashboard.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;
}

.
.

型
这将是一个很大的帮助，如果有人能指出我哪里错了，我如何作出更正，因为在目前的图表不会加载任何线。