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/