当图表没有数据时显示无数据消息
我想在图表没有数据时显示没有数据消息。 这是对的吗？
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时，我没有收到数据消息。
最简单的是使用条件渲染。
假设您正在使用AngularJS（您引用了标记），则可以使用ngIf指令。 如果数据数组为空，则不显示图表。
No 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] }] } }