当数据值为 0 时，Django Chartjs 输出“无数据”

Posted 2023-02-24

【中文标题】当数据值为 0 时，Django Chartjs 输出“无数据”

【英文标题】：Django Chartjs outputs "No data" when data has value 0

【发布时间】：2021-03-11 18:48:48

【问题描述】：

我试图用 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"   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】：

Plugin Core API 提供了一系列可用于执行自定义代码的挂钩。您可以使用afterDraw 钩子在画布上使用CanvasRenderingContext2D 直接写入文本“无数据”，以防所有data 值中的sum 为零。

请查看您修改后的代码，看看它是如何工作的。

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" ></canvas>