jQuery Visualizeのグラフ要素の色の指定方法(colorsオプション)

jQuery Visualizeの記事の5つめ。今回はグラフ要素の色の指定方法を紹介する。jQuery Visualizeにはcolorsオプションが用意されているので、これを用いる。

jQuery Visualizeのグラフ要素の色の指定方法

まずは、1色だけ指定してみる。今回も実行部分のみを書くので、分からない場合はjQuery Visualizeカテゴリから過去の記事を探していただきたい。

コードは以下のようになる。そして、以下のようなグラフが生成される。グラフ要素が白色(#fff)になっているのが分かる。1色指定だと、全要素がその色になるのはいいのだが、下に表示されるリストに色が塗られていないので、実際に指定するときは、要素数分だけ、なにかしらの色を指定する必要がある。

colorsオプションの指定(1色)

$(function(){
  $('table').visualize({type: 'line', colors: ['#fff']});
});

jQuery Visualizeのグラフ要素の色の指定方法(1色)

実際の表示はjQuery Visualize サンプル8(グラフ要素の色の指定)にて確認できる。

colorsオプションで複数の色の指定方法

次に複数の色を指定してみる。上から7色、4色、2色と指定しているが、実際の表示順は逆になることを注意していただきたい。コードは以下の通り。カラーコードをシングルクオートで囲って、カンマ区切りにつなげることで複数の色を指定できる。

2色指定の場合は、2要素目以降が2つめに指定した色になることが分かる。また、リストの色が塗られないのは1色指定の場合と同様。指定色が4色の場合と7色の場合は同様のグラフが記述される。このことから、要素数以上の色を指定しても良いことが分かる。このため、グラフの要素の数が固定でない場合はあらかじめ多めの色を指定しておくと良いだろう。

colorsオプションの指定(複数色)

$(function(){
  $('table').visualize({type: 'line', colors: ['#f00', '#0f0', '#00f', '#888', '#ff0', '#f0f', '#0ff']});
  $('table').visualize({type: 'line', colors: ['#f00', '#0f0', '#00f', '#888']});
  $('table').visualize({type: 'line', colors: ['#f00', '#0f0']});
});

jQuery Visualizeのグラフ要素の色の指定方法(2色)

jQuery Visualizeのグラフ要素の色の指定方法(4色)

jQuery Visualizeのグラフ要素の色の指定方法(7色)

実際の表示はjQuery Visualize サンプル8(グラフ要素の色の指定)にて。

関連記事

jQuery Visualizeでグラフのデータ元である表を非表示にする方法
jQuery Visualizeのグラフサイズの指定方法(width、heightオプション)
jQuery Visualizeサンプル集

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/jquery_visualize/1498/trackback/