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

【问题标题】：How to add commas when showTooltips is false in ChartJSChartJS中showTooltips为false时如何添加逗号
【发布时间】：2019-01-16 03:48:05
【问题描述】：

我正在尝试为 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);
                        }
                    }
                });
            }
        }
    }
}

【问题讨论】：

数据是用来表示度量或计数的，整数值怎么能包含,？
如果您不使用工具提示，那么您希望在其中显示数据并附加,。
@KunalKhivensara 请查看更新。

标签： javascript chart.js

【解决方案1】：

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

将您的animation 选项下的onComplete 函数修改为此。

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。

【讨论】：