Angular 更改图表上的光标以进行zoom

发布于02月14日

我正在试图弄清楚如何更改图表上的默认光标(放大)，如何更改鼠标按下时的光标(调整大小)，以及如何将光标重置为鼠标向上(放大).所有这一切，都不会打破变焦的行为.

我声明图表选项中的zoom 以启用它:

chart: {
   zoomType : 'x',
},

变焦工作.但是如果我try 用这段代码改变光标，它似乎覆盖了zoom 行为，它不再工作了:

chart: {
   zoomType : 'x',
   events: {
     load: function () {
         const chart = this;
         chart.container.onmousedown = function () {
             chart.container.style.cursor = 'col-resize';
         };
         chart.container.onmouseup = function () {
             chart.container.style.cursor = 'zoom-in';
         };
     }
   }
}

默认光标的css部件:

.zoomableChart:hover {
    cursor: zoom-in;
}

推荐答案

@naren-murali 谢谢，根据你的回答，我写了这段代码:

<highcharts-chart [.......]
(mouseup)="onMouseUpChart($event)" (mousedown)="onMouseDownChart($event)" (mouseenter)="onMouseEnterChart($event)">
[....]
</highcharts-chart>

onMouseUpChart(event): void {
    event.srcElement.ownerSVGElement.style.cursor = 'zoom-in';
  }
onMouseDownChart(event): void {
    event.srcElement.ownerSVGElement.style.cursor = 'col-resize';
}
onMouseEnterChart(event): void {
    event.srcElement.querySelector('svg').style.cursor = 'zoom-in';
}

它部分起到了作用.我认为还剩下一个问题: