Question

我正在使用Chart.js为客户制作一个简单的折线图，但是显示的值都在数百万以上，这使得标签在图表中占据了大量空间，如下所示：

例如，我想缩短标签以显示M而不是六个0。

我已经查看了文档，但没有发现任何此类内容。

Answer 1

您可以覆盖https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats

中所述的ticks.callback方法

例如，将y轴零缩写为'M'：

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    // Abbreviate the millions
                    callback: function(value, index, values) {
                        return value / 1e6 + 'M';
                    }
                }
            }]
        }
    }
});

我的小提琴：https://jsfiddle.net/robhirstio/hsvxbjkg/17/

Answer 2

为k, M, B and T添加交流功能

function commarize(min) {
  min = min || 1e3;
  // Alter numbers larger than 1k
  if (this >= min) {
    var units = ["k", "M", "B", "T"];

    var order = Math.floor(Math.log(this) / Math.log(1000));

    var unitname = units[(order - 1)];
    var num = Math.floor(this / 1000 ** order);

    // output number remainder + unitname
    return num + unitname
  }

  // return formatted original number
  return this.toLocaleString()
}

在图表JS中，您可以使用配置属性ticks到yAxes

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, values) {
                        return String(value).commarize(); 
                    }
                }
            }]
        }
    }
});

图表JS参考https://www.chartjs.org/docs/latest/axes/labelling.html 整理参考文献https://gist.github.com/MartinMuzatko/1060fe584d17c7b9ca6e

缩短Charts.js中的数字标签

2 个答案: