Posted at

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

More than 1 year has passed since last update.


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