Javascript Highcharts：更改绘图区域的光标

向用户提示图表可缩放的好方法是什么？我将图表设置为可缩放（

chart:{zoomType:'xy'}

），现在我想通过更改绘图区域（仅绘图区域）的光标来向用户发出信号

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

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

我想做相反的事情：只更改背景/绘图区域。

---

不是实际的图形。不是传说。不在轴线之外，等等。

将缩放类型添加到主图表部分

zoomType:'xy'

没有为背景更改光标的选项。我知道，您可以为图形元素更改光标

下面是一个小提琴的例子： 请记住，您必须选择要放大的区域（类似于您在桌面上所做的选择，无论您使用的是哪个操作系统）

代码：

---

Fiddle:

将zoomTypeatribute添加到主图表部分

zoomType:'xy'

没有为背景更改光标的选项。我知道，您可以为图形元素更改光标

下面是一个小提琴的例子： 请记住，您必须选择要放大的区域（类似于您在桌面上所做的选择，无论您使用的是哪个操作系统）

代码：

---

Fiddle:

所以，这不是真正的问题，但因为我不知道像OP要求的那样的选项，我决定给出我的想法，告诉用户图表是可缩放的，因为这个问题实际上已经提出了

我认为这通常取决于用户和图表将使用的上下文，但我喜欢使用文本，因为保持简单，几乎没有误解的余地

在Highcharts中，我们可以用许多不同的方式渲染容器中的元素，但为此，我选择了标签，因为我认为它很好

TEXT = chart.renderer.label('Click points to zoom', 70, 50, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
        .css({
            color: '#FFFFFF'
        })
        .attr({
            fill: 'rgba(0, 0, 0, 0.75)',
            padding: 8,
            r: 5,
            zIndex: 6
        });
        TEXT.add();

有了这个，我们在左上角得到了一个框，它告诉用户可以单击点进行缩放。现在，我们不希望它一直在那里-那很烦人。因此，我们编写了一个函数，在单击容器时将其删除

$('#chart-container').bind('mousedown', function () {
            TEXT.destroy();
        });

---

Fiddle:

所以，这不是真正的问题，但因为我不知道像OP要求的那样的选项，我决定给出我的想法，告诉用户图表是可缩放的，因为这个问题实际上已经提出了

我认为这通常取决于用户和图表将使用的上下文，但我喜欢使用文本，因为保持简单，几乎没有误解的余地

在Highcharts中，我们可以用许多不同的方式渲染容器中的元素，但为此，我选择了标签，因为我认为它很好

TEXT = chart.renderer.label('Click points to zoom', 70, 50, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
        .css({
            color: '#FFFFFF'
        })
        .attr({
            fill: 'rgba(0, 0, 0, 0.75)',
            padding: 8,
            r: 5,
            zIndex: 6
        });
        TEXT.add();

有了这个，我们在左上角得到了一个框，它告诉用户可以单击点进行缩放。现在，我们不希望它一直在那里-那很烦人。因此，我们编写了一个函数，在单击容器时将其删除

$('#chart-container').bind('mousedown', function () {
            TEXT.destroy();
        });

小提琴：你可以改变背景的光标。 您可以使用highcharts中包含的SVGElement.prototype.htlmCss（）函数。调用它的一种方法是使用on load事件：

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

这里的例子

我用Highcharts JS v4.1.8测试了它

编辑#1

您应该如下设置背景属性：

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

编辑#2

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

$（“#容器”）.mousemove（函数（e）{
var cPos=$（this）.position（），
xPos=e.pageX-cPos.left，
yPos=e.pageY-cPos.top，
HC=$（this.highcharts（）；
如果（yPos>HC.plotTop&&yPos<（HC.plotTop+HC.plotHeight）&&
xPos>HC.plotLeft&&xPos<（HC.plotLeft+HC.plotWidth））{
htmlCss（{光标：'zoom-in'}）；
}否则{
HC.chartBackground.htmlCss（{cursor:'}）；
}
});

通过使用chartBackground.htmlCss（）函数，您可以确保它仅设置为背景，如果您将鼠标悬停在序列、图形等上方，则不会设置。您可以更改背景的光标。 您可以使用highcharts中包含的SVGElement.prototype.htlmCss（）函数。调用它的一种方法是使用on load事件：

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

这里的例子

我用Highcharts JS v4.1.8测试了它

编辑#1

您应该如下设置背景属性：

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

编辑#2

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

$（“#容器”）.mousemove（函数（e）{
var cPos=$（this）.position（），
xPos=e.pageX-cPos.left，
yPos=e.pageY-cPos.top，
HC=$（this.highcharts（）；
如果（yPos>HC.plotTop&&yPos<（HC.plotTop+HC.plotHeight）&&
xPos>HC.plotLeft&&xPos<（HC.plotLeft+HC.plotWidth））{
htmlCss（{光标：'zoom-in'}）；
}否则{
HC.chartBackground.htmlCss（{cursor:'}）；
}
});

---

通过使用chartBackground.htmlCss（）函数，您可以确保它仅设置为背景，而不是在系列、图形等上方悬停。

多亏了Luxx的帮助，我找到了一种更简单的方法来实现这一点

chart: {
  // ...
  backgroundColor: "transparent",
  plotBackgroundColor: "transparent", // Needs to be set for chart.plotBackground to be defined.
  zoomType: "xy",
  events: {
    load: function() { this.plotBackground.htmlCss({ cursor: "zoom-in" }) }
  }
}

示例：

多亏了勒克斯