http://dojo.telerik.com/aGisuSuR/2
我试图根据鼠标位于线点上的时间来隐藏和显示 Kendo 折线图上的误差条，是否可以做到这一点？我尝试使用突出显示，我可能可以创建一个视觉效果，但我只想隐藏所有错误栏并仅在该点突出显示时显示。我尝试将 erroBar 可见性设置为 false 并在突出显示上将其设置为 true，但这似乎不起作用。即使这有效，这也会设置所有误差线的可见性，我只想一次只设置一个点，因为一次显示所有误差线会重叠误差线。
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/line-charts/remote-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content wide">
<div id="chart"></div>
</div>
<script>
function createChart() {
var StrokeAnimation = kendo.drawing.Animation.extend({
init: function(element) {
kendo.drawing.Animation.fn.init.call(this);
this.initialStroke = $.extend({}, element.options.stroke);
this.color = element.options.fill.color;
this.element = element;
},
step: function(pos) {
this.element.stroke(this.color, this.initialStroke.width * pos * 5, 0.5);
},
reset: function() {
this.element.options.set("stroke", this.initialStroke);
}
});
$("#chart").kendoChart({
dataSource: [
{
"country": "Spain",
"year": "2008",
"unit": "GWh",
"solar": 2578,
"hydro": 26112,
"wind": 32203,
"nuclear": 58973,
"low":51000,
"high":68000
},
{
"country": "Spain",
"year": "2007",
"unit": "GWh",
"solar": 508,
"hydro": 30522,
"wind": 27568,
"nuclear": 55103,
"low":52000,
"high":60000
},
],
title: {
text: "Spain electricity production (GWh)"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "line",
errorLowField: "low",
errorHighField: "high",
errorBars: {
highlight:{
line: {
width: 1,
dashType: "solid"
}
},
visible: true,
endCaps: true,
width: 10,
color: "darkblue",
line: {
width: 1,
dashType: "solid"
}
},
highlight: {
errorBars: {
line: {
width: 1,
dashType: "solid"
}
}
}
},
series: [{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name: "Hydro"
}, {
field: "wind",
name: "Wind"
}],
categoryAxis: {
field: "year",
labels: {
rotation: -90
},
crosshair: {
visible: false
}
},
valueAxis: {
labels: {
format: "N0"
},
majorUnit: 10000
},
tooltip: {
visible: false,
shared: false,
format: "N0"
},
render: function(e) {
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>实现此目的的一种方法是在SeriesOver事件和seriesLeave事件上自己绘制误差线。
首先，清除之前画的线。检查您位于圆形对象（标记）上方，然后获取其 x 位置。从悬停点，从 dataItem 获取错误高值和低值，并使用 axis.slot() 转换为坐标。最后画出线条。在我的示例中，我在五秒超时后清除了 seriesLeave 上的行。
var timeout;
...
seriesOver: function(e) {
clearTimeout(timeout);
$('[opacity="0.9999998"]').remove();
if (e.element.tagName == "circle") {
var xVal = e.element.cx.baseVal.value;
var chart = e.sender;
var yAxis = chart.getAxis("value");
var valSlot = yAxis.slot(e.dataItem.low, e.dataItem.high);
var strokeColor = "#535D5D";
var strokeWidth = 2;
var uniqueOpacity = 0.9999998; //for removing previously drawn
//vertical error bar
var path = new kendo.drawing.Path({
stroke: {color: strokeColor, width: strokeWidth}
}).moveTo(e.element.cx.baseVal.value , valSlot.origin.y)
.lineTo(e.element.cx.baseVal.value, valSlot.origin.y + valSlot.size.height)
.opacity(uniqueOpacity);
//end cap 1
var pathEnd1 = new kendo.drawing.Path({
stroke: {color: strokeColor, width: strokeWidth}
}).moveTo(e.element.cx.baseVal.value - 4 , valSlot.origin.y)
.lineTo(e.element.cx.baseVal.value + 4, valSlot.origin.y)
.opacity(uniqueOpacity);
//end cap 2
var pathEnd2 = new kendo.drawing.Path({
stroke: {color: strokeColor, width: strokeWidth}
}).moveTo(e.element.cx.baseVal.value - 4 , valSlot.origin.y + valSlot.size.height)
.lineTo(e.element.cx.baseVal.value + 4, valSlot.origin.y + valSlot.size.height)
.opacity(uniqueOpacity);
//Draw on chart
chart.surface.draw(path);
chart.surface.draw(pathEnd1);
chart.surface.draw(pathEnd2);
}
},
seriesLeave: function(e) {
setTimeout(function(){
$('[opacity="0.9999998"]').remove();
}, 5000);
}