

Highchartsでは標準で円グラフのパイが中心から放射状にアニメーションしますが、これを止めたいです。何か方法をご存知ありませんか？


CC BY-SA 4.0
2015-09-20T13:42:28.333
16800
2018-11-17T10:40:50.510
2018-11-17T10:40:50.510
5519
12388
question
javascript jquery highcharts
Highchartsの初期表示の際のアニメーションを変えたい


初期表示のアニメーションを止めたい、という質問ですね。

それは、[plotOptions.pie.animation](http://api.highcharts.com/highcharts#plotOptions.pie.animation)で制御できます。

ドキュメントに書かれている[Pie chart
demo](http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-
software/highcharts.com/tree/master/samples/highcharts/demo/pie-
basic/)はアニメーションが有効ですが、上記の`animation=False`の指定を追加した[アニメーション無しdemo](http://jsfiddle.net/znrLt1qt/)を作成しました。  
後者は放射状のアニメーションがないと思います。

以下は、追加したオプション指定の抜粋です。

[code]

    $(function () {
        $('#container').highcharts({
            〜略〜
            ,
            plotOptions: {
                pie: {
                    animation: false,
                    allowPointSelect: true,
                    cursor: 'pointer',
                    〜略〜
            },
            〜略〜
        });
    });
    
[/code]


CC BY-SA 3.0
2015-09-21T18:20:02.130
16831
2015-09-21T18:20:02.130
2238
16800
answer


> 標準のアニメーションが「半径が徐々に大きくなる動き」と「畳まれていたグラフが扇状に広がる動き」の組み合わせだと考えた時に、前者だけ無効化したい

円グラフのアニメーションは、seriesTypes.pie.prototype.animateメソッドで定義されていますので、このメソッドをオーバライドすることで、アニメーションのカスタマイズが可能です。「半径が徐々に大きくなる動き」だけを無効化する場合は、半径rが0からスタートする処理をコメントアウトしてください。

[code]

    // パイチャートのアニメーションメソッドをオーバライド
    Highcharts.seriesTypes.pie.prototype.animate = function(init) {
        var series = this,
            points = series.points,
            startAngleRad = series.startAngleRad;
        if (!init) {
            Highcharts.each(points, function (point) {
                var graphic = point.graphic,
                    args = point.shapeArgs;
                if (graphic) {
                    graphic.attr({
                        // スケーリングを無効化
                        //r: point.startR || (series.center[3] / 2),
                        start: startAngleRad,
                        end: startAngleRad
                    });
                    graphic.animate({
                        // スケーリングを無効化
                        //r: args.r,
                        start: args.start,
                        end: args.end
                    }, series.options.animation);
                 }
            });
            series.animate = null;
        }
    };
    
[/code]

詳細は、「[円グラフのアニメーションで、スケーリングだけ無効にする](http://highchartsmaniacs.com/2018/11/17/%E5%86%86%E3%82%B0%E3%83%A9%E3%83%95%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E3%80%81%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%A0%E3%81%91/)」を参照下さい。


CC BY-SA 4.0
2018-11-17T08:12:15.913
50397
2018-11-17T08:12:15.913
29191
16800
answer