发生鼠标悬停事件时如何更改绘图上的光标？

Question

当 plotly 的图表图例上发生悬停事件时，我正在尝试将光标从指针更改为默认值

   legend: {
          cursor: "default",
        x: xLegenda,
        y: yLegenda,
        orientation: "h",
        font: {
          size: 12,
        },

Answer 1

没有确定在显示的绘图上应用 css 的属性，但总是有一个 hack 可以应用于显示的图表。按照以下所有步骤在悬停时应用 css。

 Plotly.newPlot('myDiv', data, layout);
    
 dragLayer = document.getElementsByClassName('nsewdrag')[0];

nswedrag 是一个应用于 plotly rect 元素的类。获取元素并在图形上应用 css。

var myPlot = document.getElementById('myDiv')
myPlot.on('plotly_hover', function(data){
          dragLayer.style.cursor = 'pointer'
        });

当图形点未悬停时删除类。

 myPlot.on('plotly_unhover', function(data){
          dragLayer.style.cursor = ''
        });

您还可以为重新布局添加其他功能。

 myPlot.on('plotly_relayout', function(data){
          console.log("relayout DATA " , data);
        });

角度

Plotly.newPlot('myDiv', this.data, this.layout);
        let dragLayer =<HTMLElement> document.getElementsByClassName('nsewdrag')[0];
        var myPlot = document.getElementById('myDiv')!

        myPlot.addEventListener("mouseenter", () => {
            // dragLayer["style"].cursor = 'pointer';
            dragLayer.style.cursor = 'pointer';
          })
          
        myPlot.addEventListener("mouseleave", () => {
            // dragLayer["style"].cursor = '';
            dragLayer.style.cursor = '';

        })