jQuery 棒グラフとグラデーション

jQuery JavaScript

jQuery 棒グラフとグラデーション

1: スクリーンショット

2: 簡単なサンプル

3: いくつかのセッティング

4: 背景色をグラデーションにする

背景色をグラデーションにする

いよいよ、背景色のグラデーションです。と言っても、難しいことはありません。bgGradientオブジェクトで開始色fromと終了色toを指定するだけでグラデーションを描くことができます。

見てみましょう。

ソースは次の通り。

<!--[if IE]>
<script src="./excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery-min.js" type="text/javascript"></script>
<script src="./jquery.jqchart-0.03-beta-1.2.js" type="text/javascript"
        charset="utf-8"></script>

<canvas id="canvasMyID41" height="250" width="300"></canvas>

<script type="text/javascript">

  var chartSetting={
    config : { 
      type   : 'bar',
      title  : '<font color="orange">bgGradient を指定します',
      labelX : ["日","月","火","水","木","金","土"],
      scaleY : {min: 0,max:1200,gap:200},
      bgGradient :{
                from      : '#ffffff',
                to        : '#555555'
      },
      ondrawend : function(oj){
        $('.jQchart-labelX').css('color','#bbb')
        $('.jQchart-labelY').css('font-size','14px')
      }
    },
    data : [
      [500,600,770,700,888,777,1100],
      [150,180,312,200,402,300,580]
    ]
  };

  $(function(){
    $('#canvasMyID41').jQchart(chartSetting);
  })
</script>

ではこのグラデーションとカラーセットだけを変更してみます。

ソースは次の通り。

<canvas id="canvasMyID42" height="250" width="300"></canvas>

<script type="text/javascript">

$(function(){

  var setting2=new chartSetting();
      setting2.config.colorSet   = ['#A8FF50','#C8BCFF'];
      setting2.config.bgGradient ={
                  from      : '#FFFFFF',
                  to        : '#FFF7A4'
      };
      
  $('#canvasMyID42').jQchart(setting2);
})

</script>

前ページと同様にnew chartSetting()で作成した新しいインスタンスの必要部分だけを書き換えて利用しています。

たとえばこれに、データの表を表示したい場合などは、前回のプラグインcsv2tableなどを組み合わせることで手軽に実現することができます。

「Ajaxを使おう」シリーズの記事一覧へ

記事一覧