在 Y 轴上带有光标指针的 MouseOver答案

【问题标题】：MouseOver with Cursor Pointer on Y Axis在 Y 轴上带有光标指针的 MouseOver
【发布时间】：2015-06-10 14:56:51
【问题描述】：

以下实现在 y 轴标题标签上显示带有 cursor pointer 的 mouseover 事件。它工作正常。

但是，我也想在 y 轴（数字轴）上使用 cursor pointer 实现 mouseover 事件。

CURRENT IMPLEMENTATION

【问题讨论】：

这很难做到，因为数字轴由单个“g”SVG 元素组成。不过，您仍然可以实现在值上显示“手”指针。
其实我的意思是在 y 值上添加一个手形指针。

标签： javascript kendo-ui kendo-chart

【解决方案1】：

您可以对轴标签应用相同的颜色技巧：

valueAxis: {
    labels: {
        format: "N0",
        color: "rgba(60,60,60, 0.9995)"
    },

$(document).on("mouseover", '#chart text[fill="rgba(60,60,60, 0.9995)"]', function(){
    $('#chart text[fill="rgba(60,60,60, 0.9995)"]').css("cursor", "pointer");
});

更新DEMO

在本例中，我为标题和标签使用相同的颜色，您可以轻松地使用不同的颜色

【讨论】：

【解决方案2】：

如果您可以添加一些 id 或类，那很好，但是在您的代码中我找不到类，所以我使用了 stroke

 $(document).on("mouseover", '#chart text[stroke="none"]', function(){
               $('#chart text[stroke="none"]').css("cursor", "pointer");
             });

【讨论】：

嗨，Keval，它可以工作，但同时适用 x 和 y 轴。我赞成你的努力。如果我的代码有必要，您可以添加一个类。
你可以在上面添加id或class吗，因为在d3中我们可以添加id或class
不幸的是，KendoUI 还没有提供将类应用于图表组件。

【解决方案3】：

实际上有一个支持自定义视觉的选项：

categoryAxis: [{
labels: {
  color: "rgba(60,60,60, 0.9995)",
  visual: function(e) {
    var visual = e.createVisual();
    visual.options.cursor = 'pointer';
    return visual;
  }
}

}]

drawing.element.configuration.cursor

Runnable Dojo

【讨论】：