强制 ChartJS 显示具有空值的甜甜圈图

Force ChartJS to show Doughnut chart with null values

本文关键字：甜甜圈 空值 ChartJS 显示 强制      更新时间：2023-09-26

我有一个网格，每列上有 4 个 doughtnut 图表，用于不同的时间段：过去 90 天、过去 60 天、过去 7天和今天。

今天的问题是它并不总是显示数据，尤其是在早上。有没有办法强制 ChartJS 显示图表，即使它没有任何数据？

下面是一个示例：http://jsfiddle.net/6xV78/219/

var pieData = [
  {
    value: 0,
    color:"#3F9F3F"
  },
  {
    value : 0,
    color : "#222"
  }
];

我找到了一个快速的解决方法，不确定它有多"好"或"有效"的方式，但它对我有用。如果值为 null/零，我将它们替换为 -1 以保留图表的外观，然后使用自定义工具提示函数覆盖输出。

{
  ...
  data: [earned == 0 ? -1 : earned, pending == 0 ? -1 : pending]
  ...
},
options: {
  tooltip: {
    callbacks: {
       label: function (tooltipItem, data) {
              const value = data['datasets'][0]['data'][tooltipItem['index']];
              return '$' + (value == -1 ? 0 : value);
       }
    }
  }
}

显然，我有 2 个切片，当两者都为 0 时，图表将显示 2 个相等的一半，都显示 0 美元的收入（赚取和待定）。

*请注意，当其他不为空时，这仍然会考虑 1，因此您需要在最后处理它。我添加了一个方法来验证所有值是否为 null，这是我这样显示它的唯一情况。

所有值都等于零的饼图定义不明确。因为每个切片的角度（和面积）与切片各自值与所有值之和的比率成正比。如果所有值都等于零，则它们的总和为零。库应该理所当然地避免除以零（希望是设计使然），从而导致您遇到的无饼图情况。程序员应该负责在填充图表之前检测全零情况，如果这种情况有可能发生。然后程序员可以显示"还没有数据。你这么早起床干什么？去睡觉吧"消息，如果所有值都为零。或者，也许，如果他们非常需要保持外观一致（一直有一个图表），他们可以显示一个特殊的全黑无数据饼图，其中包含以下虚拟数据：

var pieNoData = [
  {
    value: 1,
    color: "#000000"
  }
];

不过，披露尚不存在任何数据并不丢人。

相关文章：