Highcharts动画

时间:2017-08-29 06:01:10

标签: animation highcharts

无论如何,从左到右依次为气泡图中的每个气泡设置动画,气泡的大小最初会更小或更大,然后它应该增长到实际大小。任何进一步了解此要求的想法都受到高度赞赏。

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

});

1 个答案:

答案 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;
  }
}

示例:http://jsfiddle.net/hpk497hb/