highcharts - 更改 Highcharts 中的光标

Question

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

这可能吗？

Answer 1

您可以使用内置方法 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 选项，创建矩形，它可以获得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/