Highchartsには幅・高さを自動で決めてくれる機能が付いていた!

先日、ブログのレイアウトを変更している時に気づいたいたのですが、Highcharsのグラフの幅・高さは数値を入力しなくても自動的に決めてくれる機能が付いているようです。


ソースコードの最後の方に

-----------------------------------------

</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container-wiiu" style="min-width: 740px; height: 420px; margin: 0 auto"></div>

</body>
</html>

---------------------------------------------
※コードを表示させるために、タグのカッコの左側を全角にしてます。

という部分が有りますが、いつもはmin-width、heightの数値を変更して幅・高さを決めていました。しかし、この部分に何も数値を入れなくてもグラフを表示する事が可能で(style="min-width: 740px; height: 420px; margin: 0 auto"という部分を全て消去してもOK)、その時の幅・長さは自動的に決めてくれます。この機能を使えばスマートフォンのような縦長のディスプレイでも、わざわざ横にスライドさせなくてもグラフ全体を見ることが出来るようになります。

このオート機能いいじゃん!ということで全面的に使おうと思っていたのですが、一つ問題が…
そう、IEで使えないんです。IEでは数値を入れないとグラフの最上部しか表示されずに本体が全く見えません。今回は「サイトをIEでも見れるようにする!」というコンセプトの基やっていたのでオート機能は使わずに全て手作業で数値を変更しましたが、このオート機能をIEでも使えるようになれば使っていきたいと思います。CSSのようにIE用のフィルターとかないんですかね…
関連記事
  
このエントリーをはてなブックマークに追加


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


コメントの投稿

非公開コメント

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



最新記事