Chart.js 如何仅放大Y轴0-10区间的显示精度以展示全部分度值

架构老林

2026-10-15

实现方案

通过Y轴刻度配置+数值映射的方式即可实现需求，无需额外插件，兼容Chart.js v3/v4所有主流版本，修改后的完整代码如下：

const data = {
  labels: dates,
  datasets: [{
    label: 'SIS',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    // 大于10的数值做压缩映射，实现0-10区间放大2倍效果
    data: sis_data.map(val => val > 10 ? 10 + (val - 10)/2 : val),
  },
  {
    label: 'Mood',
    backgroundColor: 'rgb(99, 255, 132)',
    borderColor: 'rgb(99, 255, 132)',
    data: mood_data.map(val => val > 10 ? 10 + (val - 10)/2 : val),
  },
  {
    label: 'Sleep',
    backgroundColor: 'rgb(99, 132, 255)',
    borderColor: 'rgb(99, 132, 255)',
    data: sleep_data.map(val => val > 10 ? 10 + (val - 10)/2 : val),
  }]
};

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      y: {
        min: 0,
        ticks: {
          // 步长设为1，保证0-10区间每个整数都作为独立刻度展示
          stepSize: 1,
          // 刻度回调还原真实数值
          callback: function(tickVal) {
            return tickVal > 10 ? Math.round(10 + (tickVal - 10)*2) : tickVal
          }
        }
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          // 悬浮提示还原真实数值
          label: function(context) {
            let rawVal = context.parsed.y
            rawVal = rawVal > 10 ? Math.round(10 + (rawVal - 10)*2) : rawVal
            return `${context.dataset.label}: ${rawVal}`
          }
        }
      }
    }
  }
};

var myChart = new Chart(
    document.getElementById('myChart'),
    config
);