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

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



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。