//jquery.jQchart //@charset "utf-8"; //http://jsgt.org/lib/jquery/plugin/jqchart/nightly/nightly.htm (function($) { ////body書き忘れ対策 IEはbody無いとcanvas動かない使う? if($.browser.msie)document.body||document.write(''); //http://allabout.co.jp/internet/javascript/closeup/CU20060228A/index2.htm $.fn.jQchart = {}; $.fn.jQchart= function(cfg){ var that=this,its; $.fn.jQchart.global_zIndex=1000; switch( typeof cfg ){ case 'string' : ajaxload(cfg) ;break; case 'object' : drawChart(cfg) ;break; }; //for XHR function ajaxload(cfg){ $.post(cfg, function(res){ eval("var _option = "+res); drawChart(_option); }); } //for Arguments function drawChart(_option){ jQuery.extend( $.fn.jQchart,{ draw : function (op){ return this.wrtGraph(op); }, //初期設定 init : function (op){ if(!op)op={} if(!op.config)op.config={yScale:{}}; if(!op.config.yScale)op.config.yScale={} this.op=jQuery.extend({ type : op.config.type || 'line', //キャンバスのID名 id : $(that).get(0).id||op.config.id || "canvasChart_"+(new Date()).getTime(), //キャンバスの幅と高さ width : op.config.width || $("#"+that.get(0).id).attr('width') ||300, height : op.config.height || $("#"+that.get(0).id).attr('height') ||150, //canvas property //あとでlineや軸別にconfig設定可能にする fillStyle : op.config.fillStyle || "rgba(255,0,0,0.5)", strokeStyle : op.config.strokeStyle || "rgba(180,180,180,0.5)", lineWidth : op.config.lineWidth || 1, //フォントサイズ scaleFontSize : op.config.scaleFontSize || op.fontSize || 10, dataFontSize : op.config.dataFontSize || op.fontSize || 10, //チャート領域のパディング paddingL : op.config.paddingL || 40, paddingT : op.config.paddingT || 30, paddingR : op.config.paddingR || 10, paddingB : op.config.paddingB || 30, //Title title : op.config.title || 'jquery.jQchart', titleTop : op.config.titleTop || 5, titleLeft : op.config.titleLeft || 70, //Y目盛 dataYmin : op.config.yScale.min || 0, dataYmax : op.config.yScale.max || 1000, dataYgap : op.config.yScale.gap || 100, scaleYLeft : op.config.scaleYLeft || 4, xText : op.config.xText, //チャート領域のデータ表示 labelDataShow : op.config.labelDataShow || true, labelDataOffsetY: op.config.labelDataOffsetY || 10, labelDataOffsetX: op.config.labelDataOffsetX || 0, data : op.data ||{} },op||{}); this.op.grid = { col:this.op.data[0].length+1||50,//暫定 row:this.op.dataYmax/this.op.dataYgap }; this.op.scaleXTop =this.op.scaleYBottom =this.op.height-this.op.paddingB; this.op.scaleXBottom =this.op.width-this.op.paddingR; this.op.chartWidth =this.op.width -this.op.paddingL-this.op.paddingR; this.op.chartHeight =this.op.height-this.op.paddingT-this.op.paddingB; this.op.scaleYTop =this.op.paddingT; this.op.scaleXLeft =this.op.paddingL; this.op.yGap =this.op.dataYgap*this.op.chartHeight/this.op.dataYmax this.op.xGap =this.op.chartWidth/this.op.grid.col this.resetBox(this.op.id); this.mkCanvas(this.op); }, //リセット resetBox : function(id){ $("#jQchart-title-T-"+id).remove(); $("#jQchart-scale-Y-"+id).remove(); $("#jQchart-scale-X-"+id).remove(); $("#jQchart-data-D-"+id).remove(); }, //キャンバスセット mkCanvas : function (op){ its=this; //for Opera Bug if(jQuery.browser.opera && eval(jQuery.browser.version,10)<9.5) $($(that)).get(0).outerHTML=('

