ChartJS – 如何在空饼图上显示边框？答案

【问题标题】：ChartJS – How to show border on empty pie chart?ChartJS – 如何在空饼图上显示边框？
【发布时间】：2017-02-01 12:40:06
【问题描述】：

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

当数组只包含零时，是否可以使边框可见（圆形）？

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

【问题讨论】：

如果未处理，数据全为 0 的饼图在计算部分时可能会被零除。以度为单位计算每件尺寸的简化版本( 360 / totalOfData ) * data。在文档中看不到优雅的解决方案。虚拟值可能比我看到的替代值更干净，即。手动在顶部绘制（也需要处理调整大小），或者可能修补/猴子修补Chart.controllers.doughnut 中的方法以解决问题update 或updateElement 可能是很好的起点（有点太累了，无法研究它进一步在分钟抱歉）
感谢您的回答。我自己添加虚拟值的方法可能是目前最好的，当时看来。

标签： javascript charts chart.js

【解决方案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>

【讨论】：