时间戳

首页 > 解决方案 > Chart.js 删除饼图中的零值扇区

javascript - Chart.js 删除饼图中的零值扇区

问题描述

Chart.js 请帮助：如何删除饼图中的零值扇区。在数据中：[12,0,0]；版本：2.9.4 img

标签： javascriptchart.js

解决方案

是的，这可以通过使用边框宽度的脚本选项来实现，如下所示：

var options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "f", "d"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3, 0, 0],
      borderWidth: (a, b, c) => (a.dataset.data[a.dataIndex] === 0 ? 0 : 1),
      backgroundColor: ["red", "blue", "green", "yellow", "pink", "purple", "white", "black"],
      borderColor: ["red", "blue", "green", "yellow", "pink", "purple", "white", "black"]
    }]
  },
  options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>

如果你改变borderWidth: (a,b,c) => (a.dataset.data[a.dataIndex] === 0 ? 0 : 1),你borderWidth: (a,b,c) => (a.dataset.data[a.dataIndex] === 0 ? 10 : 1),可以看到你现在的旧行为。

推荐阅读