highCharts 柱状图/折线图鼠标悬浮高亮

博主：林安
发布时间：2024 年 11 月 21 日
409 次浏览
4 条评论
1175字数
分类： Charts

// 矩形透明蒙版和准星线只能同时存在一种

显示矩形透明蒙版

xAxis: {
    ...
    crosshair: true
},
plotOptions: {
    column: {
        pointWidth: 30,
        pointPadding: 0.3,
        borderWidth: 0,
        states: {
            hover: {
                enabled: true,
                opacity: 0.7 // 设置悬停时的透明度
            }
        }
    }
},
series: [{
    name: '销量',
    data: data,
    states: {
        hover: {
            enabled: true,
            color: 'rgba(255, 165, 0, 0.5)' // 悬停时的颜色，使用 rgba 实现透明效果
        }
    }
}],

显示十字准星线

xAxis: {
    ...,
    crosshair: {
        width: 2,
        color: 'red', // 交叉线颜色
        dashStyle: 'ShortDash', // 交叉线样式
        zIndex: 999
    }
},
yAxis: {
    ...,
    crosshair: {
        width: 2,
        color: 'red', // 交叉线颜色
        dashStyle: 'ShortDash', // 交叉线样式
        zIndex: 999
    }
},

配置自动轮播

let cur = 0
setInterval(() => {
    // 每次清除鼠标移入效果，防止用户鼠标移入导致样式错乱
    if (cur > 0) {
        hChart.series[0].data[cur - 1].onMouseOut(); 
    }
    hChart.series[0].data[cur].onMouseOver();
    cur++
    if(cur==data.length)cur=0
}, 2000);

最后修改：2024 年 11 月 21 日