Question

是否可以逐步渲染图表并为其制作动画？

现在我在我的图表中有三个区域数据集，我需要逐步制作动画。数据集/区域1应该开始，在此完成后，数据集/区域2需要启动然后3.
我无法找到一个选项，这对Highcharts来说是否可能？

现在动画从左，从下到右，向上 - 是否有动画方向的选项？我想从全宽度开始动画（在xAxis上完全展开）以启动yAxis。

我的选择：

var $chart = $('#chart');
var chart = new Highcharts.Chart({
    chart: {
        renderTo: $chart[0],
        type: 'area',
        style: {
            fontFamily: 'Arial, sans-serif'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'center',
        verticalAlign: 'bottom',
        itemMarginBottom: 15,
        borderWidth: 0,
        itemStyle: {
             color: '#9a9a9a',
             fontWeight: '300',
             fontSize: '16px',
             useHTML: true,
         }
    },
    title: false,
    xAxis: {
        categories: ['0', '5', '10', '15', '20', '25', '30'],
        lineColor: '#9a9a9a',
        minTickInterval: 5,
        title: {
            text: 'Years',
            style: {
                color: '#000',
                fontSize: '14px',
                fontWeight: 'bold'
            }
        },
        labels: {
            style: {
                color: '#9a9a9a',
                fontSize: '14px'
            }
        }
    },
    yAxis: {
        min: 0,
        tickAmount:5,
        minorTickInterval: 0,
        minorGridLineColor: '#9a9a9a',
        gridLineWidth: 1,
        maxPadding: 0.1,
        title: {
            text: 'Eur',
            style: {
                color: '#000',
                fontSize: '14px',
                fontWeight: 'bold'
            }
        },
        labels: {
            format: '{value:,.0f}',
            style: {
                color: '#9a9a9a',
                fontSize: '14px'
            }
        }
    },
    tooltip: {
    backgroundColor: '#FCFFC5'
},
    plotOptions: {
        series: {
            borderWidth: 0,
            pointPadding: 0.2,
            groupPadding: 0,
            style: {
                color: '#000',
                fontSize: '16px',
                fontWeight: '300'
            }
        }
    },
    series: [
        {
            name: '2',
            legendIndex: 2,
            color: '#83bd3f',
            animation: {
                duration: 3000
            },
            data: [1042,
                  2128,
                  3259,
                  4438,
                  5666,
                  6946,
                  7652

              ]
        },
        {
            name: '1',
            legendIndex: 1,
            color: '#24356d',
            animation: {
                duration: 2000
            },
            data: [1024,2073,3146,
                4246,
                5372,
                6525,
                7705
            ]

        },
        {
            name: 'Eingezahlte Rate',
            legendIndex: 0,
            color: '#9a9a9a',
            animation: {
                duration: 1000
            },
            data: [
                1000,
                2000,
                3000,
                4000,
                5000,
                6000,
                7000
                ]
        }
    ]
});`

由于

Answer 1

您可以使用series.afterAnimate事件来为其他系列启动动画。

在你的第一个系列之后设置像这样的动画：

events: {
  afterAnimate: function () {
    this.chart.get('1').update({
      visible: true,
      animation: {
        duration: 2000
      },
      events: {
        afterAnimate: function () {
          this.chart.get('2').update({
            visible: true,
            animation: {
              duration: 3000
            }
          })
        }
      }
    })
  }
},

对于其他系列，最初您可以禁用动画或/并将其可见性设置为false：

series: [{
  name: '2',
  id: '2',
  legendIndex: 2,
  color: '#83bd3f',
  animation: {
    duration: 0
  },
  visible: false,

要更改动画的方向，您需要换series.animate 方法并更改剪切矩形的动画方式。

(function(H) {
  H.wrap(H.seriesTypes.area.prototype, 'animate', function(proceed, init) {
    var series = this,
      chart = series.chart,
      clipRect,
      animation = H.animObject(series.options.animation),
      sharedClipKey,
      newH;

    if (init) {
      return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    } else {

      sharedClipKey = this.sharedClipKey;
      clipRect = chart[sharedClipKey];
      if (clipRect) {
        clipRect.attr({
          y: chart.plotSizeY,
          height: 0,
          width: chart.plotSizeX
        }).animate({
          y: 0,
          height: chart.plotSizeY
        }, animation);
      }
      if (chart[sharedClipKey + 'm']) {
        chart[sharedClipKey + 'm'].attr({
          y: chart.plotSizeY,
          height: 0,
          width: chart.plotSizeX + 99
        }).animate({
          y: 0,
          height: chart.plotSizeY
        }, animation);
      }

      // Delete this function to allow it only once
      series.animate = null;
    }

  });
})(Highcharts)

示例：http://jsfiddle.net/0esjvmgL/

Highcharts - 一步一步的图表

1 个答案: