Highchartsで各チャートアニメーション完了後にSVGを描画する。

9084 ワード
highcharts highlight.js DataVisualization highcharts テキストリンク

Highchartsで各グラフアニメーション描画後Event設定。

  • 折れ線を5本、時間ずらして描画する。
  • afterAnimateイベントでSVG描画する。

    plotOptions: {
        series: {
            pointStart: 2010,
            'events': {
                'afterAnimate': function () {
                    this.chart.renderer.text(this.name + ' completed', this.chart.plotLeft, 100 + this.index * 20)
                        .css({
                            color: this.color,
                            fontSize: '16px'
                        }).add();
                }
            }
        }
    },

    series: [{
        name: 'A市',
        'animation': {
            'duration': 1000,
            'easing': 'linear'
        },
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'B市',
        'animation': {
            'duration': 2000,
            'easing': 'linear'
        },
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'C市',
        'animation': {
            'duration': 3000,
            'easing': 'linear'
        },
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'D市',
        'animation': {
            'duration': 4000,
            'easing': 'linear'
        },
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'E町',
        'animation': {
            'duration': 5000,
            'easing': 'linear'
        },
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }]