3

我正在尝试删除分组条形图条上值为 0 的条，但即使我在很多地方看到此解决方案，它对我也不起作用。

我想做的事

我创建了这个codepen。它包含一个 ChartJS 分组条形图：

Vue.component('bar-chart', {
  extends: VueChartJs.Bar,
  mounted () {
    this.renderChart({
      labels: [1500,1600,1700,1750,1800,1850,1900],
      datasets: [{ 
        data: [168,17,0,190,0,276,108],
        label: "Europe",
        backgroundColor: "#3cba9f",
        fill: false
      }, { 
        data: [0,202,0,161,0,38,0],
        label: "Asian",
        backgroundColor: "#n8c9b2",
        fill: false
      },{ 
        data: [0,202,0,161,224,38,0],
        label: "Latin America",
        backgroundColor: "#e8c3b9",
        fill: false
      }, { 
        data: [260,43,80,82,0,26,82],
        label: "North America",
        backgroundColor: "#c45850",
        fill: false
      }]
    },
    {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{
          categoryPercentage: 0.8,
          barPercentage: 0.9
        }],
        yAxes: [{
          scaleLabel: {
            display: true
          },
          ticks: {
            beginAtZero: true // minimum value will be 0.
          }
        }]
      }
    })
  }
})

var vm = new Vue({
  el: '.app'
})

关于如何实现想要的行为的任何想法？

4

0 回答 0