Блог

Главная - Вопросы по программированию - Django Chartjs выводит «Нет данных», когда данные имеют значение 0

Django Chartjs выводит «Нет данных», когда данные имеют значение 0

#javascript #django #django-templates #chart.js

#javascript #django #django-шаблоны #chart.js

Вопрос:

Я пытался построить несколько пончиковых графиков с помощью Django и ChartJS. Но застрял в проблеме. Когда данные имеют значение = 0, я хочу, чтобы вывод вместо пончика был «Нет данных».

Я исследовал ngIf, но результат не соответствует ожиданиям. Вот мой код

index.html

 <div class="card-body card-body-cascade text-center"><div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;"><div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
<div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div></div><div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
<div style="position:absolute;width:200%;height:200%;left:0; top:0"></div></div></div>
<canvas id="doughnutChart" height="250" width="730" class="chartjs-render-monitor" style="display: block; width: 408px; height: 272px;" ng-if="data.length <= 0"></canvas>
<span ng-if="data == 0">No data</span>
</div>

И JS для пончика выглядит так

 <script>
chartIt();
    async function chartIt() {
    const data = await getData();
    var ctx = document.getElementById("doughnutChart").getContext('2d');
    var myLineChart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ['d1','d2'],
        datasets: [{
          data: ['0','0'],
          backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
          hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
        }]
      },
      options: {
        responsive: true
      }
    });
}
</script>

Ответ №1:

API ядра плагина предлагает ряд перехватов, которые могут использоваться для выполнения пользовательского кода. Вы можете использовать afterDraw хук для записи текста «Нет данных» непосредственно на холсте, используя CanvasRenderingContext2D в случае sum , если все data значения равны нулю.

Пожалуйста, взгляните на ваш исправленный код и посмотрите, как он работает.

 new Chart('doughnutChart', {
  type: 'doughnut',
  plugins: [{
    afterDraw: function(chart) {
      let sum = chart.data.datasets[0].data.map(v => parseInt(v)).reduce((a, b) => a   b, 0);
      if (sum == 0) {
        let width = chart.chart.width,
          height = chart.chart.height   35,
          ctx = chart.chart.ctx;
        ctx.save();
        let fontSize = (height / 200).toFixed(2);
        ctx.font = fontSize   "em sans-serif";
        ctx.textBaseline = "middle";
        let text = 'No Data',
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = height / 2;
        ctx.fillText(text, textX, textY);
        ctx.restore();
      }
    }
  }],
  data: {
    labels: ['d1', 'd2'],
    datasets: [{
      data: ['0', '0'],
      backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
      hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
    }]
  },
  options: {
    responsive: true
  }
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="doughnutChart" height="80"></canvas>

Метки: ,