Question

我有一个图表，其中使用AngularJS获取值。
如果没有值，Angular会将其抛出为undefined。

并且在将这些值传递到图表时，图表不会显示它们（这很好，因为它与0相同）。但是，在工具提示中，将鼠标悬停时，会将值显示为“不是数字”（NaN）。

如何使所有NaN值显示为 0 （零）？

不知道观看我的代码是否真的有帮助，但这是：

$scope.Chart = {
       segmentShowStroke: false,
       responsive: true,
       maintainAspectRatio: false,
       scales: {
           xAxes: [{
               stacked: true,
               ticks: {
                   autoSkip: false
               },
               gridLines: {
                   display: false
               }
           }],
           yAxes: [{
               stacked: true,
               ticks: {
                   beginAtZero: true
               },
               gridLines: {
                   display: true,
                   color: "rgb(150,150,150)"
               }
           }]
       },
       legend: {
           display: true,
           position: 'top',
           labels: {
               usePointStyle: true,
               fontColor: "white"
           }
       },
       plugins: {
           datalabels: {
               color: '#171d28',
               display: function(context) {
                   return context.dataset.data[context.dataIndex] !== 0;
               },
               anchor: 'center',
               align: 'center',
               clamp: true
           },
           deferred: {
               yOffset: '45%',
               delay: 200
           }
       }
   };
   $scope.Colors = [
       { backgroundColor: 'rgb(204,234,248)' },
       { backgroundColor: 'rgb(102,194,235)' },
       { backgroundColor: 'rgb(0,154,221)' },
       { backgroundColor: 'rgb(0,84,134)' }
   ];
   $scope.Series = ['1 - Poor', '2 - Average', '3 - Acceptable', '4 - Good'];
   $scope.Labels = ['Performance', 'Mobile Capability', 'Reporting'];
   $scope.Data = [
       [ ratingPerformance1, ratingMobileCapability1, ratingReporting1 ],
       [ ratingPerformance2, ratingMobileCapability2, ratingReporting2 ],
       [ ratingPerformance3, ratingMobileCapability3, ratingReporting3 ],
       [ ratingPerformance4, ratingMobileCapability4, ratingReporting4 ]
   ];

Answer 1

Chart.js为您提供挂钩，以自定义工具提示中的内容。它们provide an example in their documentation用于四舍五入，但是您可以快速对其进行修改以显示0而不是NaN。它应该大致如下所示：

$scope.Chart = {
    ...
    options: {
        tooltips: {
            callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += isNaN(tooltipItem.yLabel) ? '0' : tooltipItem.yLabel;
                    return label;
                }
            }
        }
    }
});

Answer 2

嘿，我和你有同样的错误，我尝试在其中加入许多条件我的代码，但在获得最终结果后失败了。我得到了成功。

我的代码是这样的

  helper[key].NoOfReels += isNaN((parseFloat(o.NoOfReels)) == "" || parseFloat(o.NoOfReels));

或

isNaN(parseFloat(data[i].NoOfReels)) ? '0' : parseFloat(data[i].NoOfReels);

如何在Chart.js中将NaN值更改为0？

2 个答案: