chart js：当传递给数据的所有值都为零时，不会显示任何内容

Question

我正在使用chart.js库来显示图表。我正在尝试渲染甜甜圈图。当我传递数据时，其值大于0，它将图表显示为小提琴链接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" }

我担心的是，当传递的值都是零时，它就不会显示任何内容，就像在这个小提琴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

您可以添加一些CSS，当图表没有绘制到画布上时，它会为画布提供背景：

canvas {
  background: radial-gradient(circle at center, rgba(0,0,0,0) 0, rgba(0,0,0,0) 55%, rgba(0,0,0,0.2) 56%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.2) 64%, rgba(0,0,0,0) 65%,rgba(0,0,0,0) 100%);
}

这里是小提琴：http://jsfiddle.net/Nisarg0/9mby62w4/7/

当我知道值为零的事实时，理想情况下应用radial-gradient - 因此CSS选择器类似于canvas.no-data，我会添加类.no-data仅当值为零时才到画布。

Answer 2

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

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

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