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>

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

1 个答案: