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

我注意到将鼠标悬停在轴标签(左,右和下)和图例上时,光标变成了文本光标。因此,除了上述内容外,我希望将光标悬停在轴标签和图例上时,光标仍保留为标准光标(箭头)(因为您无法编辑它们)。当将鼠标悬停在x轴(底部)标签上时,我也希望光标切换到指针光标。

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

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

如何实现以上目标?

托马斯(Thomas),您的回答几乎可以解决我。但是,我需要另外一条信息:

我将如何使用您在CSS文件中的答案中显示的技术。我有几个Kendo UI图表,有些图表我需要这种行为,有些则不需要。我有与包含kendo UI图表的div相关联的id和类(每个图表一个div)。实际的图表是在加载时使用JavaScript代码创建的。我尝试将以下内容添加到CSS文件中的CSS,但这无效:

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


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

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


对于在预定义的div内在加载时创建的图表,有什么方法可以执行下面显示的操作?是否必须通过挂接图表悬停事件来完成?

最佳答案

刚刚尝试使用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。)

09-25 16:20
查看更多