Uncaught TypeError: impossible de lire la propriété 'format' de undefined

Question

J'essaye de formater des nombres dans le graphique chartjs. Je reçois cette erreur sur ma console et les chiffres ne sont pas visibles sur le graphique

Uncaught TypeError: Cannot read property 'format' of undefined

Vous pouvez consulter le violon here. Ligne 74 au violon

for (var i = 0; i < firstDataSet.data.length; i++) { 
          var firstModel = firstDataSet._meta[Object.keys(firstDataSet._meta)[0]].data[i]._model; 
          var secondModel = secondDataSet._meta[Object.keys(secondDataSet._meta)[0]].data[i]._model; 
          var thirdModel = thirdDataSet._meta[Object.keys(thirdDataSet._meta)[0]].data[i]._model; 
          var fourthModel = fourthDataSet._meta[Object.keys(fourthDataSet._meta)[0]].data[i]._model; 
          var total = firstDataSet.data[i] + secondDataSet.data[i]; 
          var total1 = thirdDataSet.data[i] + fourthDataSet.data[i]; 
    // Line below is causing the error 


ctx.fillText(formatter.format(Number(firstDataSet.data[i])) + " ", firstModel.x, firstModel.y + 20); 

          ctx.fillText((firstDataSet.data[i]) , firstModel.x, firstModel.y + 20); 
          ctx.fillText((secondDataSet.data[i]) , secondModel.x, secondModel.y + 20); 
          ctx.fillText(total , secondModel.x, secondModel.y - 20); 
          ctx.fillText((thirdDataSet.data[i]) , thirdModel.x, thirdModel.y + 20); 
          ctx.fillText((fourthDataSet.data[i]) , fourthModel.x, fourthModel.y + 20); 
          ctx.fillText(total1 , fourthModel.x, fourthModel.y - 20); 
          /*if (firstDataSet.data[i] >= secondDataSet.data[i]) { 
           ctx.fillText((firstDataSet.data[i] * 100/total).toFixed(2) + '%', firstModel.x, firstModel.y + 30); 
          } else { 
           ctx.fillText((secondDataSet.data[i] * 100/total).toFixed(2) + '%', secondModel.x, secondModel.y + 30); 
          } 
          */ 
         } 

var formatter = new Intl.NumberFormat('en-US', { 
    style: 'currency', 
    currency: 'USD', 
    minimumFractionDigits: 2, 
    // the default value for minimumFractionDigits depends on the currency 
    // and is usually already 2 
}); 

Answer 1

Vous devez déclarer la formatter avant d'appeler la fonction constructeur new Chart, sinon il sera undefined à l'intérieur du options vous passez le deuxième paramètre de new Chart.

var formatter = new Intl.NumberFormat('en-US', { 
    style: 'currency', 
    currency: 'USD', 
    minimumFractionDigits: 2, 
    // the default value for minimumFractionDigits depends on the currency 
    // and is usually already 2 
}); 

window.myBar = new Chart(ctx, { 
    type: 'bar', 
    data: data, 
    options: options 
});