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

Posted 2023-04-14

【中文标题】ChartJS中showTooltips为false时如何添加逗号

【英文标题】：How to add commas when showTooltips is false in ChartJS

【发布时间】：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 请查看更新。

【参考方案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。