无论如何,从左到右依次为气泡图中的每个气泡设置动画,气泡的大小最初会更小或更大,然后它应该增长到实际大小。任何进一步了解此要求的想法都受到高度赞赏。
/ ** * Highcharts插件,用于在图表外的单独容器中显示工具提示 *边界框,以便它可以利用页面中的所有可用空间。 * /
(function(H) {
H.wrap(H.Tooltip.prototype, 'getLabel', function(proceed) {
var chart = this.chart,
options = this.options,
chartRenderer = chart.renderer,
box;
if (!this.label) {
this.renderer = new H.Renderer(document.body, 400, 500);
box = this.renderer.boxWrapper;
box.css({
position: 'absolute',
top: '-9999px'
});
chart.renderer = this.renderer;
proceed.call(this, chart, options);
chart.renderer = chartRenderer;
this.label.attr({
x: 0,
y: 0
});
this.label.xSetter = function(value) {
box.element.style.left = value + 'px';
};
this.label.ySetter = function(value) {
box.element.style.top = value + 'px';
};
}
return this.label;
});
H.wrap(H.Tooltip.prototype, 'getPosition', function(proceed, boxWidth, boxHeight, point) {
var chart = this.chart,
chartWidth = chart.chartWidth,
chartHeight = chart.chartHeight,
pos;
point.plotX += this.chart.pointer.chartPosition.left;
point.plotY += this.chart.pointer.chartPosition.top;
// Temporary set the chart size to the full document, so that the tooltip positioner picks it up
chart.chartWidth = $(document).width();
chart.chartHeight = $(document).height();
// Compute the tooltip position
pos = proceed.call(this, boxWidth, boxHeight, point);
// Reset chart size
chart.chartWidth = chartWidth;
chart.chartHeight = chartHeight;
return pos;
});
/**
* Find the new position and perform the move. This override is identical
* to the core function, except the anchorX and anchorY arguments to move().
*/
H.Tooltip.prototype.updatePosition = function(point) {
var chart = this.chart,
label = this.label,
pos = (this.options.positioner || this.getPosition).call(
this,
label.width,
label.height,
point
);
// do the move
this.move(
Math.round(pos.x),
Math.round(pos.y || 0), // can be undefined (#3977)
point.plotX + chart.plotLeft - pos.x,
point.plotY + chart.plotTop - pos.y
);
};
}(Highcharts));
var chart = new Highcharts.Chart({
chart: {
height: 500,
renderTo: 'container',
type: 'pie'
},
tooltip: {
formatter: function() {
return '<div class="MyChartTooltip">test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> </div>';
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
答案 0 :(得分:1)
您可以添加小z值的点,然后异步更新它们(在更新一个点之后,更新下一个点)
您还可以覆盖bubble.prototype.animate
功能并更改默认动画,如下所示:
Highcharts.seriesTypes.bubble.prototype.animate = function(init) {
var H = Highcharts
var each = H.each
var animation = this.options.animation;
var points = this.points
var animatePoint = i => {
var point = points[i]
var graphic = point && point.graphic
var animationTarget
if (graphic && graphic.width) {
animationTarget = {
x: graphic.targetX,
y: graphic.targetY,
width: graphic.targetWidth,
height: graphic.targetHeight
}
graphic.animate(animationTarget, animation, () => {
animatePoint(i + 1)
});
} else {
this.update({ dataLabels: { enabled: true }})
}
}
if (!init) { // run the animation
each(points, function(point) {
var graphic = point.graphic,
animationTarget;
if (graphic && graphic.width) { // URL symbols don't have width
graphic.targetWidth = graphic.width
graphic.targetHeight = graphic.height
graphic.targetX = graphic.x
graphic.targetY = graphic.y
// Start values
graphic.attr({
x: point.plotX,
y: point.plotY,
width: 1,
height: 1
});
}
});
animatePoint(0)
// delete this function to allow it only once
this.animate = null;
}
}