我们能否在图表的轴上将长数字显示为1k，1M，1B？

Question

我的要求是在雷电图中的轴上显示长数字为1K，1M，1B。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9RWXpmVi5wbmcifQ==” alt =“在此处输入图像描述”>

Answer 1

欢迎您加入。

是的，有可能。在此处添加示例shorten方法，该方法实际上可以完成您所要求的操作，您可以根据需要对其进行改进。通过传递tick字段的回调来解决y-axis的问题。希望能有所帮助。

function shorten(n, d) {
  if (n < 1000) {
    return n + '';
  }
  if (n > 1e7) {
    return "10M+"
  }
  var x = ('' + n).length;
  var p = Math.pow;
  d = p(10, d);
  x -= x % 3;
  return Math.round(n * d / p(10, x)) / d + " KMBTPE" [x / 3];
}

const chartInstance = new Chart(ctx, {
  type: 'line',
  data: props.data,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          callback(value, index, values) {
            return shorten(value, 1);
          }
        },
      }],
    },
  },
});