饼图.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>

这就是我希望空饼图显示为（最好带有标签）的内容：

更新至答案-2019年4月13日

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

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

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

一些注意事项：

1. 当要显示的数据为零时，边框也必须为零，否则显示为单行的烦人边框。如果需要，使用简单的else条件隐藏显示边框。

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

3. 我只在Chrome和Firefox中测试了这种方法，但效果不错。

我希望这可以帮助某人！请享用！

显示数据标签和浮动消息的饼图：

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

Answer 2

这是使用 Chart.js 2.8.0 的示例

<canvas id="pieChartExample01" width="25" height="25"></canvas>
<div id="no-data">Nothing to display</div>

...
options: {
  title: {
    display: false,
    text: 'Overall Activity'
  },
  animation: {
    onComplete: function(animation) {
      var firstSet = animation.chart.config.data.datasets[0].data,
        dataSum = firstSet.reduce((accumulator, currentValue) => accumulator + currentValue);

      if (typeof firstSet !== "object" || dataSum === 0) {
        document.getElementById('no-data').style.display = 'block';
        document.getElementById('pieChartExample01').style.display = 'none'
      }
    }
  }
}

小提琴

Answer 3

对于那些使用该库 3.x 版本的人，我是这样做的

const plugin = {
    id: 'emptyChart',
    afterDraw(chart, args, options) {
        const { datasets } = chart.data;
        let hasData = false;

        for (let dataset of datasets) {
            //set this condition according to your needs
            if (dataset.data.length > 0 && dataset.data.some(item => item !== 0)) {
                hasData = true;
                break;
            }
        }

        if (!hasData) {
            //type of ctx is CanvasRenderingContext2D
            //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D
            //modify it to your liking
            const { chartArea: { left, top, right, bottom }, ctx } = chart;
            const centerX = (left + right) / 2;
            const centerY = (top + bottom) / 2;

            chart.clear();
            ctx.save();
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('No data to display', centerX, centerY);
            ctx.restore();
        }
    }
};

只需像这样使用上面的内容即可：

const chart1 = new Chart(ctx, {
    plugins: [plugin]
});