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

Question

我有一个图表，其中我使用 AngularJS 获取值。
当没有值时，Angular 将其作为 undefined.

抛出

并且将这些值传递给图表时，图表不会显示它们（这很好，因为与 0 相同）。但是在工具提示中，悬停时，将值显示为 "Not a Number" (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

Hey, I had the same error as you and I tried to put many conditions in my code but I failed then after I got my final result. And I got succeed.

我的代码是这样的

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

或

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

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

How to change NaN values to 0 in Chart.js?

javascript

angularjs

chart.js

angular-chart