如何在Chart.js 2.9.3中设置x轴对数刻度显示普通数字并解决数值重叠问题

解决方案 #

以下两个修改可以同时解决你遇到的刻度格式和数据点重叠问题：

1. 修复x轴刻度科学计数法问题

在x轴配置中添加ticks.callback回调，将对数刻度值转换为普通数字格式显示。

2. 修复数据点重叠问题

首先确认你传入的chartData数据集格式符合对数轴要求：

• 数据集需要使用[{x: 数值, y: 数值}]的对象格式，不能使用一维数组
• x值必须为纯数值类型，不能是字符串
• 不能包含x=0的数值（对数刻度中0无意义，会导致渲染异常）

修改后完整代码 #

/* eslint-disable */
import { Line, mixins } from 'vue-chartjs';

Chart.plugins.register({
  beforeDraw: function (chartInstance) {
    const { ctx } = chartInstance.chart;
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, chartInstance.chart.width, chartInstance.chart.height);
  }
});

const { reactiveProp } = mixins;

export default {
  extends: Line,
  mixins: [reactiveProp],
  data() {
    return {
      options: {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
          display: false,
          position: 'bottom',
        },
        scales: {
          yAxes: [
            {
              ticks: {
                suggestedMin: 0,
                callback(tick) {
                  return `${tick}%`;
                },
              },
            },
          ],
          xAxes: [
            {
              display: true,
              type: "logarithmic",
              // 新增ticks配置解决科学计数法问题
              ticks: {
                callback(value) {
                  // 直接转换为普通数字字符串，可按需替换为toLocaleString()实现千分分隔
                  return Number(value).toString();
                }
              }
            }
          ]
        },
        tooltips: {
          callbacks: {
            label(tooltipItem, data) {
              const dataset = data.datasets[tooltipItem.datasetIndex];
              const currentValue = dataset.data[tooltipItem.index];
              return `${currentValue} %`;
            },
          },
        },
      },
    };
  },
  mounted() {
    this.renderChart(this.chartData, this.options);
  },
};

/* eslint-enable */

正确数据集示例 #

参考如下格式构造你的chartData即可避免数据点重叠：

this.chartData = {
  datasets: [
    {
      borderColor: '#1890ff',
      fill: false,
      data: [
        { x: 1, y: 8 },
        { x: 5, y: 15 },
        { x: 20, y: 27 },
        { x: 100, y: 42 },
        { x: 500, y: 35 },
        { x: 1000, y: 48 }
      ]
    }
  ]
}

内容的提问来源于stack exchange，提问作者Bulchsu