highcharts - 在highcharts中更改光标

highcharts - 在highcharts中更改光标,第1张

当光标在高图图表的图表区域上方时,我希望光标是十字准线,向用户表明他们可以放大。但是,我不希望光标成为十字准线。在其他领域,如图例或轴。

这可能吗?

最佳答案:

2 个答案:

答案 0 :(得分:3)

您可以使用内置方法chart.isInsidePlot(plotX, plotY)。示例:http://jsfiddle.net/2eje4xxb/1/

代码示例:

container.on("mousemove", function (event) {
    var chart = container.highcharts();
    if (chart.isInsidePlot(event.pageX - chart.plotLeft, event.pageY - chart.plotTop)) {
        $("body").css({
            cursor: "crosshair"
        });
    } else {
        $("body").css({
            cursor: "default"
        });
    }
});

另一个想法是利用chart.plotBackgroundColor选项创建rect,它可以获得CSS样式:

    chart: {
        zoomType: 'x',
        plotBackgroundColor: "rgba(10,0,0,0)", // dummy color, to create an element
        events: {
            load: function(){
                if(this.plotBackground) {
                    this.plotBackground.toFront().css({ // move on top to get all events
                        cursor: "crosshair"  
                    });
                }
            }
        }
    },

并演示:http://jsfiddle.net/2eje4xxb/2/

答案 1 :(得分:0)

是的,这是可能的。您可以编写代码以在鼠标事件中设置光标样式。 请在这里找到jsfiddle - http://jsfiddle.net/3Lu7bzmn/5/

<强> CSS

.cursorCrossHair{
    cursor : crosshair
}
.cursorDefault{
    cursor : default
}

JS - 仅显示更改光标所需的特定代码段。用于呈现highcharts的div的id称为“container”。请参阅jsfiddle以查看完整的工作示例。

$('#container').highcharts({
     chart: {
         plotOptions: {
             series: {
                 point: {
                     events: {
                         mouseOver: function () {
                             $("#container").removeClass("cursorDefault").addClass("cursorCrossHair");
                         },
                         mouseOut: function () {
                             $("#container").removeClass("cursorCrossHair").addClass("cursorDefault");
                         }
                     }
                 }
             }
         },

     });
 });
本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复