Highcharts柱形图+折线图需求：折线需从柱形首尾边界起始

没问题，我帮你调整折线的起始和结束位置，让它从第一个柱形的左侧边界开始，一直延伸到最后一个柱形的右侧边界。

核心思路 #

默认情况下，折线的点会对齐柱形的中心（也就是分类轴的刻度位置）。要让折线延伸到柱形边界，我们需要给折线系列添加两个额外的数据点：

• 第一个点对应第一个柱形的左侧边界（x值为 -0.5），y值和第一个温度值完全一致
• 最后一个点对应最后一个柱形的右侧边界（x值为 数据总长度 - 0.5），y值和最后一个温度值完全一致

修改后的完整代码示例 #

Highcharts.chart('container', {
    title: {
        text: 'Monthly Average Rainfall and Temperature'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: [{
        title: {
            text: 'Temperature (°C)'
        }
    }, {
        title: {
            text: 'Rainfall (mm)'
        },
        opposite: true
    }],
    series: [{
        name: 'Rainfall',
        type: 'column',
        yAxis: 1,
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        tooltip: {
            valueSuffix: ' mm'
        }
    }, {
        name: 'Temperature',
        type: 'line',
        // 调整折线数据：添加首尾边界点
        data: [
            {x: -0.5, y: 7.0}, // 第一个柱左边界
            7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6,
            {x: 11.5, y: 9.6} // 最后一个柱右边界
        ],
        tooltip: {
            valueSuffix: ' °C'
        }
    }]
});

更通用的动态写法 #

如果你的数据是动态加载的，可以用代码自动计算边界点，避免硬编码：

// 假设温度数据存在tempData变量中
const tempData = [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6];
const extendedTempData = [
    {x: -0.5, y: tempData[0]},
    ...tempData,
    {x: tempData.length - 0.5, y: tempData[tempData.length - 1]}
];

// 然后把extendedTempData赋值给折线系列的data即可

这样不管你的数据有多少个点，折线都会自动延伸到首尾柱形的边界啦！

内容的提问来源于stack exchange，提问作者Php Symfony Guru