我有一个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
。)