Chart.js：如何随滚动位置调整图例X轴位置以保持可见

要实现图例随容器滚动始终可见的效果，核心思路是将Chart.js默认绘制在Canvas内的图例分离为独立DOM元素，通过监听滚动事件控制其位置，具体步骤如下：

步骤1：调整HTML结构，新增独立图例容器 #

在滚动容器内新增一个单独的图例容器，避免图例被Canvas的滚动区域带偏：

<div id="chart-container" style="position:relative; width: 200px; overflow-x: scroll; margin-top: 40px;">
    <!-- 独立图例容器 -->
    <div id="chart-legend" style="position: absolute; top: 0; left: 0;"></div>
    <canvas id="myChart" style="height:35vh" ></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

步骤2：禁用内置图例，自定义生成图例 #

关闭Chart.js自带的图例渲染，用它提供的generateLegend()方法生成图例HTML，插入到独立容器中：

var chartData = {
    labels: [0,1,2,3,4,5,6,7,8,9],
    datasets: [
        {
            label: "Testing",
            data: [10,30,20,10,40,50,70,100,30,20],
            borderColor: "blue",
        },
    ]
};

var chartOptions = {
    maintainAspectRatio: false,
    responsive: false,
    legend: {
        display: false // 关闭内置图例
    }
};

// 创建图表
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
    type: "line",
    data: chartData,
    options: chartOptions,
});

// 将生成的图例插入独立容器
document.getElementById('chart-legend').innerHTML = myChart.generateLegend();

步骤3：监听滚动事件，固定图例位置 #

给滚动容器绑定scroll事件，通过调整图例的left值，抵消容器滚动带来的偏移，让图例始终停在可视区域：

var container = document.getElementById('chart-container');
var legend = document.getElementById('chart-legend');

container.addEventListener('scroll', function() {
    // 让图例left值等于容器滚动偏移量，保持在容器左上角可见
    legend.style.left = this.scrollLeft + 'px';
});

补充：美化自定义图例 #

Chart.js生成的图例自带默认类名，可添加CSS优化样式：

#chart-legend {
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
}

#chart-legend .chart-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

#chart-legend .chart-legend-item-color {
    width: 16px;
    height: 16px;
    display: inline-block;
    border-radius: 2px;
}

这样处理后，无论横向滚动容器到哪个位置，图例都会始终显示在容器的可视区域左上角，不会被滚动隐藏。

内容的提问来源于stack exchange，提问作者Døner M.