停止HighCharts增加悬停线的宽度

时间:2015-03-25 10:21:49

标签: javascript jquery html css highcharts

我正在使用最新版本的HighCharts来构建具有多种趋势的图表。默认情况下,当用户的鼠标悬停在线上时,HighCharts会增加线条的粗细/线宽。因为我可以在图表上有~10个趋势,我想删除此功能,这意味着线条的粗细在悬停时不会改变。

jsFiddle of code so far

我相信我需要在plotOptions {}部分设置它。我尝试添加以下内容但没有成功:

plotOptions: {
    series: {
        mouseOver: {
            lineWidth: 2
        }
    },
    marker: {
        enabled: false,
        states: {
            hover: {
                lineWidth: 2
            }
        }
    }
},

但是,我想保留表示鼠标所在位置的标记:

enter image description here

2 个答案:

答案 0 :(得分:10)

进行以下更改(将states鼠标悬停设置为禁用状态)

plotOptions: {
            series: {
                    lineWidth: 2,
                 states: {
                    hover: {
                        enabled: false
                    }
                }
            },

<强> DEMO


在这种情况下,make lineWidth:1表示悬停

plotOptions: {
            series: {
                    lineWidth: 2,
                 states: {
                    hover: {
                        lineWidth: 1
                    }
                }

<强> DEMO 2

答案 1 :(得分:6)

这里需要的是lineWidthPlus属性。

plotOptions: {
  series: {
    states: {
      hover: {
        lineWidthPlus: 0
     }
    }
  }
}

这样,无论你改变什么,图表都不会在悬停时改变lineWidth。

API参考:

你的小提琴更新了: