javascript - 未捕获的类型错误 : Cannot read property 'format' of undefined

Question

我正在尝试格式化图表中的数字。我在控制台上收到此错误，并且图表上看不到数字

Uncaught TypeError: Cannot read property 'format' of undefined

可以引用 fiddle here 。 fiddle 第 74 行

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

您必须声明 formatter在调用 new Chart 之前构造函数，否则将是undefined里面options您作为 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
});