1

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

4
  • 2
    恐らく日本の方だと思いますが、ja.stackoverflow.comの方は日本語でokです。本家のstackoverflow.comと間違えてポストされたのではないですか?
    – hata
    Commented 2015年9月20日 13:56
  • はい。jaの存在を知らず…よく理解していないまま投稿してしまいました。。。 Commented 2015年11月28日 7:19
  • 標準のアニメーションが「半径が徐々に大きくなる動き」と「畳まれていたグラフが扇状に広がる動き」の組み合わせだと考えた時に、前者だけ無効化したいということですか・・・?
    – unarist
    Commented 2016年1月10日 3:10
  • urarist様 その通りでございます。 色々調べているのですが、その方法がわからず…単純にanimation offしか探しきれていません。 Commented 2016年1月12日 7:56

2 件の回答 2

1

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

それは、plotOptions.pie.animationで制御できます。

ドキュメントに書かれているPie chart demoはアニメーションが有効ですが、上記のanimation=Falseの指定を追加したアニメーション無しdemoを作成しました。
後者は放射状のアニメーションがないと思います。

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

$(function () {
    $('#container').highcharts({
        〜略〜
        ,
        plotOptions: {
            pie: {
                animation: false,
                allowPointSelect: true,
                cursor: 'pointer',
                〜略〜
        },
        〜略〜
    });
});
2
  • コメントがかなり遅くなってしまいました。。。 大変申し訳ありません。 animationをオフだと本当にアニメーションがまったくない状態ですので、要望ではありません。 ただ、単純にぐるっと一周してくれればいいのですが… Commented 2015年11月30日 6:30
  • 初期表示はアニメーションが効いてほしいが、パイを選択したときに値表示や強調表示は止めたい、という意味ですか?そこまで汲み取って回答できる人はいないと思いますよ。 質問を更新して、要望を的確な日本語で書いてください。
    – htb
    Commented 2015年11月30日 6:45
0

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

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

// パイチャートのアニメーションメソッドをオーバライド
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;
    }
};

詳細は、「円グラフのアニメーションで、スケーリングだけ無効にする」を参照下さい。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。