我有一个kendo ui图表 donut ,我想通过读取参数在绘图时刻设置不透明度:0.5的“路径”,在我的情况下,参数是“事件的”我尝试编写“视觉”函数但从未被执行...
我尝试过使用toggleHighlight,但不起作用。
$("#chart").kendoChart({
chartArea: {
width: 440,
height:300
},
seriesDefaults: {
labels: {
template: "# if(dataItem.active) { #☑# } else { #☐# }# #= kendo.format('{0:P}', percentage)#",
position: "outsideEnd",
visible: true,
background: "transparent",
font: "14px Verdana"
},
opacity: 1
},
series: [{
type: "donut",
data: [{
category: "Football",
value: 35,
active: false
}, {
category: "Basketball",
value: 25,
active: false
}, {
category: "Volleyball",
value: 20,
active: true
}],
highlight: {
visible: true,
opacity: 0.5,
toggle: function (e) {
e.preventDefault();
var opacity = e.dataItem.active ? 0.5 : 1;
e.visual.opacity(opacity);
}
},
visual: function (e) {
console.log("visual");
console.log(e);
}
}],
seriesClick: function (e) {
debugger;
console.log(e);
var $this = this;
var series = $this.options.series[0].data;
for (var i = 0; i < series.length; i++) {
if (series[i].category == e.category) {
series[i].active = !series[i].active;
if (series[i].active) {
console.log("TOOGLE");
}
}
}
//this.setOptions({ series: series });
this.refresh();
}
});
有人知道如何在特定“路径”上设置 opacity=0.5 吗?非常感谢您的帮助!
最佳答案
在系列的视觉属性中,你可以这样做:
visual: function (e) {
var opacity = e.dataItem.active ? 0.5 : 1;
e.options.opacity=opacity;
var v = e.createVisual();
return v;
}
<强> DEMO
关于javascript - kendo ui 图表 donut 设置突出显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42631976/