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

Question

我正在使用版本为2.8.0的chart.js来展示一个柱状图和一个饼图。

非空的柱状图和饼图显示效果符合我的预期。

然而，当柱状图和饼图为空或没有数据可展示时，是否有一种标准化的选项可以为这两种图表显示一个“暂无数据！”的消息，以代替空白或零数据。

我已经在谷歌搜索了插件和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. 当没有数据可显示时，边框也必须为零，否则会显示一个烦人的边框，显示为单个线条。使用简单的if 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>

- user1261774

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，则显示“无数据可显示”而不是图表。

- stardust4891

---

这是完美的答案。 - amprie286

喜欢这个答案！你可以直接在新的单个图表实例上进行操作，而不是更新整个Chart类，例如：let chart = new Chart(ctx, { plugins: [ { afterDraw: function(chart){...} } ]}。 - Advena

在最新版本3.5.1中无法工作。 - Jayanth Kumar T

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

- Core972

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

- Ali Zahid

Answer 4

针对React（react-chartjs-2）

使用此插件。

const plugins = [
  {
    afterDraw: function (chart) {
      console.log(chart);
      if (chart.data.datasets[0].data.length < 1) {
        let ctx = chart.ctx;
        let width = chart.width;
        let height = chart.height;
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.font = "30px Arial";
        ctx.fillText("No data to display", width / 2, height / 2);
        ctx.restore();
      }
    },
  },
];

使用此插件

<Line height={120} data={props.data} options={options} plugins={plugins} />
<Pie height={320} width={500} data={props.data} options={options} plugins={plugins} />

- Rohit Nishad

Answer 5

你需要在数据中设置一些数据：[0, 0, 0, 0]。如果没有任何数据，就不可能显示饼图，我尝试只更改数据，一切都很好。

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

https://jsfiddle.net/myeLq37j/

- Vencendor

---

你误读了问题！当没有数据可显示时，我希望显示一条消息。 - user1261774