在ChartJS中showTooltips为false时如何添加逗号

Question

我正在尝试为chartJS中的数据添加逗号。我已经尝试过一些代码，例如此线程中的内容：Chart.js number format。但是他们在这里使用工具提示；我的设置未使用工具提示。

请在下面查看我的代码。

options: {
        events: false,
        showTooltips: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    userCallback: function(value, index, values){
                        value = value.toString();
                        value = value.split(/(?=(?:...)*$)/);
                        value = value.join(',');
                        return value;
                    }
                }
            }]
        },
        legend: {
            display: displayLegend
        },
        animation: {
            duration: 0,
            onComplete: function(){
                var ctx = this.chart.ctx;
                ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                ctx.textAlign = 'center';
                ctx.textBaseLine = 'bottom';
                ctx.fillStyle = '#0b7707';

                this.data.datasets.forEach(function(dataset){
                    console.log(dataset);
                    for(var i = 0; i < dataset.data.length; i++){
                        for(var key in dataset._meta){
                            var model = dataset._meta[key].data[i]._model;
                            ctx.fillText(dataset.data[i], model.x, model.y - 13);
                        }
                    }
                });
            }
        }
    }
}

Answer 1

您可以使用toLocaleString将条形标签（即数字）转换为逗号分隔的字符串。

在您的onComplete选项下修改animation函数。

onComplete: function(){
  var ctx = this.chart.ctx;
  ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
  ctx.textAlign = 'center';
  ctx.textBaseLine = 'bottom';
  ctx.fillStyle = '#0b7707';

  this.data.datasets.forEach(function(dataset){
      for(var i = 0; i < dataset.data.length; i++){
          for(var key in dataset._meta){
              var model = dataset._meta[key].data[i]._model;
              // convert number to comma-separated format
              ctx.fillText(dataset.data[i].toLocaleString(), model.x, model.y - 13);
          }
      }
  });
}

请参见working example。