ChartJS如何设置与X轴刻度对齐的柱形宽度以高亮折线图区段

解决方案 #

方案1：使用chartjs-plugin-annotation插件（更推荐） #

这个插件是ChartJS官方维护的专门用于添加标注、高亮区块的工具，天生适配你要的任意X/Y轴范围高亮需求，不需要 hack 柱形宽度配置。

修改步骤：

1. 引入适配ChartJS 3.5.1的annotation插件
   在你的HTML的ChartJS引入标签后加一行：

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@1.4.0"></script>

2. 修改配置项，注册插件并添加高亮区块：
   注意：ChartJS 3.x版本网格线配置字段为grid，不是你代码里的gridLines，需要同步修正

const data = {
    datasets: [
        // 可以去掉原来的柱形数据集，不需要用柱形实现高亮
        {
            label: 'Line',
            data: lineData,
            borderColor: '#FFDE03',
            backgroundColor: '#FFDE03',
            borderWidth: 2,
            pointRadius: 0,
            fill: false
        }]
}

const config = {
    type: 'line',
    data: data,
    // 注册插件
    plugins: [ChartAnnotation],
    options: {
        parsing: false,
        normalized: true,
        scales: {
            xAxes: {
                type: 'linear',
                grid: {
                    display: true,
                    color: "#555"
                },
                position: 'bottom'
            },
            yAxis: {
                min: 0,
                max: lineData.reduce(function (prev, curr) { return prev.y > curr.y ? prev : curr; })["y"],
                grid: {
                    display: true,
                    color: "#555"
                }
            }
        },
        plugins: {
            // 配置高亮区块
            annotation: {
                annotations: {
                    highlightArea: {
                        type: 'box',
                        // 直接指定X轴范围，和你要求的完全一致
                        xMin: 20,
                        xMax: 40,
                        yMin: 0,
                        // 自动适配Y轴最大值
                        yMax: lineData.reduce(function (prev, curr) { return prev.y > curr.y ? prev : curr; })["y"],
                        backgroundColor: 'rgba(0, 0, 255, 0.4)',
                        borderWidth: 0
                    }
                }
            }
        }
    }
};

方案2：坚持用柱形实现，动态计算宽度 #

如果你一定要用柱形叠加的方式，可以通过监听图表渲染/缩放事件，动态计算柱形的像素宽度：

const config = {
    type: 'line',
    data: data,
    options: {
        // 其他原有配置不变，修正grid字段后添加以下回调
        onResize: function(chart) {
            const xScale = chart.scales.xAxes;
            // 计算每个X轴单位对应的像素宽度
            const unitPx = xScale.width / (xScale.max - xScale.min);
            // 20到40跨度是20个X单位，直接计算对应像素厚度
            chart.data.datasets[0].barThickness = 20 * unitPx;
            chart.update();
        }
    }
};
// 首次渲染后也执行一次计算
myChart.options.onResize(myChart);

注意：

你的原barData的x值要设为目标范围的中点，比如20到40的中点是30，柱形就会自动向左右延伸覆盖整个范围。

效果示意图：

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