当鼠标移动到x轴[类别]时，如何在高图表中对x-Axis[Cateogories]进行鼠标操作

Question

当您在x轴类别上滑鼠时，如何在高图表中做x轴类别上的滑鼠.

plotOptions: {
  areaspline: {
        fillOpacity: 0.5
    },

    series: {

        point: {
            events: {
                mouseOver: function() {
                    //alert ('Category: '+ this.category +', value: '+ this.y);
                    var res = this.category;

                    console.log(res);
                    var chart = Highcharts.charts[0];

                    //var first_set = this.getSpecificData(res);
                    data = [];
                    for (var i = 0; i < chart.series.length; i++) {

                        for (var j = 0; j < chart.series[i].points.length; j++){
                                if(j == res)
                                {
                                    //console.log(chart.series[i].points[j].y);
                                    data.push(chart.series[i].points[j].y)
                                }

                            }



                    }
                    maximum_value = (Math.max.apply(Math, data));
                    for (var k = 0; k < data.length; k++) {
                        if( data[k] == maximum_value )
                        {
                            //console.log("Kvalue:"+k);
                            first_set = k;
                        }

                    }

                    var point = chart.series[first_set].data[res];
                    var x = point.plotX + chart.plotLeft;
                    var y = point.plotY + chart.plotTop;
                    var height =(chart.plotHeight-point.plotY); //want height of the point!
                    chart.renderer.rect(x, y, 3, height, 0).attr({fill: 'orange', zIndex:3,id:'mychart'}).add();


                },
                mouseOut: function(e){
                $("#mychart").remove();

                }
            }
        }
    }
},
This is my jsfiddle: [click here][1]

我想鼠标过去和鼠标出来时，我鼠标对X轴类别，即，week0，Week1，Week2.Week7。现在，Mouserover只为布线图和图表上的绘图点添加，谢谢预先1：http://jsfiddle.net/VhMjv/7/

Answer 1

对于在xAxis类别上有mouseover和mouseleave事件，您可以如下所示

步骤1：

从useHTML : true标签中设置xAxis，并在xAxis标签格式化程序中返回带有类的div

xAxis: {
    labels: {
        useHTML: true,
        formatter: function () {
            return "<div class='xLabels'> Week " + this.value + "</div>"; // clean, unformatted number for year
        }
    }
}

步骤2：

现在您已经将div放在图表中，编写一个jquery事件来处理mouseover和mouseleave。

$(".xLabels").mouseover(function() {
    alert("mouse Entered")
})
$(".xLabels").mouseleave(function() {
    alert("mouse Left")
})

更新你的小提琴这里

希望这能帮到你

Answer 2

另外的解决方案是使用自定义事件插件，它允许捕获图表元素上的事件。