javascript - Pie chart.js - 显示无数据保留消息

Question

我正在使用 chart.js版本:2.8.0 显示 bar chart和一个 pie chart .

非空条形图和饼图随心所欲地显示。

但是，当条形图和饼图为空或要显示的数据为零时，是否有标准化选项来显示“无数据可显示!”条形图和饼图的消息，可以显示在空数据或零数据的位置。

我在 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>

这就是我希望空饼图显示的内容(最好带有标签):

更新答案 - 2019 年 4 月 13 日

使用 Core972 提供的答案，我决定推断已接受的答案，以便可以在显示数据标签的条形图和饼图上显示所选消息，而不仅仅是空白 Canvas 。

这是我提出的适用于饼图和条形图的解决方案。

我没有测试过其他类型的图表，但我假设它们可以使用相同的方法。

一些注意事项:

1. 当要显示的数据为零时，边框也必须为零，否则会显示显示为单行的令人讨厌的边框。如有必要，使用简单的 if else 条件隐藏显示边框。

2. 使用 if else 条件来显示/隐藏消息。如果有数据，则隐藏消息，如果数据为零，则显示消息。

3. 我只在 Chrome 和 Firefox 上测试过这种方法，似乎工作正常。

希望对大家有所帮助!享受吧!

显示数据标签和 float 消息的饼图:

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: 0,
            hoverBorderWidth: 0,
            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'
        }
    }
});

<div style="width: 100%; height: 100%; position: relative;">
    <div style="text-align: center; width: 100%; height: 100%; position: absolute; left: 0; top: 100px; z-index: 20;">
        <b>No data for you today!</b>
    </div>
    <canvas id="pieChartExample01" width="25" height="25"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</div>

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 代替图表。