javascript - 图表 js : when all the values passed to data are zeros, 没有任何显示

Question

我正在使用 chart.js 库来显示图表。我正在尝试渲染 donut chart 。当我传递值大于 0 的数据时，它将图形显示为 fiddle 链接 http://jsfiddle.net/rajeshwarpatlolla/9mby62w4/1/

我在这种情况下传递的数据是

{ value: 10, color:"#F7464A", highlight: "#FF5A5E", label: "Red" },
{ value: 70, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" },
{ value: 80, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" }

我担心的是，当传递的值全为零时，它不会显示任何内容，就像在这个 fiddle http://jsfiddle.net/rajeshwarpatlolla/9mby62w4/3/ 中一样.所以用户永远不会知道页面中缺少什么。

我在这种情况下传递的数据是

{ value: 0, color:"#F7464A", highlight: "#FF5A5E", label: "Red" },
{ value: 0, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" },
{ value: 0, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" }

当所有值都为零时，我想显示类似下图的内容。

我们如何实现这一目标，有人可以帮助我吗？

Answer 1

当所有数据值为零时显示图表

这可以使用以下图表插件以更优雅的方式实现:

Chart.plugins.register({
   beforeInit: function(chart) {
      var data = chart.data.datasets[0].data;
      var isAllZero = data.reduce((a, b) => a + b) > 0 ? false : true;
      if (!isAllZero) return;
      // when all data values are zero...
      chart.data.datasets[0].data = data.map((e, i) => i > 0 ? 0 : 1); //add one segment
      chart.data.datasets[0].backgroundColor = '#d2dee2'; //change bg color
      chart.data.datasets[0].borderWidth = 0; //no border
      chart.options.tooltips = false; //disable tooltips
      chart.options.legend.onClick = null; //disable legend click
   }
});

^{* 在脚本的开头添加这个}

注意:确保使用最新版本的 ChartJS，即 2.6.0 atm。

参见 - working example