強制ChartJS顯示具有空值的甜甜圈圖

Question

我在每個列上都有一個網格，其中包含不同時間段的4個甜甜圈圖： 過去90天 ， 過去60天 ， 過去7天以及今天 。

今天的問題是，它並不總是顯示數據，尤其是在早晨。 有沒有辦法強制ChartJS即使沒有數據也要顯示圖表？

這是一個示例： http : //jsfiddle.net/6xV78/219/

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，因此您需要在最后注意這一點。 我添加了一種方法來驗證ALL值是否為null，這是我唯一這樣顯示的方法。

Answer 2

所有值都等於零的餅圖定義不正確。 因為每個切片的角度（和面積）與切片各自值與所有值之和之比成比例。 如果所有值均等於零，則它們的總和為零。 庫應該正確地避免零除（希望通過設計），從而導致您遇到無餅圖的情況。 如果可能出現這種情況，那么在填充圖表之前，應由程序員負責檢測全零情況。 然后，程序員可以顯示“尚無數據。您這么早在做什么？睡吧。” 消息，如果所有值均為零。 或者，也許，如果他們非常需要保持外觀一致（一直都有圖表），他們可以顯示一個特殊的全黑無數據餅圖，其中包含以下虛擬數據：

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

但是，公開尚不存在任何數據並不丟人。