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

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

いよいよ、背景色のグラデーションです。 と言っても、難しいことはありません。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などを組み合わせることで手軽に実現することができます。