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

Question

I have a Chart in which I'm taking the values with AngularJS.
When there are no Values, Angular throws it as undefined .

And when passing these values to the Chart, the chart don't shows them (Which is fine because is the same as 0). But in the tooltip, when hover, shows the values as "Not a Number" (NaN).

How can I make it show all the NaN values as 0 (zero)?

Don't know if watching my code really helps, but here it is:

$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 provides hooks for you to customize the content in the tooltips. They provide an example in their documentation for rounding, but you can quickly modify it to show a 0 instead of NaN . It should roughly look like this:

$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.

My code like this

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

or

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