Question

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

这可能吗？

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选项创建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/

Answer 2

是的，这是可能的。您可以编写代码以在鼠标事件中设置光标样式。请在这里找到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");
                         }
                     }
                 }
             }
         },

     });
 });

在highcharts中更改光标

2 个答案: