【Javascript】jQuery 棒グラフとグラデーション

jQuery でグラフ作成 では、折れ線グラフ作成するjQueryプラグインを作ってみましたが、 今回は、そのjQchartのアップグレードバージョンとして棒グラフを作りました。

背景色にグラデーションを利用したせいか、案外見栄えのするチャートに仕上がったような気もします。

使い方は簡単で、先月のjQuery でグラフ作成の記事とほぼ同じですが、 プラグインの設定用引数へtypeプロパティを設定します。'line'または省略したら折れ線グラフで、 'bar'なら今回の棒グラフという具合です。

入手先も、先月同様、jQchartですが、バージョンは必ず、v0.03-beta-1.1以上をご利用ください。

スクリーンショット

サンプルへ進む前に、どんなグラフができるのか、スクリーンショットを見てみます。 この画像は小さいですが、クリックすると、別ウインドウで大きなサイズを見ることができます。

今回紹介する棒グラフです。色の設定は省略したデフォルトカラーになっています。

色のパターンを$.jQchart.colorSetsというオブジェクトまとめて名前をつけられるようにしました。 これは、gryというセットで、色は次の通り。['#524e4d','#adadad','#595455', '#afafb0','#595857','#c0c6c9', '#727171','#c0c6c9','#9fa0a0', '#dcdddd','#888084','#d5d4d6', '#7d7d7d','#dddcd6','#6b6c6d']



最も簡単なサンプルです。グラフのタイプを省略するとこのように折れ線グラフになります。 背景グラデーションのbgGradient:trueという値とデータだけを渡しています。



rikyuという名前のカラーセットです。



CSSで各エレメントをデザインできます。これは、jQueryメソッドでデータラベルのfontを変更しました。

$('#jQchart-canvas要素ID名')
.find('.jQchart-labelData')
.css('font-size','18px')
.css('font-family','Times');



ui.droppable.jsなどを読み込んでおけばドラッグもできます。



前回紹介したcsv2tableと組み合わせれば、 エクセルなどのCSVファイルを読み込んでテーブル化と同時にグラフ表示もできます。



背景グラデーションの色や向きも設定できます。(*Win IEは向きを変更できません。Firefox,Opera,Safariは変更できます。)

 

次ページで簡単な棒グラフから試してみます。