未捕获的TypeError：无法读取未定义的属性“格式”

Question

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

未捕获的TypeError：无法读取未定义的属性“格式”

您可以在这里参考小提琴。 小提琴上的第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

您必须在调用new Chart构造函数之前声明formatter ，否则它将在您作为new Chart的第二个参数传递的options内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
});