Question

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

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

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

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

我如何实现上述目标？

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

我如何在CSS文件中使用您在下面的答案中显示的技术。我有几个Kendo UI图表，其中一些我需要这种行为，一些我不需要。我有与包含kendo 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中加载时创建的图表，有没有办法执行下面显示的内容？这是否必须通过挂钩图表悬停事件来完成？

Answer 1

尝试使用CSS设置Kendo UI bar chart demo样式;将光标移动到手中并将其保留为文本works quite well上的默认光标。我只需要添加两行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。）

Answer 2

如果要仅在已定义axisLabelClick事件的标签中更改光标。你可以这样做：

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

在我的情况下，我只处理第一个标签，所以我只希望指针光标在那里：

var idLabel = chart._plotArea.axisY.children[0].options.id; 
$('#' + idLabel).css('cursor', 'pointer');

Answer 3

由于这还不是Kendo的设置，正如@ThomasW所写，你需要找到一种方法来定位叠加路径，当你将鼠标悬停在图形元素上时会显示出来。< / p>

就我而言，我注意到所有这些叠加层都有fill-opacity="0.2"，这就是诀窍：

.kendo-chart-wrapper [fill-opacity="0.2"] {
  cursor: pointer;
}

将鼠标悬停在Kendo UI条形图中的条形图上时，如何将光标切换到指针光标

3 个答案: