图表无数据时显示无数据消息答案

【问题标题】：Show No data message when chart has no data图表无数据时显示无数据消息
【发布时间】：2017-12-11 09:58:21
【问题描述】：

当图表没有数据时，我试图不显示任何数据消息。对吗？

  var ctx = document.getElementById('mycanvas').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ["aa", "bb", "cc", "dd"],
                datasets: [{
                    label: "My First dataset",
                    backgroundColor: ['red', 'blue', 'green', 'yello'],
                    data: data.length ? data: [{ label: "No Data", value: 100 }],
                }]
            },
            options: {
                legend: {
                    position: 'right',
                    labels: {
                        boxWidth: 12
                    }
                },
                tooltips: { bodyFontSize: 12 }
            }
        });

当数据长度为 0 时，我没有收到 No data 消息。

【问题讨论】：

你的三元好像是假的
return data.length 并检查结果，如果它返回 0 尝试 data.length <= 0 但我认为这种方式毫无用处..
我能给你的建议是在视图中管理它。如果没有数据，则根本不显示图表。 <canvas id="mycanvas" ng-if="data.length > 0"></canvas> & <span ng-if="data.length == 0">No data</span>

标签： javascript jquery angularjs charts

【解决方案1】：

最简单的是使用条件渲染。

假设您使用的是 AngularJS（您引用了标签），您可以使用 ngIf 指令。如果数据数组为空，则不显示图表。

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

否则，您可以在脚本中解决它，方法是在绘制数据长度之前或之后检查。我推荐你this snippet。

根据您的意愿的其他解决方案可能是将绘制的数据调整为接收到的数据。

    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

【讨论】：

这里有什么问题data: data!= 0? data: [{ label: "No Data", value: 100 }]
我会在data中得到0。
@krish 没有写得好的三元组。 (condition) ? ok : not_ok如果你在数据中得到0，请看我更新的答案
对不起，我没能找到你。 data: (data!= 0) ? data: [{ label: "No Data", value: 100 }]这样可以吗？
不，您似乎与三元组混淆了。三元就像if/else。 (condition) ? if : else。您提供的代码仅显示 if 部分，因此您的三元组无效。