如何在Chart.js中将基线值从0修改为50并适配填充效果？

Chart.js没有直接设置填充基线的内置选项，但可以通过两种实用方法实现你要的以50为基线填充的效果：

方法一：数据偏移转换法 #

核心思路是把0-100范围的原始数据转换成以0为中心的偏移数据（每个数值减50），让默认的0基线对应原始数据的50，再通过轴刻度回调还原显示原始范围。

代码示例 #

// 生成0-100范围的正弦波数据
const originalData = Array.from({length: 100}, (_, i) => 50 + 50 * Math.sin(i * 0.1));
// 转换为以0为中心的偏移数据
const shiftedData = originalData.map(val => val - 50);

new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: Array.from({length: 100}, (_, i) => i),
    datasets: [{
      label: '正弦波（基线50）',
      data: shiftedData,
      borderColor: 'rgb(75, 192, 192)',
      fill: true,
      backgroundColor: 'rgba(75, 192, 192, 0.2)'
    }]
  },
  options: {
    scales: {
      y: {
        ticks: {
          // 将偏移后的刻度值转回原始0-100范围
          callback: val => val + 50
        },
        min: -50,
        max: 50
      }
    },
    plugins: {
      tooltip: {
        callbacks: {
          // 工具提示中显示原始数值
          label: ctx => `数值: ${ctx.parsed.y + 50}`
        }
      }
    }
  }
});

优势：实现简单，无需额外插件，兼容性好。

方法二：自定义插件绘制法 #

通过Chart.js的自定义插件，在绘制阶段手动修改填充路径，直接以50为基线填充，无需修改原始数据。

代码示例 #

const baselineFillPlugin = {
  afterDatasetDraw: chart => {
    const ctx = chart.ctx;
    const dataset = chart.data.datasets[0];
    const yScale = chart.scales.y;
    // 计算基线50对应的画布像素位置
    const baselineY = yScale.getPixelForValue(50);

    ctx.save();
    ctx.fillStyle = dataset.backgroundColor;
    ctx.beginPath();

    // 连接数据点与基线形成填充区域
    dataset.data.forEach((_, index) => {
      const point = chart.getDatasetMeta(0).data[index];
      index === 0 ? ctx.moveTo(point.x, baselineY) : ctx.lineTo(point.x, point.y);
    });

    // 闭合路径并填充
    const lastPoint = chart.getDatasetMeta(0).data[dataset.data.length - 1];
    ctx.lineTo(lastPoint.x, baselineY);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  }
};

new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: Array.from({length: 100}, (_, i) => i),
    datasets: [{
      label: '正弦波（基线50）',
      data: Array.from({length: 100}, (_, i) => 50 + 50 * Math.sin(i * 0.1)),
      borderColor: 'rgb(75, 192, 192)',
      fill: false, // 关闭默认填充，使用自定义插件
      backgroundColor: 'rgba(75, 192, 192, 0.2)'
    }]
  },
  options: {
    scales: {
      y: {
        min: 0,
        max: 100
      }
    }
  },
  plugins: [baselineFillPlugin]
});

优势：无需修改原始数据，适合需要保留原始数据结构的场景。

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