javascript - Highcharts:更改绘图区域的光标

Question

向用户提示图表可缩放的好方法是什么？我使图表可缩放(chart: { zoomType: 'xy' })，现在我想通过更改绘图区域(以及仅绘图区域)的光标向用户发出信号。

可以通过以下方式更改系列/实际图表的光标:

plotOptions: {
  series: {
    cursor: 'zoom-in'
  }
}

我想做相反的事情:只为背景/绘图区域更改它。
不是实际的图表。不是传说。不超出轴线等

Answer 1

您可以更改背景的光标。您可以使用 highcharts 中包含的 SVGElement.prototype.htlmCss() 函数。调用它的一种方法是使用 on-load 事件:

chart: {
    /* some other code */
    events: {
        load: function () {
            this.chartBackground.htmlCss({cursor:'zoom-in'});
        }
    }
}

此处示例 http://jsfiddle.net/84ek687h/2/

我用 Highcharts JS v4.1.8 测试了它

编辑#1

你应该像这样设置背景属性:

chart:{
    zoomType: 'xy',
    style:{
      cursor:'zoom-in'
    }
 }

编辑 #2

正如您在评论中提到的，问题是绘图区域没有填满整个容器区域。为此，您可能不得不完全放弃 Hichcharts 选项。一种解决方案是使用 Highcharts 的 plotTop 、 plotLeft 、 plotHeight 和 plotWidth 变量并构建您自己的解决方案。我要给出的解决方案草案是使用 jQuery 的: http://jsfiddle.net/84ek687h/5/

$('#container').mousemove(function(e){
        var cPos = $(this).position(),
            xPos = e.pageX-cPos.left,
            yPos = e.pageY-cPos.top,
            HC   = $(this).highcharts();
        if(yPos > HC.plotTop  && yPos < (HC.plotTop +HC.plotHeight) &&
           xPos > HC.plotLeft && xPos < (HC.plotLeft+HC.plotWidth ) ){
            HC.chartBackground.htmlCss({cursor:'zoom-in'});
        }else{
            HC.chartBackground.htmlCss({cursor:''});
        }
    });

通过使用 chartBackground.htmlCss() 函数，您可以确保它只设置为背景，而不是当您将鼠标悬停在系列、图表等上方时。