[英]How to animate chart legend symbol on hover?
我正在嘗試添加可在圖例上的餅圖上使用的相同動畫,但找不到任何答案
以下是我想要實現的圖像
您需要向圖例項添加mouseover
和mouseout
事件,並在事件回調函數中的圖例符號元素上使用aniamte
方法:
var H = Highcharts,
chart = Highcharts.chart('container', {
series: [{
type: 'pie',
showInLegend: true,
data: [12, 15, 25]
}]
}),
legendItems = chart.legend.allItems;
legendItems.forEach(function(item) {
H.addEvent(item.legendGroup.element, 'mouseover', function() {
item.legendSymbol.animate({
width: 24,
height: 24,
translateX: -6,
translateY: -6
});
});
H.addEvent(item.legendGroup.element, 'mouseout', function() {
item.legendSymbol.animate({
width: 12,
height: 12,
translateX: 0,
translateY: 0
});
});
});
現場演示: http : //jsfiddle.net/BlackLabel/a0s9yhtd/
API參考:
https://api.highcharts.com/class-reference/Highcharts#.animate
https://api.highcharts.com/class-reference/Highcharts#.addEvent
您也可以將drawLegendSymbol方法包裝在餅圖原型中,並呈現任何所需內容,而沒有任何限制。 您將需要類似@ppotaczek建議的事件和方法。
(function(H) {
H.wrap(H.seriesTypes.pie.prototype, 'drawLegendSymbol', function(proceed, legend, item) {
var options = legend.options,
symbolHeight = legend.symbolHeight,
square = options.squareSymbol,
symbolWidth = square ? symbolHeight : legend.symbolWidth;
var series = this;
var halo;
item.legendSymbol = series.chart.renderer.rect(
square ? (legend.symbolWidth - symbolHeight) / 2 : 0,
legend.baseline - symbolHeight + 1, // #3988
symbolWidth,
symbolHeight,
H.pick(legend.options.symbolRadius, symbolHeight / 2)
)
.addClass('highcharts-point')
.attr({
zIndex: 4
}).add(item.legendGroup);
H.addEvent(item.legendItem.element, 'mouseover', function() {
halo = series.chart.renderer.rect(
square ? (legend.symbolWidth - symbolHeight) / 2 : 0,
legend.baseline - symbolHeight + 1, // #3988
symbolWidth,
symbolHeight,
H.pick(legend.options.symbolRadius, symbolHeight / 2)
)
.addClass('highcharts-point')
.attr({
fill: item.color,
'fill-opacity': 0.25,
zIndex: 1
})
.add(item.legendGroup);
halo.animate({
width: symbolWidth * 1.8,
height: symbolHeight * 1.8,
translateX: -symbolWidth * 0.4,
translateY: -symbolHeight * 0.4,
r: H.pick(legend.options.symbolRadius, symbolHeight / 2 + symbolHeight * 0.4)
}, 0);
});
H.addEvent(item.legendItem.element, 'mouseout', function() {
halo.animate({
width: symbolWidth,
height: symbolHeight,
translateX: 0,
translateY: 0,
r: 0
});
});
})
})(Highcharts)
jsFiddle: https ://jsfiddle.net/BlackLabel/5beq3psn/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.