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

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提供的答案，我决定外推已接受的答案，以便可以在显示数据标签的条形图和饼图上显示选择的消息，而不仅仅是空白画布。

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

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

一些注意事项：

当要显示的数据为零时，边框也必须为零，否则显示为单行的烦人边框。如有必要，使用简单的else条件隐藏显示边框。
使用if if else条件显示/隐藏消息。如果有数据，则隐藏消息，否则，如果数据为零，则显示消息。
我只在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'
      }
    }
  }
}

Fiddle

Answer 3

您需要在数据中设置一些数据：[0，0，0，0] 在没有任何数据的情况下显示饼图是不可能的，我尝试仅更改数据，这一切都很好。

...
data: [2, 3, 4, 5]
...

https://jsfiddle.net/myeLq37j/

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

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

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

3 个答案: