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

Question

当绘图图例上发生悬停事件时，我试图将光标从指针更改为默认值

   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 是一个应用于绘图矩形元素的类。获取元素并在图表上应用 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 = '';

        })