Как добавить фон, который отображает «нет данных» на холсте, используя Chart JS? - PullRequest
Новая
       37

Как добавить фон, который отображает «нет данных» на холсте, используя Chart JS?

0 голосов
/ 12 февраля 2020

Я хотел бы добавить фон с текстом о том, что в этом случае нет доступных данных, используя диаграмму JS V2.9.3.

Например, я хотел бы go из this (пустая канва): empty canvas

Для этого (цвет фона с отображением текста):

no more empty background

Есть ли у вас какие-либо предложения для этого?

Заранее спасибо

1 Ответ

1 голос
/ 12 февраля 2020

Вы можете использовать глобальный плагин , который dr aws текст «Нет данных», если нет данных. 

Chart.plugins.register({
  afterDraw: chart => {
    if (chart.data.datasets[0].data.length === 0) {
      var ctx = chart.chart.ctx;
      ctx.save();
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.font = "22px Arial";
      ctx.fillStyle = "gray";
      ctx.fillText('No data available', chart.chart.width / 2, chart.chart.height / 2);
      ctx.restore();
    }
  }
});

new Chart(document.getElementById('canvas'), {
  type: 'bar',
  data: {
    labels: [],
    datasets: [{
      data: []
    }]
  },
  options: {
    legend: {
      display: false
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="80"></canvas>
...