Kendo UI 图表工具提示和重绘
Kendo UI chart tooltip and redraw
我的问题如下:
我想在 Kendo UI 中有一个散点图,我可以在其中显示工具提示并具有系列悬停效果。
演示:http://jsfiddle.net/9Lvzu9qh/2/
注释掉第 44 行:
chart.redraw();
看看我的问题。如果重新绘制图表,工具提示将被清除。如果不重新绘制图表,我不会得到我的高亮效果。
如何同时获得突出显示和工具提示?也接受解决任一问题的替代方法。
我只在更改系列时才保存以前的 ID 并更改颜色:
var previousId = 0;
$("#chart").kendoChart({
title: {
text: "Line demo (Kendo UI v2014.3.1119)"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "scatterLine",
width: 2,
},
series: [{
name: "A",
data: [[0,1], [1,2], [2,3]]
},
{
name: "B",
data: [[0,2], [1,3], [2,5]]
},
{
name: "C",
data: [[0,3], [1,5], [2,2]]
}
],
seriesHover : function(e) {
var chart = e.sender;
var idx = _.findIndex(chart.options.series, function (s) {
return s === e.series;
});
if(previousId != idx)
previousId = idx;
else
return;
if (idx >= 0) {
var thisSeries = chart.options.series[idx];
// attach event to hovering over a series
// On hover, set opacity to full and increase width
// Decrease opacity and width on all other series
_.each(chart.options.series, function (s) {
s.width = 2;
s.opacity = 0.4;
});
thisSeries.width = 4;
thisSeries.opacity = 1;
$("#chart").data("kendoChart").redraw();
}
},
tooltip: {
visible: true,
format: "X: {0} Y: {1}"
},
transitions: false
});
希望对您有所帮助。
Fiddle: http://jsfiddle.net/9Lvzu9qh/4/
我的问题如下:
我想在 Kendo UI 中有一个散点图,我可以在其中显示工具提示并具有系列悬停效果。
演示:http://jsfiddle.net/9Lvzu9qh/2/
注释掉第 44 行:
chart.redraw();
看看我的问题。如果重新绘制图表,工具提示将被清除。如果不重新绘制图表,我不会得到我的高亮效果。
如何同时获得突出显示和工具提示?也接受解决任一问题的替代方法。
我只在更改系列时才保存以前的 ID 并更改颜色:
var previousId = 0;
$("#chart").kendoChart({
title: {
text: "Line demo (Kendo UI v2014.3.1119)"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "scatterLine",
width: 2,
},
series: [{
name: "A",
data: [[0,1], [1,2], [2,3]]
},
{
name: "B",
data: [[0,2], [1,3], [2,5]]
},
{
name: "C",
data: [[0,3], [1,5], [2,2]]
}
],
seriesHover : function(e) {
var chart = e.sender;
var idx = _.findIndex(chart.options.series, function (s) {
return s === e.series;
});
if(previousId != idx)
previousId = idx;
else
return;
if (idx >= 0) {
var thisSeries = chart.options.series[idx];
// attach event to hovering over a series
// On hover, set opacity to full and increase width
// Decrease opacity and width on all other series
_.each(chart.options.series, function (s) {
s.width = 2;
s.opacity = 0.4;
});
thisSeries.width = 4;
thisSeries.opacity = 1;
$("#chart").data("kendoChart").redraw();
}
},
tooltip: {
visible: true,
format: "X: {0} Y: {1}"
},
transitions: false
});
希望对您有所帮助。
Fiddle: http://jsfiddle.net/9Lvzu9qh/4/