【highcharts】 グラフの描写時間を長くする(グラフ描写を遅くする)

highchartsの設定オプションを紹介していきます。
詳細はHighcharts API Referenceでも確認出来ます。

■animation duration

Highchartsの魅力の一つに、アニメーション形式でグラフを表示出来ることだと思います。
しかしグラフをサイトに掲載すると、ファーストビューの位置にグラフを載せていればアニメーションを見ることができますが、もっと下の方にグラフを載せているとアニメーションを見ることができません。またサイト自体が重いとアニメーションが表示されないこともあります。実際、私のこのブログでもファーストビューではグラフはほとんど掲載されておらず、かつサイドバーとかに色々設置しているのでサイトが重い状況なので、グラフをアニメーション表示出来ていないと思います。しかし、大丈夫です。highchartsのコードのplotOptionsにanimetion durationを追加する事でグラフの描写時間を調整することができます。

何を言っているのかわからない…という方は、まずこちらを見てみてください。
折れ線グラフがアニメーションされている様子が解ると思います。

こちらがソースコードの一部です。
plotOptions: {
            series: {
                animation: {
                    duration: 5000
                }
            }
        },
表示速度を変更するには、plotOptionsでこのように設定します。
seriesを指定することでグラフ全体の表示速度を変更できます。columnとlineで構成されるグラフであれば、seriesの代わりにcolumnやlineを指定する事でどちらか一方だけの表示速度を変化させることも可能です。
duration(持続)の値を増やせばその分だけグラフの描写時間が伸びます。単位はミリ秒なので、5000だと5秒かけてグラフを描写することになります。


下のグラフはdurationを60000(60秒)に設定したグラフです。
これならグラフをサイトの下の方に設置してもアニメーションを表示することが可能ですね!
(もしアニメーションが終わっていたら再読み込みしてください!)

Highcharts Example

ただこの機能は古いバージョンのIEでは見れないようなので注意が必要です

関連記事
  
このエントリーをはてなブックマークに追加

お気に入りサイト

■よく読まれている人気記事


コメントの投稿

非公開コメント

Index for HighCharts FreQuent
author imageAuthor:Lynx
データをグラフ化&推移を見守り中。
御連絡はこちらまでお願い致します。



最新記事