代码之家 › 专栏 › 技术社区 › Blues Clues

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

chart.js javascript

-1

Blues Clues · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

1

Ana Liza Pandac 7 年前

你可以用 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 .