2

我有一个 Kendo UI Datavis 条形图，我希望在将鼠标悬停在图表中的条形和这些条形的标签上时显示指针（手）光标。当移出图表中的条形时，光标应返回到标准箭头指针。

我注意到当悬停在轴标签（左、右和底部）和图例上时，光标变成了文本光标。因此，除了上述内容之外，我希望光标在悬停在轴标签和图例上时保持标准光标（箭头）（因为您无法编辑这些）。当悬停在 x 轴（底部）标签上时，我还希望光标切换到指针光标。

将鼠标悬停在图表上的任何位置时，我可以轻松地为整个图表显示指针光标，但这是不希望的。

我使用 seriesHover 事件尝试了各种策略，但到目前为止没有任何效果。

我如何实现上述目标？

托马斯你的回答几乎让我在那里。但是，我还需要一条额外的信息：

我将如何在 CSS 文件中使用您在下面的答案中显示的技术。我有几个 Kendo UI 图表，其中一些我需要这种行为，而另一些我不需要。我有与包含剑道 UI 图表的 div 相关联的 id 和类（每个图表一个 div）。实际图表是在加载时使用 JavaScript 代码创建的。我尝试将以下内容添加到 CSS 文件中的 CSS 中，但这没有效果：

#barChart {
    /*cursor: pointer;*/
    (svg > path):last-child {cusror: pointer;}
}

其中 #barChart 是 HTML 中包含 KendoUI 图表的 div 的 ID

<div id="barChart" class="bargraph"></div>

对于在预定义的 div 中加载时创建的图表，有没有办法执行您在下面显示的操作？这是否必须通过挂钩图表悬停事件来完成？

4

4 回答 4

3

刚刚尝试使用 CSS 设置Kendo UI 条形图演示的样式；将光标变为手形并将其保留为文本上的默认光标都可以很好地工作。我只需要添加两行 CSS（并更改脚本/CSS URL）：

<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" />
    <style type="text/css">
      /* When hovering over a bar, Kendo dynamically adds
         a bar as the last child of the SVG element that 
         works as an overlay. So, effectively, we're
         hovering over the last (dynamically added) child */   
      svg > path:last-child {cursor:pointer;}
      svg {cursor:default}
    </style>
</head>
<body>

        <div id="example" class="k-content">
            <div class="chart-wrapper">
                <div id="chart" style="background: center no-repeat url('../../content/shared/styles/world-map.png');"></div>
            </div>
            <script>
                function createChart() {
                    $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        title: {
                            text: "Internet Users"
                        },
                        legend: {
                            position: "bottom"
                        },
                        chartArea: {
                            background: ""
                        },
                        seriesDefaults: {
                            type: "bar"
                        },
                        series: [{
                            name: "World",
                            data: [15.7, 16.7, 20, 23.5, 26.6]
                        }, {
                            name: "United States",
                            data: [67.96, 68.93, 75, 74, 78]
                        }],
                        valueAxis: {
                            labels: {
                                format: "{0}%"
                            }
                        },
                        categoryAxis: {
                            categories: [2005, 2006, 2007, 2008, 2009]
                        },
                        tooltip: {
                            visible: true,
                            format: "{0}%"
                        }
                    });
                }

                $(document).ready(function() {
                    setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                    }, 400);
                });
            </script>
        </div>
    <script type="text/javascript">
        console.log("hi")
        document.addEventListener("click",function(e){document.write(e.target)},false)
    </script>

</body>
</html>​

如果您有多个图表并且只希望某些图表具有此行为，我建议使用类，例如

<div id="barChart" class="bargraph cursorPointer"></div>

并更改CSS

.cursorPointer svg > path:last-child {cursor:pointer;}
.cursorPointer svg {cursor:default}

（如果您希望箭头光标位于所有图形的文本上，请省略.cursorPointer第二行的。）

于 2013-01-02T15:53:20.920 回答
1

如果您只想在定义了axisLabelClick 事件的标签中更改光标。你可以这样做：

var chart = $("#chart").data("kendoChart");

就我而言，我只处理第一个标签，所以我只想要指针光标：

var idLabel = chart._plotArea.axisY.children[0].options.id; 
$('#' + idLabel).css('cursor', 'pointer');
于 2013-03-27T20:55:46.870 回答
0

有趣的是，这对我来说非常有效（仅限 Bar Chart Kendo 2016）：

  svg > g g g g g g {cursor:pointer;}
  svg {cursor:default}
于 2016-08-13T13:55:53.553 回答
0

由于这还不是 Kendo 中的设置，正如@ThomasW 所写，您需要找到一种方法来定位当您将鼠标悬停在图形元素上时显示的覆盖路径。

就我而言，我注意到所有这些叠加层都有fill-opacity="0.2"，这起到了作用：

.kendo-chart-wrapper [fill-opacity="0.2"] {
  cursor: pointer;
}
于 2017-04-05T16:13:22.570 回答