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轴类别上时，我希望将鼠标移开并鼠标移出，即，第0周，第1周，第2周......第7周。现在，仅为绘图线和图表上的绘图点添加Mouserover 提前致谢 [1]：http://jsfiddle.net/VhMjv/7/

Answer 1

有关xAxis类别上的mouseover和mouseleave事件，您可以按照以下步骤进行操作

第1步：

从xAxis标签设置useHTML : true并在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")
})

更新了你的小提琴here

希望这会对你有所帮助

Answer 2

其他解决方案是使用custom events插件，该插件允许捕获图表元素上的事件。

将鼠标悬停在x轴上时，如何将鼠标悬停在Highcharts中的x轴[类别] [类别]

2 个答案: