잡히지 않은 TypeError : 정의되지 않은 'format'속성을 읽을 수 없습니다.

Question

chartjs 차트에서 숫자의 서식을 지정하려고합니다. 내 콘솔에서이 오류를 얻고있다 및 숫자 차트

Uncaught TypeError: Cannot read property 'format' of undefined

당신은 바이올린 here를 참조 할 수 있습니다에 표시되지 않습니다. 바이올린 당신은 new Chart 생성자 함수를 호출하기 전에 formatter을 선언해야

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

에 라인 (74)은, 그렇지 않은 경우는 options 당신이 new Chart의 두 번째 매개 변수로 전달하는 내부 undefined 될 것입니다.

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 
});