且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

当图表无数据时显示无数据消息

更新时间:2023-02-02 21:22:42

最简单的方法是使用条件渲染.

Easiest is to use conditional rendering.

假设您使用的是AngularJS(引用了标记),则可以使用ngIf指令.如果数据数组为空,则不显示图表.

Assuming you're using AngularJS (you referenced tag), you can use ngIf directive. If data array is empty, then don't display chart.

<canvas id="myChart" ng-if="data != 0"></canvas>
<span ng-if="data == 0">No data</span>

否则,您可以通过在绘制数据长度之前或之后进行检查来在脚本中解决该问题.我建议您此代码段.

Else, you can solve it in your script, by checking before or after draw the data length. I recommend you this snippet.

您希望遵循的其他解决方案可能是使绘制的数据适应接收到的数据.

Other solution following your wish could be to adapt drawn data to received data.

    if($scope.requestedLeaveTypeCount.length > 0){
      data = {
        labels: ["EL", "AL", "PL", "CL"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: ['#F0CB8C', '#A9D5D4', '#E8A3D7', '#CFA3FD'],
            data: $scope.requestedLeaveTypeCount,
        }]
      }
    } else {
      data = {
        labels: ["No data"],
        datasets: [{
          labels:'No data',
          backgroundColor: ['#D3D3D3'],
          data: [100]
        }]
      }
    }

https://plnkr.co/edit/QXljAeeM4Ul3Y47EPcbq?p=preview