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

【问题标题】：Show "No Data" message for Pie chart with no data为没有数据的饼图显示“无数据”消息
【发布时间】：2019-05-03 22:57:03
【问题描述】：

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

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

饼图 HTML

<div id="canvas-holder-CT" style="width:46%;float:right;position: absolute; left: 0px; top: 700px;">
    <canvas id="chart-area-CT" width="350" height="450" style="display: block; margin-left:2em">
    </canvas>
    <center> <b><details>
      <summary>Distribution by Call Types</summary>
    </details> </b></center>
</div>

饼图脚本

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);

【问题讨论】：

标签： chart.js pie-chart

【解决方案1】：

你检查过这个open issue吗？

以及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/

【讨论】：

对于像我一样遇到这个问题的人来说只是一个调整。上面的 ctx.font 行对我不起作用，我不得不去掉“正常”关键字。所以改成这样对我有用：ctx.font = "36px 'Helvetica'";

【解决方案2】：

可以由 CSS display 属性处理。

foo.html

<div id="showId" class="showData">
  <canvas id="myChart"></canvas>
</div>
<div id="noId" class="noData">
  <span>No Data Available</span>
<div>

foo.css

.showData {
   display: block;
}

.noData {
   display: none;
}

foo.js

// ...code
if(chartData) {
  document.getElementById("showId").classList.add("showData");
  document.getElementById("noId").classList.remove("noData");
} else {
  document.getElementById("showId").classList.remove("showData");
  document.getElementById("noId").classList.add("noData");
}

【讨论】：

解释图表数据