饼图.js-显示无数据保留消息

Question

我正在使用chart.js版本：2.8.0来显示条形图和饼图。非空的条形图和饼图根据需要显示。但是，当条形图和饼形图为空或要显示零数据时，是否有标准化的选项来显示“无数据可显示！”。条形图和饼形图的消息都可以显示，以代替空白数据或零数据。我已经在Google上搜索了插件，并在SO中找到了解决方案，但是我发现的选项根本不起作用，或者不适用于最新版本的chartjs。这是我的空饼图：new Chart(document.getElementById('pieChartExample01'), {    type: 'pie',    data: {        labels: [            'Views',            'Print Requests',            'PDF Downloads',            'DOCX Downloads',        ],        datasets: [{            backgroundColor: [                'rgba(71, 101, 160, 0.3)',  // #4765a0.                'rgba(0, 0, 0, 0.3)',  // #000000.                'rgba(52, 137, 219, 0.3)',  // #3489db.                'rgba(179, 179, 179, 0.3)',  // #b3b3b3.            ],            hoverBackgroundColor: [                'rgba(71, 101, 160, 0.6)',  // #4765a0.                'rgba(0, 0, 0, 0.6)',  // #000000.                'rgba(52, 137, 219, 0.6)',  // #3489db.                'rgba(179, 179, 179, 0.6)',  // #b3b3b3.            ],            borderWidth: 1,            hoverBorderWidth: 2,            borderColor: [                'rgba(71, 101, 160, 1)',  // #4765a0.                'rgba(0, 0, 0, 1)',  // #000000.                'rgba(52, 137, 219, 1)',  // #3489db.                'rgba(179, 179, 179, 1)',  // #b3b3b3.            ],            borderAlign: 'inner',            data: [0, 0, 0, 0]      }]    },    options: {        title: {          display: false,          text: 'Overall Activity'        }    }});<canvas id="pieChartExample01" width="25" height="25"></canvas><script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>这就是我希望空饼图显示为（最好带有标签）的内容：

Answer 1

使用我稍加修改的该插件，该插件检查每个数据集项是否为零：

<script>

    Chart.plugins.register({

        afterDraw: function(chart) {

            if (chart.data.datasets[0].data.every(item => item === 0)) {

                let ctx = chart.chart.ctx;

                let width = chart.chart.width;

                let height = chart.chart.height;

                chart.clear();

                ctx.save();

                ctx.textAlign = 'center';

                ctx.textBaseline = 'middle';

                ctx.fillText('No data to display', width / 2, height / 2);

                ctx.restore();

            }

        }

    });

</script>

这样，如果所有数据集项目均为0，它将No data to display代替图表显示。