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

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

Например, я хотел бы перейти от этого (пустой холст): пустой холст

К этому (цвет фона с отображением текста):

нет больше пустого фона

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

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


javascript html charts chart.js chartjs-2.6.0
person lilouch    schedule 12.02.2020    source источник
comment
Конечно, вы можете узнать, доступны ли данные, не используя ChartJS, и просто заменить холст изображением? Или полностью расположить холст поверх div с текстом внутри и просто скрыть холст? Вам не нужно решать это с помощью функций ChartJS.   -  person Chris G    schedule 12.02.2020
comment
Проверьте скрипт для примера реализации jsfiddle.net/x04ptfuu   -  person Akhil Aravind    schedule 12.02.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать глобальный подключаемый модуль, который отображает сообщение "Нет данные доступны», если данные недоступны.

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>

person uminder    schedule 12.02.2020
comment
Работает идеально! Благодарю вас ! - person lilouch; 12.02.2020
comment
Рад, что смог тебе помочь. - person uminder; 12.02.2020