jQuery Visualizeのグラフサイズの指定方法（width、heightオプション）

今回はjQuery Visualizeでグラフのサイズを指定する方法を紹介する。jQuery Visualizeにはwidthオプションとheightオプションが用意されており、CSS的に指定することができる。

以下に具体的な方法を記述する。

jQuery Visualizeのグラフサイズの指定方法

jQuery Visualizeの実行部分でwidthとheightを指定できる。実行部分は以下のようになる。他の部分は毎度おなじみなので、分からない方はjQuery Visualizeカテゴリから過去の記事を参考にしていただきたい。結果は以下に貼った画像のようになる。

jQuery Visualizeのグラフサイズの指定

<script type="text/javascript">
$(function(){
  $('table').visualize({type: 'line', width: '800px', height: '600px'});
  $('table').visualize({type: 'line', width: '600px', height: '450px'});
  $('table').visualize({type: 'line', width: '400px', height: '300px'});
  $('table').visualize({type: 'line', width: '200px', height: '150px'});
});   
</script>

実際の表示はjQuery Visualize サンプル７（グラフサイズの指定）にて確認できる。

一番上のグラフ（横幅：200px、高さ：150px）のグラフを見れば分かるが、あまり小さいサイズで指定すると表示が崩れる。これに関しては今後カスタマイズの記事を書こうと思うが、実際に利用する際には様々なサイズで表示を確認したほうが良いだろう。

関連記事

jQuery Visualizeのグラフ要素の色の指定方法（colorsオプション）
jQuery Visualizeのテーマの指定方法（Dark・Light）
jQuery Visualizeサンプル集