Highcharts动画

Question

有没有办法让气泡图中的每个气泡都从一个一个一个一个地左右移动，气泡的大小最初会变小还是变大，然后它会增大到实际大小。任何想法进一步进行这项要求是高度赞赏。

/** * A 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] 
    }] 

}); 

Answer 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; 
    } 
} 

例如：http://jsfiddle.net/hpk497hb/