'); //Canvas要素 this.canvas = $($(that)) .attr('width' ,this.op.width) .attr('height' ,this.op.height) .get(0) //メインCanvasDIV作成 this.jQcanvasBox =this.mkBox4Canvas(this.canvas); this.canvasBox =$(this.jQcanvasBox).get(0); if (this.canvas.getContext){ this.ctx=this.canvas.getContext('2d'); //キャンバスプロパティ設定 this.ctx.fillStyle =this.op.fillStyle; this.ctx.strokeStyle =this.op.strokeStyle; this.ctx.lineWidth =this.op.lineWidth; this.ctx.shadowBlur = 10; this.ctx.shadowOffsetX = 10; //XY軸描画 this.setXline(this.op); this.setYline(this.op); //各DIV作成 this.titleBox//Title =this.mkBoxElement('T', this.op.titleLeft,this.op.titleTop ).appendTo(this.jQcanvasBox) .css('width',this.op.width-this.op.titleLeft)//fix for safari3 2007.12.4 .get(0); this.scaleYBox//Y軸スケール =this.mkBoxElement('Y', this.op.scaleYLeft,this.op.scaleYTop ).appendTo(this.jQcanvasBox).get(0); this.scaleXBox//X軸スケール =this.mkBoxElement('X', this.op.scaleXLeft,this.op.scaleXTop ).appendTo(this.jQcanvasBox).get(0); this.dataBox //チャート上のデータ =this.mkBoxElement('D', this.op.paddingL+ 'px',this.op.paddingT+ 'px' ).appendTo(this.jQcanvasBox) .get(0); //チャート上のデータ表示/非表示 if(this.op.labelDataShow){ $(this.dataBox).show() } else { $(this.dataBox).hide() } //ダブルクリックで位置のドラッグ移動が可能になります if(jQuery)if(jQuery.ui)if(jQuery.ui.draggable){ var _cnt=0;_cnt++;if(_cnt>1)return;/*for fix unbind*/ this.jQcanvasBox.unbind('dblclick'); this.jQcanvasBox.dblclick(function(e){ if(!$(this).hasClass("ui-draggable")){ draggingon(this); } }) .mousedown(function(){_cnt=0/*fix unbind*/}) .click(function(e){ if(e.target.id!=$(this).get(0).id) draggingoff(this); }) } function draggingon(oj){ //var jclen=$(".jQchart").length; $(oj).draggable({opacity:0.5 }) .addClass("ui-draggable") .removeClass("ui-draggable-disabled") .css('border','2px dotted cyan') .css("zIndex",$.fn.jQchart.global_zIndex++) /*.append($('

[X]-close

').one('click',function(){ $(_cbox).replaceWith('

') })) */ .append('

draggable-ドラッグできます

') } function draggingoff(oj){ $(oj).draggableDisable() .css('border','0px') .removeClass("ui-draggable") .addClass("ui-draggable-disabled") $("#jQchart-drgmsg-M-"+oj.id).remove(); } //========dbug======== //this._debugShowPos4(); } }, mkBox4Canvas:function(canvas){ if(!document.getElementById("jQchart-" +this.op.id)) return $('

') .attr('id','jQchart-'+this.op.id) .attr('class','jQchart') .css({ position : 'relative', margin :'0px', padding :'0px', width : this.op.width+'px', height : this.op.height+'px' }) .insertBefore(canvas) .append(canvas) else return $("#jQchart-" +this.op.id) }, mkBoxElement:function(type,x,y){ var typeName=''; switch(type){ case 'T' : typeName='title';break; case 'Y' : typeName='scale';break; case 'X' : typeName='scale';break; case 'D' : typeName='data' ;break; }; if($("'#jQchart-scale-" +type+'-'+this.op.id+"'" ).length==0) return $('

') .attr('id' ,'jQchart-'+typeName+'-'+type+'-'+this.op.id) .attr('class','jQchart-'+typeName+'-'+type) .css({ position : this.op.position ||'absolute', left : x ||'10px', top : y ||'10px' }) .appendTo(document.body) }, //Title wrtTitle : function(op){ op.subclass = 'title' ; this.wrtText(0+ 'px',0+ 'px', this.op.title, op, "#jQchart-title-T-"+this.op.id ); }, //Y軸ラベル wrtYscale : function(op){ op.subclass = 'labelY' ; op.color = '#333' ; op.start = this.util.getBasePoint(this.op); var x=this.op.scaleYLeft , y=this.op.chartHeight - this.op.scaleFontSize ; for (var i = 0, currP=0; i <= op.grid.row;i++) { this.wrtText(x+ 'px',y+ 'px', currP+" ", op, "#jQchart-scale-Y-"+this.op.id ); y -=this.op.yGap; currP +=this.op.dataYgap this.util.setNextY(op); } }, //水平線軸 setXline : function(op){ this.op.begin = this.util.getBasePoint(this.op); this.op.end ={ x : this.op.scaleXBottom, y : this.op.begin.y } for (var i = 0; i <= this.op.grid.row; i++) { this.drawLine(this.op); this.util.setNextY(this.op); } this.op.setXline=true; }, //垂直線軸 setYline : function(op){ this.op.begin = this.util.getBasePoint(this.op); this.op.end ={ x : this.op.begin.x, y : this.op.scaleYTop }; for (var i = 0; i <= this.op.grid.col ; i++) { this.drawLine(this.op); this.util.setNextX(this.op); } this.op.setYline=true; }, //軸描画 drawLine : function(op){ this.ctx.beginPath(); this.ctx.moveTo(op.begin.x,op.begin.y); this.ctx.lineTo(op.end.x ,op.end.y ); this.ctx.stroke(); this.ctx.save(); }, //折れ線描画 wrtGraph : function(op){ //200:y=700:100 if(typeof op =='object')this.op = op ; this.init(this.op); this.op.rows=this.op.data[0];//暫定あとで複数Line対応に this.op.subclass = 'labelData'; this.op.color = 'orange' ; this.ctx.strokeStyle="red";//折れ線色あとでoption指定に var x = this.op.paddingL, y = - this.op.rows[0]*this.op.height/this.op.dataYmax ; this.ctx.beginPath(); for (var i = 0; i < this.op.rows.length; i++) { x += this.op.xGap; y = this.op.paddingT+ this.op.chartHeight -this.op.rows[i]*this.op.chartHeight/this.op.dataYmax ; if(i==0) this.ctx.moveTo(x,y); else this.ctx.lineTo(x,y); //データ if( x <= this.op.width){ var dx=x-this.op.paddingL,dy=y-this.op.paddingT; this.wrtText( dx+this.op.labelDataOffsetX+ 'px', dy+this.op.labelDataOffsetY+ 'px', this.op.rows[i],this.op, "#jQchart-data-D-"+this.op.id ); }//alert(this.op.rows[i],this.op) } //タイトルへ this.wrtTitle(this.op); //Yラベルへ this.wrtYscale(this.op); this.ctx.stroke(); return $("#"+this.op.id); }, //文字出力 wrtText : function(x,y,text,op,scope){ var op=op||this.op; if(op.subclass)var subclass= op.subclass; $('

') .append(text) .css({ position : op.position ||'absolute', left : x ||'10px', top : y ||'10px' }) .appendTo(scope||document.body) }, hoverDataEffect : function(){ $(".jQchart-labelData-"+this.op.id).hover(hover,unhover) function hover(){$(this).css("font-size","2em")} function unhover(){$(this).css("font-size",1+"em")} }, //デバッグ用 _debugShowPos4 : function(){ var htm='Properties of
' +'$("#'+this.op.id+'").jQchart.op

' for(var i in this.op)htm+=i+" : "+this.op[i]+"
" $("

").html(htm) .appendTo(document.body) .draggable({opacity:0.5 }) .css({ position : 'absolute', top : '10px', left : '70%', margin : '10px', padding : '10px', backgroundColor : '#eee' }) }, util : new function(){ return { getMinMax : function(ary){ for (var i = 0,a=[]; i < ary.length; i++)a.push(ary[i].split(',')[3]) return { min:a.sort()[0],max:a.reverse()[0] } }, getBasePoint : function(op){ return { x : op.scaleXLeft, y : op.scaleYBottom } }, setNextX : function(op){op.begin.x = op.end.x += op.xGap;}, setNextY : function(op){op.begin.y = op.end.y -= op.yGap;} } } }); $(that).jQchart.draw(_option);//描画 return $(this); } return $(this); }})(jQuery);