Highchartsでは標準で円グラフのパイが中心から放射状にアニメーションしますが、これを止めたいです。何か方法をご存知ありませんか?
-
2恐らく日本の方だと思いますが、ja.stackoverflow.comの方は日本語でokです。本家のstackoverflow.comと間違えてポストされたのではないですか?– hataCommented 2015年9月20日 13:56
-
はい。jaの存在を知らず…よく理解していないまま投稿してしまいました。。。– Kazuki SaitoCommented 2015年11月28日 7:19
-
標準のアニメーションが「半径が徐々に大きくなる動き」と「畳まれていたグラフが扇状に広がる動き」の組み合わせだと考えた時に、前者だけ無効化したいということですか・・・?– unaristCommented 2016年1月10日 3:10
-
urarist様 その通りでございます。 色々調べているのですが、その方法がわからず…単純にanimation offしか探しきれていません。– Kazuki SaitoCommented 2016年1月12日 7:56
コメントを追加
|
2 件の回答
初期表示のアニメーションを止めたい、という質問ですね。
それは、plotOptions.pie.animationで制御できます。
ドキュメントに書かれているPie chart demoはアニメーションが有効ですが、上記のanimation=False
の指定を追加したアニメーション無しdemoを作成しました。
後者は放射状のアニメーションがないと思います。
以下は、追加したオプション指定の抜粋です。
$(function () {
$('#container').highcharts({
〜略〜
,
plotOptions: {
pie: {
animation: false,
allowPointSelect: true,
cursor: 'pointer',
〜略〜
},
〜略〜
});
});
-
コメントがかなり遅くなってしまいました。。。 大変申し訳ありません。 animationをオフだと本当にアニメーションがまったくない状態ですので、要望ではありません。 ただ、単純にぐるっと一周してくれればいいのですが… Commented 2015年11月30日 6:30
-
初期表示はアニメーションが効いてほしいが、パイを選択したときに値表示や強調表示は止めたい、という意味ですか?そこまで汲み取って回答できる人はいないと思いますよ。 質問を更新して、要望を的確な日本語で書いてください。– htbCommented 2015年11月30日 6:45
標準のアニメーションが「半径が徐々に大きくなる動き」と「畳まれていたグラフが扇状に広がる動き」の組み合わせだと考えた時に、前者だけ無効化したい
円グラフのアニメーションは、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;
}
};
詳細は、「円グラフのアニメーションで、スケーリングだけ無効にする」を参照下さい。