Question

我只想在用户没有选择任何内容时在开始时显示“无数据”。并且一旦用户决定选择并且数据库中没有记录，我想显示“无数据”消息而不是垂直线。如何使用VueJS和ChartJS做到这一点？有人可以帮我解决我的问题吗？这是我的代码

HTML

 <div class="wrapper mt-5">
   <canvas ref="myChart2" id="myChart2" v-if="myChart2Length > 0" width="600" height="250" class="mb-5"></canvas>
   <span v-else >No data</span>
 </div>

方法

axios.post(this.urlRoot + this.api + "best_beneficiary_reports.php?barangay_id=" + this.filter_search + "&search=" + this.select_reports)
.then(response => {
console.log(response);
vm.best_beneficiaries = response.data
var ctxChart = self.$refs.myChart2.getContext('2d');

for(var i = 0; i < this.best_beneficiaries.length; i++) {
  sum += parseFloat(this.best_beneficiaries[i].Total);
}

 this.myChart2Length = vm.best_beneficiaries.length || 0;

if (this.myChart2) this.myChart2.destroy();

this.myChart2 = new Chart(ctxChart, {
  type: 'pie',
  data: {
    labels: vm.best_beneficiaries.map(item => item.Beneficiary),
    datasets: [{
      label: 'Total Amount',
      data: vm.best_beneficiaries.map(item => (item.Total / sum * 100).toFixed(2)),
      backgroundColor: this.poolColors(vm.best_beneficiaries.length),
      borderColor: '#eee',
      borderWidth: 2
    }]
  },
  responsive : true,
  options: {
    title: {
      display : true,
      text : "Lifetime Best Beneficiary",
      fontFamily: "sans-serif",
      fontSize: 18,
    },
    legend: {
      display: false
    },
    tooltips: {
      enabled: true,
      mode: "single",
      callbacks: {
        title: function (tooltipItem, data) { return 'Date: ' + data.labels[tooltipItem[0].index]; },
        label: function (tooltipItems, data) { return 'Avg: ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index] + "%"; } 
      }
    }
  }
});
}).catch(e => {
 console.log(e)
});

Answer 1

我需要您的.vue文件的完整版本，但是我尝试粗略地写..

<dependency>
    <groupId>com.datastax.spark</groupId>
    <artifactId>spark-cassandra-connector_2.11</artifactId>
    <version>2.4.1</version>
</dependency>

<div class="wrapper mt-5">
   <canvas v-if="hasData" ref="myChart2" id="myChart2" width="600" height="250" class="mb-5"></canvas>
   <span v-else >No data</span>
 </div>

使用VueJS和ChartJS没有数据时在Pie中显示“无数据”吗？

1 个答案: