bar,default | bar,rikyu | bar,gray | line,default | line,Direct colorSet | line,Direct colorSet,from/to(NG) |
**Attention** I cancel the work that I used "use:gradient" for at one time. After jquery.jqchart-0.02-beta-3.0.js, "use:gradient" is not usable. After v0.02-beta-3.0.js, I try the gradation in canvas. 0.02-beta-2.1.js.gradient(development).end() :) <!-- libs --> <!--[if IE]> <script type="text/javascript" src="./lib/excanvas/excanvas-compressed.js"></script> <![endif]--> <script type="text/javascript" src="./lib/jquery-1.2.3.min.js"></script> <script type="text/javascript" src="./jquery.jqchart-0.02-beta-2.1.js" charset="utf-8"></script> <script type="text/javascript" src="./lib/jquery.dimensions.js"></script> <script type="text/javascript" src="./lib/jquery.gradient-forjqchart.js"></script> <!-- enchant --> <script type="text/javascript" src="./lib/enchant/fx.js"></script> <script type="text/javascript" src="./lib/enchant/fx.clip.js"></script> <script type="text/javascript" src="./lib/enchant/fx.slide.js"></script> <script type="text/javascript" src="./lib/enchant/fx.fade.js"></script> </head><body> <style> body { margin: 20px; font-family: "Myriad Web","Trebuchet MS","Tahoma","Helvetica","Arial","sans-serif"; } #myBgBox{ background-color:#3f464c; padding:30px; padding-top:5px; text-align:center; color:white; } #myBgBox h5{ margin :15px; font-size : 18px; } .jQchart{ font-size : 12px; } .jQchart-bg{ margin-left : auto ; margin-right : auto ; } .jQchart-labelData{ font-size : 9px; } .jQchart-title{ font-size : 12px; } </style> <script type="text/javascript"> var data = [ [234,555,234], [300,700,600], [789,666,887], [456,890,226], [336,666,776], [458,788,888], [123,333,567], [786,221,777], [666,567,789], [895,654,888], [333,222,444], [456,123,789], [543,235,999], [444,666,227], [123,234,222] ]; var data2 = [ [435,500,600,700,888,777,925], [60,435,456,352,567,678,1260], [200,123,312,200,402,300,512] ]; function chgChart(type,colorSet,gradient,title,data){ //if($('.gradient').length>0)$('.gradient').remove(); $('#myBgBox').hide(); $('#canvasMyID1').jQchart({ config:{ title : title, type : type, use : 'gradient:#canvasMyID1', colorSet : (typeof colorSet=='string')?$.jQchart.colorSets[colorSet]:colorSet, gradient : gradient }, data : data }); $('#myBgBox').show('slide',{ direction: 'right' }); return false; } </script> <p> <a href="#" onClick="chgChart('bar','','','type:bar,colorSet:default',data)">bar,default</a> | <a href="#" onClick="chgChart('bar','rikyu','','type:bar,colorSet:rikyu',data)">bar,rikyu</a> | <a href="#" onClick="chgChart('bar','gray','','type:bar,colorSet:gray',data)">bar,gray</a> | <a href="#" onClick="chgChart('line','','','type:line,colorSet:default',data2)">line,default</a> | <a href="#" onClick="chgChart('line',['#adadad','#000000','#dddcd6'],{},'type:line,colorSet:gray',data2)">line,Direct colorSet</a> | <a href="#" onClick="chgChart('line',['#06D000','#000000','#dddcd6'],{ from : '000000', to : '00aaaa', direction:'vertical' },'type:line,colorSet:gray',data2)">line,Direct colorSet,from/to</a>(NG) | </p> <div id="myBgBox"> <h5>jQchart + use:gradient</h5> <canvas id="canvasMyID1" width="500" height="220"></canvas> </div> <script type="text/javascript"> var chartSetting1={ config:{ title : '<b>type : "bar"</b>,setting.config.colorSet : $.jQchart.colorSets.gray', type : 'bar', use : 'gradient:#canvasMyID1', colorSet : $.jQchart.colorSets.gray }, data : data }; jQuery(function($){ $('#canvasMyID1').jQchart(chartSetting1); }) </script>