Chart.js v3.8：如何增加多折线图表中折线的间距？

我正在使用Chart.js v3.8版本，当前多折线图的折线重叠严重，希望实现折线间有明显间距的效果。

现有代码 #

JavaScript代码：

function createLineGraph(chartObject,chartId,data,labels,xLabel,yLabel) {
    // Create a new Chart.js instance
    var ctx = document.getElementById(chartId).getContext('2d');
    chartObject = new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: data
      },
  
      options: {
        responsive: true,
        scales: {
            x: {
              ticks:{
                  display: true,
                  autoSkip: true,
                  maxTicksLimit: 10,
              },
                title: {
                    display: true,
                    text: xLabel
                  },
                grid: {
                    display: false,
                    text: xLabel
                }
            },
            y: {
                  beginAtZero: true,
                  min: 0,
                  max: 200,
                  ticks: {
                    tickSpacing: 50,
                    autoSkip:true,
                  },
                  title: {
                      display: true,
                      text: yLabel
                    },
                  grid: {
                  display: false,                
              }
            }
          }
      }
    });
    chartObject.update();
  }

HTML代码：

<canvas id="chart"></canvas>

当前效果与理想效果 #

当前显示效果：

期望的理想效果：

解决方案 #

要实现折线间的间距，核心是给每个数据集添加offset属性，让不同折线的点在x轴上产生偏移，从而拉开间距。具体操作如下：

• 给单个数据集手动设置偏移：在传入createLineGraph的data数组中，为每个数据集对象添加offset属性，设置不同的正负偏移值（数值大小可根据图表尺寸调整）。示例：

const sampleDatasets = [
  {
    label: '折线1',
    data: [40, 60, 80, 100],
    borderColor: '#FF6384',
    offset: -15 // 向左偏移15像素
  },
  {
    label: '折线2',
    data: [50, 70, 90, 110],
    borderColor: '#36A2EB',
    offset: 0 // 不偏移
  },
  {
    label: '折线3',
    data: [60, 80, 100, 120],
    borderColor: '#FFCE56',
    offset: 15 // 向右偏移15像素
  }
];

• 动态计算偏移值：如果数据集数量不固定，可以根据数据集数量动态分配偏移量，让折线均匀分布：

const datasetCount = sampleDatasets.length;
const baseOffset = 20; // 基础偏移量，可根据图表大小调整
sampleDatasets.forEach((dataset, index) => {
  // 让中间的折线居中，左右折线向两侧偏移
  dataset.offset = (index - (datasetCount - 1) / 2) * baseOffset;
});

offset属性是Chart.js v3及以上版本支持的特性，它会让折线的每个数据点在x轴方向上偏移指定像素，完美解决折线重叠问题，实现你想要的间距效果。

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