Question

我正在使用ChartJs和datalabels插件，我想将鼠标光标添加到图表中的指针上，这有可能吗？

我一直在跟踪official网站的示例，有人可以帮我吗？

data: {
  datasets: [{
    datalabels: {
      listeners: {
        click: function(context) {
          console.log('label ' + context.dataIndex + ' has been clicked!');
        }
      }
    }
  }, {
      //...
  }]
},
options: {
  plugins: {
    datalabels: {
      listeners: {
        enter: function(context) {
          context.hovered = true;
          return true;
        },
        leave: function(context) {
          // Receives `leave` events for any labels of any dataset.
          context.hovered = false;
          return true;
        }
      },
      color: function(context) {
        // Change the label text color based on our new `hovered` context value.
        return context.hovered ? "blue" : "gray";
      }
    }
  }
}

Answer 1

您可以这样做。将鼠标悬停在特定标签上并将光标更改为指针时。

 listeners: {
                enter: function(context) {

                  context.hovered = true;
                  var el = document.getElementById("myLineChart");
                  el.style.cursor = "pointer";
                  return true;
                },
                leave: function(context) {
                  context.hovered = false;
                  var el = document.getElementById("myLineChart");
                  el.style.cursor = "default";
                  return true;
                },
              },

在停止悬停标签时重置。希望对您有帮助。

将鼠标光标更改为图表js中的指针

1 个答案: