Highmaps 实现描点闪烁效果

例子地址:描点闪烁动效 | JShare

实现代码:

(function(H) {
	H.wrap(H.SVGRenderer.prototype, 'symbol', function(proceed, symbol, x, y, w, h, options) {
		if (symbol==='twinkle') {
			var markerGroup = this.g('twinkle').attr({
				translateX: x+ w/2,
				translateY: y + h/2,
				fill: options.color
			});
			var svgElem = this.circle(0, 0, w/2).attr({
				fill: options.color || null,
				stroke: options.lineColor,
				'stroke-width': options.lineWidth
			}).add(markerGroup);
            
			svgElem.element.innerHTML = '<animate attributeName="r" calcMode="spline" values="0;'+w+'" keyTimes="0;1" dur="1" keySplines="0 0.2 0.8 1" begin="-0.5s" repeatCount="indefinite"></animate>'+
				'<animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1" keySplines="0.2 0 0.8 1" begin="-0.5s" repeatCount="indefinite"></animate>'
			return markerGroup;
		}
		return proceed.apply(this, [].slice.call(arguments, 1));
	});
})(Highcharts);