Question

我有一个网格，每列有4个doughtnut图表，分别为：过去90天，过去60天，过去7天和今天。

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

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

Answer 1

我找到了一种快速的解决方法，不确定它的“好”或“有效”方式如何，但是它对我有用。如果值为零/零，我将其替换为-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的收入（已赚取和未决）。

*请注意，当其他人不为null时，这仍然会考虑到1，因此您需要自己照顾这一点。我添加了一种方法来验证所有值是否都为空，这是我唯一这样显示的方法。

Answer 2

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

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

尽管如此，披露没有数据存在也没有羞耻。

强制ChartJS显示带有空值的圆环图

2 个答案: