javascript - ChartJS – 如何在空饼图上显示边框？

Question

我有几个使用 ChartJS 显示的饼图/圆环图。通常，它们包含 [200, 1200, 300] 和 [30, 500] 之类的数据以给出估计值，但在极少数情况下，它们会包含 [ 0, 0, 0] 和 [0, 0]。那么问题是图表消失了，即使我启用了边框。我已通过向数组中的第一个元素添加虚拟值来解决此问题，但我不喜欢代码的外观并想要更好的方法。

当数组只包含零时，是否可以使边框可见(一个圆圈)？

编辑: 我似乎没有得到这个问题的任何答案。当边框未显示在空数据上时，它是否被视为错误，或者这是预期的行为？不知道有没有其他人遇到过这个问题。我仍然需要找到一种优雅的方式来处理这个问题，但我还没有找到。

Answer 1

这不是错误，因为边框是按数据项呈现的。如果所有数据都是 0，则每个切片都没有宽度，因此无法显示边框(ChartJS 处理这种情况的唯一其他方法是为每个项目提供相同的大小，这不是更好)。

您可以添加不带标签的虚拟值并过滤图例和工具提示，以便用户将数据视为空白。在下面的示例中，渲染图表之前的检查确保如果所有数据点都为 0，则将值为 1 的数据点添加到没有标签的图表中。显示了两个数据集以突出差异。

let ctx = document.getElementById('chartContainer').getContext('2d');

let data = [[0, 0, 0], [1,2,3]];
let labels = ["A", "B", "C"];
let bgColors = ['yellow', 'orange', 'aquamarine'];

let options = {
  borderWidth: 1,
  borderColor: 'black',
  legend: {
    labels: {
    	// Prevent items with undefined labels from appearing in the legend
      filter: (item) => item.text !== undefined
    }
  },
  tooltips: {
    // Prevent items with undefined labels from showing tooltips
  	filter: (item, chart) => chart.labels[item.index] !== undefined
  }
}

let chartConfig = {
  type: 'pie',
  data: {
    labels: labels,
    datasets: [{
      data: data[0],
      backgroundColor: bgColors,
      label: "data",
      borderColor: 'black',
      borderWidth: 2
    }, {
      data: data[1],
      backgroundColor: bgColors,
      label: "data",
      borderColor: 'black',
      borderWidth: 2
    }]
  },
  options: options
}

// Check if data is all 0s; if it is, add dummy data to end with empty label
chartConfig.data.datasets.forEach(dataset => {
  if (dataset.data.every(el => el === 0)) {
    dataset.backgroundColor.push('rgba(255,255,255,0)');
    dataset.data.push(1);
  }
})


let pieChart = new Chart(ctx, chartConfig);

.chartContainer {
  height: 200px;
  width: 200px;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<div class="chartContainer">
  <canvas id="chartContainer" width="200" height="200"></canvas>
</div>