显示没有数据的饼图的“无数据”消息

我下面有使用chartjs的Piechart。当没有内容可显示时，我需要在其上显示“无数据”消息。

但是我在chartjs教程中找不到这种方法。有人可以帮忙吗？

饼图HTML

    
    
     

      
Distribution by Call Types
    
 

饼图脚本

var cOnfigCT= {
    type : 'pie',
    data : {
        datasets : [{
                data : valuesCT,
                backgroundColor : coloringCT,
                label : 'Distribution by Call Types'
            }
        ],
        labels : labelsCT
    },
    options : {
        segmentShowStroke : false,
        legend : false,
        animateScale : true,
        responsive : true,
        showAllTooltips : false,
        tooltips : {
            custom : function (tooltip) {
                if (!tooltip)
                    return;
                tooltip.displayColors = false;
            }
        }
    }
};

var ctxCT = document.getElementById("chart-area-CT").getContext("2d");
if (myPieCT != null) {
    myPieCT.destroy();
}
myPieCT = new Chart(ctxCT, configCT);

beaver.. 6

您是否检查过此未解决的问题？

以及etimberg用户提出的相对解决方案：

Chart.plugins.register({
    afterDraw: function(chart) {
    if (chart.data.datasets.length === 0) {
        // No data is present
      var ctx = chart.chart.ctx;
      var width = chart.chart.width;
      var height = chart.chart.height
      chart.clear();

      ctx.save();
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fOnt= "16px normal 'Helvetica Nueue'";
      ctx.fillText('No data to display', width / 2, height / 2);
      ctx.restore();
    }
  }
});

参见：https : //jsfiddle.net/x04ptfuu/

您是否检查过此未解决的问题？

以及etimberg用户提出的相对解决方案：

Chart.plugins.register({
    afterDraw: function(chart) {
    if (chart.data.datasets.length === 0) {
        // No data is present
      var ctx = chart.chart.ctx;
      var width = chart.chart.width;
      var height = chart.chart.height
      chart.clear();

      ctx.save();
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fOnt= "16px normal 'Helvetica Nueue'";
      ctx.fillText('No data to display', width / 2, height / 2);
      ctx.restore();
    }
  }
});

参见：https : //jsfiddle.net/x04ptfuu/