From 2b6c1a9e5fda1e96a438209159bae09e2dcabbe8 Mon Sep 17 00:00:00 2001 From: kndoo Date: Sun, 4 Nov 2018 01:39:37 +0900 Subject: [PATCH 1/2] Remove excanvas-compressed.js Remove excanvas-compressed.js to avoid loading both excanvas.js and excanvas-compressed.js. --- .../html5jp_graphs/excanvas-compressed.js | 19 ------------------- 1 file changed, 19 deletions(-) delete mode 100755 vendor/assets/javascripts/html5jp_graphs/excanvas-compressed.js diff --git a/vendor/assets/javascripts/html5jp_graphs/excanvas-compressed.js b/vendor/assets/javascripts/html5jp_graphs/excanvas-compressed.js deleted file mode 100755 index 9d71658..0000000 --- a/vendor/assets/javascripts/html5jp_graphs/excanvas-compressed.js +++ /dev/null @@ -1,19 +0,0 @@ -if(!window.CanvasRenderingContext2D){(function(){var I=Math,i=I.round,L=I.sin,M=I.cos,m=10,A=m/2,Q={init:function(a){var b=a||document;if(/MSIE/.test(navigator.userAgent)&&!window.opera){var c=this;b.attachEvent("onreadystatechange",function(){c.r(b)})}},r:function(a){if(a.readyState=="complete"){if(!a.namespaces["s"]){a.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml")}var b=a.createStyleSheet();b.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}g_vml_\\:*{behavior:url(#default#VML)}"; -var c=a.getElementsByTagName("canvas");for(var d=0;d"){var d="/"+a.tagName,e;while((e=a.nextSibling)&&e.tagName!=d){e.removeNode()}if(e){e.removeNode()}}a.parentNode.replaceChild(c,a);return c},initElement:function(a){a=this.q(a);a.getContext=function(){if(this.l){return this.l}return this.l=new K(this)};a.attachEvent("onpropertychange",V);a.attachEvent("onresize", -W);var b=a.attributes;if(b.width&&b.width.specified){a.style.width=b.width.nodeValue+"px"}else{a.width=a.clientWidth}if(b.height&&b.height.specified){a.style.height=b.height.nodeValue+"px"}else{a.height=a.clientHeight}return a}};function V(a){var b=a.srcElement;switch(a.propertyName){case "width":b.style.width=b.attributes.width.nodeValue+"px";b.getContext().clearRect();break;case "height":b.style.height=b.attributes.height.nodeValue+"px";b.getContext().clearRect();break}}function W(a){var b=a.srcElement; -if(b.firstChild){b.firstChild.style.width=b.clientWidth+"px";b.firstChild.style.height=b.clientHeight+"px"}}Q.init();var R=[];for(var E=0;E<16;E++){for(var F=0;F<16;F++){R[E*16+F]=E.toString(16)+F.toString(16)}}function J(){return[[1,0,0],[0,1,0],[0,0,1]]}function G(a,b){var c=J();for(var d=0;d<3;d++){for(var e=0;e<3;e++){var g=0;for(var h=0;h<3;h++){g+=a[d][h]*b[h][e]}c[d][e]=g}}return c}function N(a,b){b.fillStyle=a.fillStyle;b.lineCap=a.lineCap;b.lineJoin=a.lineJoin;b.lineWidth=a.lineWidth;b.miterLimit= -a.miterLimit;b.shadowBlur=a.shadowBlur;b.shadowColor=a.shadowColor;b.shadowOffsetX=a.shadowOffsetX;b.shadowOffsetY=a.shadowOffsetY;b.strokeStyle=a.strokeStyle;b.d=a.d;b.e=a.e}function O(a){var b,c=1;a=String(a);if(a.substring(0,3)=="rgb"){var d=a.indexOf("(",3),e=a.indexOf(")",d+1),g=a.substring(d+1,e).split(",");b="#";for(var h=0;h<3;h++){b+=R[Number(g[h])]}if(g.length==4&&a.substr(3,1)=="a"){c=g[3]}}else{b=a}return[b,c]}function S(a){switch(a){case "butt":return"flat";case "round":return"round"; -case "square":default:return"square"}}function K(a){this.a=J();this.m=[];this.k=[];this.c=[];this.strokeStyle="#000";this.fillStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=m*1;this.globalAlpha=1;this.canvas=a;var b=a.ownerDocument.createElement("div");b.style.width=a.clientWidth+"px";b.style.height=a.clientHeight+"px";b.style.overflow="hidden";b.style.position="absolute";a.appendChild(b);this.j=b;this.d=1;this.e=1}var j=K.prototype;j.clearRect=function(){this.j.innerHTML= -"";this.c=[]};j.beginPath=function(){this.c=[]};j.moveTo=function(a,b){this.c.push({type:"moveTo",x:a,y:b});this.f=a;this.g=b};j.lineTo=function(a,b){this.c.push({type:"lineTo",x:a,y:b});this.f=a;this.g=b};j.bezierCurveTo=function(a,b,c,d,e,g){this.c.push({type:"bezierCurveTo",cp1x:a,cp1y:b,cp2x:c,cp2y:d,x:e,y:g});this.f=e;this.g=g};j.quadraticCurveTo=function(a,b,c,d){var e=this.f+0.6666666666666666*(a-this.f),g=this.g+0.6666666666666666*(b-this.g),h=e+(c-this.f)/3,l=g+(d-this.g)/3;this.bezierCurveTo(e, -g,h,l,c,d)};j.arc=function(a,b,c,d,e,g){c*=m;var h=g?"at":"wa",l=a+M(d)*c-A,n=b+L(d)*c-A,o=a+M(e)*c-A,f=b+L(e)*c-A;if(l==o&&!g){l+=0.125}this.c.push({type:h,x:a,y:b,radius:c,xStart:l,yStart:n,xEnd:o,yEnd:f})};j.rect=function(a,b,c,d){this.moveTo(a,b);this.lineTo(a+c,b);this.lineTo(a+c,b+d);this.lineTo(a,b+d);this.closePath()};j.strokeRect=function(a,b,c,d){this.beginPath();this.moveTo(a,b);this.lineTo(a+c,b);this.lineTo(a+c,b+d);this.lineTo(a,b+d);this.closePath();this.stroke()};j.fillRect=function(a, -b,c,d){this.beginPath();this.moveTo(a,b);this.lineTo(a+c,b);this.lineTo(a+c,b+d);this.lineTo(a,b+d);this.closePath();this.fill()};j.createLinearGradient=function(a,b,c,d){var e=new H("gradient");return e};j.createRadialGradient=function(a,b,c,d,e,g){var h=new H("gradientradial");h.n=c;h.o=g;h.i.x=a;h.i.y=b;return h};j.drawImage=function(a,b){var c,d,e,g,h,l,n,o,f=a.runtimeStyle.width,k=a.runtimeStyle.height;a.runtimeStyle.width="auto";a.runtimeStyle.height="auto";var q=a.width,r=a.height;a.runtimeStyle.width= -f;a.runtimeStyle.height=k;if(arguments.length==3){c=arguments[1];d=arguments[2];h=(l=0);n=(e=q);o=(g=r)}else if(arguments.length==5){c=arguments[1];d=arguments[2];e=arguments[3];g=arguments[4];h=(l=0);n=q;o=r}else if(arguments.length==9){h=arguments[1];l=arguments[2];n=arguments[3];o=arguments[4];c=arguments[5];d=arguments[6];e=arguments[7];g=arguments[8]}else{throw"Invalid number of arguments";}var s=this.b(c,d),t=[],v=10,w=10;t.push(" ','","");this.j.insertAdjacentHTML("BeforeEnd",t.join(""))};j.stroke=function(a){var b=[],c=O(a?this.fillStyle:this.strokeStyle),d=c[0],e=c[1]*this.globalAlpha,g=10,h=10;b.push("n.x){n.x=k.x}if(l.y== -null||k.yn.y){n.y=k.y}}}b.push(' ">');if(typeof this.fillStyle=="object"){var v={x:"50%",y:"50%"},w=n.x-l.x,x=n.y-l.y,p=w>x?w:x;v.x=i(this.fillStyle.i.x/w*100+50)+"%";v.y=i(this.fillStyle.i.y/x*100+50)+"%";var y=[];if(this.fillStyle.p=="gradientradial"){var z=this.fillStyle.n/p*100,B=this.fillStyle.o/p*100-z}else{var z=0,B=100}var C={offset:null,color:null},D={offset:null,color:null};this.fillStyle.h.sort(function(T,U){return T.offset-U.offset});for(var o=0;oC.offset||C.offset==null){C.offset=u.offset;C.color=u.color}if(u.offset')}else if(a){b.push('')}else{b.push("')}b.push("");this.j.insertAdjacentHTML("beforeEnd",b.join(""));this.c=[]};j.fill=function(){this.stroke(true)};j.closePath=function(){this.c.push({type:"close"})};j.b=function(a,b){return{x:m*(a*this.a[0][0]+b*this.a[1][0]+this.a[2][0])-A,y:m*(a*this.a[0][1]+b*this.a[1][1]+this.a[2][1])-A}};j.save=function(){var a={};N(this,a); -this.k.push(a);this.m.push(this.a);this.a=G(J(),this.a)};j.restore=function(){N(this.k.pop(),this);this.a=this.m.pop()};j.translate=function(a,b){var c=[[1,0,0],[0,1,0],[a,b,1]];this.a=G(c,this.a)};j.rotate=function(a){var b=M(a),c=L(a),d=[[b,c,0],[-c,b,0],[0,0,1]];this.a=G(d,this.a)};j.scale=function(a,b){this.d*=a;this.e*=b;var c=[[a,0,0],[0,b,0],[0,0,1]];this.a=G(c,this.a)};j.clip=function(){};j.arcTo=function(){};j.createPattern=function(){return new P};function H(a){this.p=a;this.n=0;this.o= -0;this.h=[];this.i={x:0,y:0}}H.prototype.addColorStop=function(a,b){b=O(b);this.h.push({offset:1-a,color:b})};function P(){}G_vmlCanvasManager=Q;CanvasRenderingContext2D=K;CanvasGradient=H;CanvasPattern=P})()}; From ab19d11572b83a7aaff1234299ddd932a59221bf Mon Sep 17 00:00:00 2001 From: kndoo Date: Sun, 4 Nov 2018 03:49:31 +0900 Subject: [PATCH 2/2] Update HTML5.jp Graph Libraries Update HTML5.jp Graph Libraries (vbar 1.0.4, radar 1.0.2, line 1.0.2, and circle 1.0.2) --- .../javascripts/html5jp_graphs/circle.js | 175 ++--- .../javascripts/html5jp_graphs/excanvas.js | 693 +++++++++++------- .../assets/javascripts/html5jp_graphs/line.js | 22 +- .../javascripts/html5jp_graphs/radar.js | 26 +- .../assets/javascripts/html5jp_graphs/vbar.js | 141 ++-- 5 files changed, 602 insertions(+), 455 deletions(-) diff --git a/vendor/assets/javascripts/html5jp_graphs/circle.js b/vendor/assets/javascripts/html5jp_graphs/circle.js index 102b009..d8fd46c 100755 --- a/vendor/assets/javascripts/html5jp_graphs/circle.js +++ b/vendor/assets/javascripts/html5jp_graphs/circle.js @@ -1,4 +1,4 @@ -// Copyright 2007 futomi http://www.html5.jp/ +// Copyright 2007-2009 futomi http://www.html5.jp/ // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. @@ -11,6 +11,8 @@ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. +// +// circle.js v1.0.2 if( typeof html5jp == 'undefined' ) { html5jp = new Object(); @@ -25,17 +27,19 @@ if( typeof html5jp.graph == 'undefined' ) { html5jp.graph.circle = function (id) { var elm = document.getElementById(id); if(! elm) { return; } - if(elm.nodeName != "CANVAS") { return; } - if(elm.parentNode.nodeName != "DIV") { return; }; - this.canvas = elm; + if( ! elm.nodeName.match(/^CANVAS$/i) ) { return; } + if( ! elm.parentNode.nodeName.match(/^DIV$/i) ) { return; }; /* CANVAS要素 */ - if ( ! this.canvas ){ return; } - if ( ! this.canvas.getContext ){ return; } + if ( ! elm.getContext ){ return; } + this.canvas = elm; /* 2D コンテクストの生成 */ this.ctx = this.canvas.getContext('2d'); this.canvas.style.margin = "0"; this.canvas.parentNode.style.position = "relative"; this.canvas.parentNode.style.padding = "0"; + /* CANVAS要素の親要素となるDIV要素の幅と高さをセット */ + this.canvas.parentNode.style.width = this.canvas.width + "px"; + this.canvas.parentNode.style.height = this.canvas.height + "px"; }; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * 描画 @@ -130,7 +134,7 @@ html5jp.graph.circle.prototype.draw = function(items, inparams) { var sum = 0; for(var i=0; i 0) { + /* 円弧を描画 */ + this.ctx.beginPath(); + if(p >= 100) { // for excanvas + this.ctx.arc(cpos.x, cpos.y, cpos.r, 0, Math.PI*2, false); + } else { + this.ctx.moveTo(cpos.x,cpos.y); + this.ctx.lineTo( + cpos.x + cpos.r * Math.cos(startAngle), + cpos.y + cpos.r * Math.sin(startAngle) + ); + this.ctx.arc(cpos.x, cpos.y, cpos.r, startAngle, endAngle, false); } - } else { - if(params.caption == true) { - div.appendChild( document.createTextNode(cap) ); - if(params.captionNum == true || params.captionRate == true) { - div.appendChild( document.createElement('BR') ); - } + this.ctx.closePath(); + /* 円グラフのグラデーションをセット */ + var radgrad = this.ctx.createRadialGradient(cpos.x,cpos.y,0,cpos.x,cpos.y,cpos.r); + radgrad.addColorStop(0, "rgba(" + rgb + ",1)"); + radgrad.addColorStop(0.7, "rgba(" + rgb + ",0.85)"); + radgrad.addColorStop(1, "rgba(" + rgb + ",0.75)"); + this.ctx.fillStyle = radgrad; + this.ctx.fill(); + /* 円弧の枠線 */ + if(params.border == true) { + this.ctx.stroke(); } - if(params.captionRate == true) { - div.appendChild( document.createTextNode( p + "%" ) ); + /* キャプション */ + var drate; + var fontSize; + if(r <= 0.03) { + drate = 1.1; + } else if(r <= 0.05) { + drate = 0.9; + } else if(r <= 0.1) { + drate = 0.8; + } else if(r <= 0.15) { + drate = 0.7; + } else { + drate = 0.6; } - if(params.captionNum == true) { - var numCap = n; - if(params.caption == true || params.captionRate == true) { - numCap = "(" + numCap + ")"; + var cp = { + x: cpos.x + (cpos.r * drate) * Math.cos( (startAngle + endAngle) / 2 ), + y: cpos.y + (cpos.r * drate) * Math.sin( (startAngle + endAngle) / 2 ) + }; + var div = document.createElement('DIV'); + if(r <= 0.05) { + if(params.captionRate == true) { + div.appendChild( document.createTextNode( p + "%") ); + } + } else { + if(params.caption == true) { + div.appendChild( document.createTextNode(cap) ); + if(params.captionNum == true || params.captionRate == true) { + div.appendChild( document.createElement('BR') ); + } + } + if(params.captionRate == true) { + div.appendChild( document.createTextNode( p + "%" ) ); + } + if(params.captionNum == true) { + var numCap = n; + if(params.caption == true || params.captionRate == true) { + numCap = "(" + numCap + ")"; + } + div.appendChild( document.createTextNode( numCap ) ); } - div.appendChild( document.createTextNode( numCap ) ); } - } - div.style.position = 'absolute'; - div.style.textAlign = 'center'; - div.style.color = params.captionColor; - div.style.fontSize = params.fontSize; - div.style.fontFamily = params.fontFamily; - div.style.margin = "0"; - div.style.padding = "0"; - div.style.visible = "hidden"; - if( params.textShadow == true ) { - var dif = [ [ 0, 1], [ 0, -1], [ 1, 0], [ 1, 1], [ 1, -1], [-1, 0], [-1, 1], [-1, -1] ]; - for(var j=0; j<8; j++) { - var s = div.cloneNode(true); - this.canvas.parentNode.appendChild(s); - s.style.color = "black"; - s.style.left = (parseFloat(cp.x - s.offsetWidth / 2 + dif[j][0])).toString() + "px"; - s.style.top = (cp.y - s.offsetHeight / 2 + dif[j][1]).toString() + "px"; + div.style.position = 'absolute'; + div.style.textAlign = 'center'; + div.style.color = params.captionColor; + div.style.fontSize = params.fontSize; + div.style.fontFamily = params.fontFamily; + div.style.margin = "0"; + div.style.padding = "0"; + div.style.visible = "hidden"; + if( params.textShadow == true ) { + var dif = [ [ 0, 1], [ 0, -1], [ 1, 0], [ 1, 1], [ 1, -1], [-1, 0], [-1, 1], [-1, -1] ]; + for(var j=0; j<8; j++) { + var s = div.cloneNode(true); + this.canvas.parentNode.appendChild(s); + s.style.color = "black"; + s.style.left = (parseFloat(cp.x - s.offsetWidth / 2 + dif[j][0])).toString() + "px"; + s.style.top = (cp.y - s.offsetHeight / 2 + dif[j][1]).toString() + "px"; + } } + this.canvas.parentNode.appendChild(div); + div.style.left = (cp.x - div.offsetWidth / 2).toString() + "px"; + div.style.top = (cp.y - div.offsetHeight / 2).toString() + "px"; } - this.canvas.parentNode.appendChild(div); - div.style.left = (cp.x - div.offsetWidth / 2).toString() + "px"; - div.style.top = (cp.y - div.offsetHeight / 2).toString() + "px"; /* 凡例 */ if(params.legend == true) { /* 文字 */ diff --git a/vendor/assets/javascripts/html5jp_graphs/excanvas.js b/vendor/assets/javascripts/html5jp_graphs/excanvas.js index 3e1aedf..367764b 100755 --- a/vendor/assets/javascripts/html5jp_graphs/excanvas.js +++ b/vendor/assets/javascripts/html5jp_graphs/excanvas.js @@ -28,80 +28,101 @@ // (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype) // or use Box Sizing Behavior from WebFX // (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html) +// * Non uniform scaling does not correctly scale strokes. // * Optimize. There is always room for speed improvements. -// only add this code if we do not already have a canvas implementation -if (!window.CanvasRenderingContext2D) { +// Only add this code if we do not already have a canvas implementation +if (!document.createElement('canvas').getContext) { -(function () { +(function() { // alias some functions to make (compiled) code shorter var m = Math; var mr = m.round; var ms = m.sin; var mc = m.cos; + var abs = m.abs; + var sqrt = m.sqrt; // this is used for sub pixel precision var Z = 10; var Z2 = Z / 2; + /** + * This funtion is assigned to the elements as element.getContext(). + * @this {HTMLElement} + * @return {CanvasRenderingContext2D_} + */ + function getContext() { + return this.context_ || + (this.context_ = new CanvasRenderingContext2D_(this)); + } + + var slice = Array.prototype.slice; + + /** + * Binds a function to an object. The returned function will always use the + * passed in {@code obj} as {@code this}. + * + * Example: + * + * g = bind(f, obj, a, b) + * g(c, d) // will do f.call(obj, a, b, c, d) + * + * @param {Function} f The function to bind the object to + * @param {Object} obj The object that should act as this when the function + * is called + * @param {*} var_args Rest arguments that will be used as the initial + * arguments when the function is called + * @return {Function} A new function that has bound this + */ + function bind(f, obj, var_args) { + var a = slice.call(arguments, 2); + return function() { + return f.apply(obj, a.concat(slice.call(arguments))); + }; + } + var G_vmlCanvasManager_ = { - init: function (opt_doc) { - var doc = opt_doc || document; + init: function(opt_doc) { if (/MSIE/.test(navigator.userAgent) && !window.opera) { - var self = this; - doc.attachEvent("onreadystatechange", function () { - self.init_(doc); - }); + var doc = opt_doc || document; + // Create a dummy element so that IE will allow canvas elements to be + // recognized. + doc.createElement('canvas'); + doc.attachEvent('onreadystatechange', bind(this.init_, this, doc)); } }, - init_: function (doc) { - if (doc.readyState == "complete") { - // create xmlns - if (!doc.namespaces["g_vml_"]) { - doc.namespaces.add("g_vml_", "urn:schemas-microsoft-com:vml"); - } + init_: function(doc) { + // create xmlns + if (!doc.namespaces['g_vml_']) { + doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml', + '#default#VML'); - // setup default css + } + if (!doc.namespaces['g_o_']) { + doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office', + '#default#VML'); + } + + // Setup default CSS. Only add one style sheet per document + if (!doc.styleSheets['ex_canvas_']) { var ss = doc.createStyleSheet(); - ss.cssText = "canvas{display:inline-block;overflow:hidden;" + + ss.owningElement.id = 'ex_canvas_'; + ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + // default size is 300x150 in Gecko and Opera - "text-align:left;width:300px;height:150px}" + - "g_vml_\\:*{behavior:url(#default#VML)}"; - - // find all canvas elements - var els = doc.getElementsByTagName("canvas"); - for (var i = 0; i < els.length; i++) { - if (!els[i].getContext) { - this.initElement(els[i]); - } - } + 'text-align:left;width:300px;height:150px}' + + 'g_vml_\\:*{behavior:url(#default#VML)}' + + 'g_o_\\:*{behavior:url(#default#VML)}'; + } - }, - fixElement_: function (el) { - // in IE before version 5.5 we would need to add HTML: to the tag name - // but we do not care about IE before version 6 - var outerHTML = el.outerHTML; - - var newEl = el.ownerDocument.createElement(outerHTML); - // if the tag is still open IE has created the children as siblings and - // it has also created a tag with the name "/FOO" - if (outerHTML.slice(-2) != "/>") { - var tagName = "/" + el.tagName; - var ns; - // remove content - while ((ns = el.nextSibling) && ns.tagName != tagName) { - ns.removeNode(); - } - // remove the incorrect closing tag - if (ns) { - ns.removeNode(); - } + // find all canvas elements + var els = doc.getElementsByTagName('canvas'); + for (var i = 0; i < els.length; i++) { + this.initElement(els[i]); } - el.parentNode.replaceChild(newEl, el); - return newEl; }, /** @@ -112,35 +133,37 @@ if (!window.CanvasRenderingContext2D) { * @param {HTMLElement} el The canvas element to initialize. * @return {HTMLElement} the element that was created. */ - initElement: function (el) { - el = this.fixElement_(el); - el.getContext = function () { - if (this.context_) { - return this.context_; + initElement: function(el) { + if (!el.getContext) { + + el.getContext = getContext; + + // Remove fallback content. There is no way to hide text nodes so we + // just remove all childNodes. We could hide all elements and remove + // text nodes but who really cares about the fallback content. + el.innerHTML = ''; + + // do not use inline function because that will leak memory + el.attachEvent('onpropertychange', onPropertyChange); + el.attachEvent('onresize', onResize); + + var attrs = el.attributes; + if (attrs.width && attrs.width.specified) { + // TODO: use runtimeStyle and coordsize + // el.getContext().setWidth_(attrs.width.nodeValue); + el.style.width = attrs.width.nodeValue + 'px'; + } else { + el.width = el.clientWidth; } - return this.context_ = new CanvasRenderingContext2D_(this); - }; - - // do not use inline function because that will leak memory - el.attachEvent('onpropertychange', onPropertyChange); - el.attachEvent('onresize', onResize); - - var attrs = el.attributes; - if (attrs.width && attrs.width.specified) { - // TODO: use runtimeStyle and coordsize - // el.getContext().setWidth_(attrs.width.nodeValue); - el.style.width = attrs.width.nodeValue + "px"; - } else { - el.width = el.clientWidth; - } - if (attrs.height && attrs.height.specified) { - // TODO: use runtimeStyle and coordsize - // el.getContext().setHeight_(attrs.height.nodeValue); - el.style.height = attrs.height.nodeValue + "px"; - } else { - el.height = el.clientHeight; + if (attrs.height && attrs.height.specified) { + // TODO: use runtimeStyle and coordsize + // el.getContext().setHeight_(attrs.height.nodeValue); + el.style.height = attrs.height.nodeValue + 'px'; + } else { + el.height = el.clientHeight; + } + //el.getContext().setCoordsize_() } - //el.getContext().setCoordsize_() return el; } }; @@ -150,11 +173,11 @@ if (!window.CanvasRenderingContext2D) { switch (e.propertyName) { case 'width': - el.style.width = el.attributes.width.nodeValue + "px"; + el.style.width = el.attributes.width.nodeValue + 'px'; el.getContext().clearRect(); break; case 'height': - el.style.height = el.attributes.height.nodeValue + "px"; + el.style.height = el.attributes.height.nodeValue + 'px'; el.getContext().clearRect(); break; } @@ -214,43 +237,45 @@ if (!window.CanvasRenderingContext2D) { o2.shadowOffsetX = o1.shadowOffsetX; o2.shadowOffsetY = o1.shadowOffsetY; o2.strokeStyle = o1.strokeStyle; + o2.globalAlpha = o1.globalAlpha; o2.arcScaleX_ = o1.arcScaleX_; o2.arcScaleY_ = o1.arcScaleY_; + o2.lineScale_ = o1.lineScale_; } function processStyle(styleString) { var str, alpha = 1; styleString = String(styleString); - if (styleString.substring(0, 3) == "rgb") { - var start = styleString.indexOf("(", 3); - var end = styleString.indexOf(")", start + 1); - var guts = styleString.substring(start + 1, end).split(","); + if (styleString.substring(0, 3) == 'rgb') { + var start = styleString.indexOf('(', 3); + var end = styleString.indexOf(')', start + 1); + var guts = styleString.substring(start + 1, end).split(','); - str = "#"; + str = '#'; for (var i = 0; i < 3; i++) { str += dec2hex[Number(guts[i])]; } - if ((guts.length == 4) && (styleString.substr(3, 1) == "a")) { + if (guts.length == 4 && styleString.substr(3, 1) == 'a') { alpha = guts[3]; } } else { str = styleString; } - return [str, alpha]; + return {color: str, alpha: alpha}; } function processLineCap(lineCap) { switch (lineCap) { - case "butt": - return "flat"; - case "round": - return "round"; - case "square": + case 'butt': + return 'flat'; + case 'round': + return 'round'; + case 'square': default: - return "square"; + return 'square'; } } @@ -260,7 +285,7 @@ if (!window.CanvasRenderingContext2D) { * @param {HTMLElement} surfaceElement The element that the 2D context should * be associated with */ - function CanvasRenderingContext2D_(surfaceElement) { + function CanvasRenderingContext2D_(surfaceElement) { this.m_ = createMatrixIdentity(); this.mStack_ = []; @@ -268,12 +293,12 @@ if (!window.CanvasRenderingContext2D) { this.currentPath_ = []; // Canvas context properties - this.strokeStyle = "#000"; - this.fillStyle = "#000"; + this.strokeStyle = '#000'; + this.fillStyle = '#000'; this.lineWidth = 1; - this.lineJoin = "miter"; - this.lineCap = "butt"; + this.lineJoin = 'miter'; + this.lineCap = 'butt'; this.miterLimit = Z * 1; this.globalAlpha = 1; this.canvas = surfaceElement; @@ -288,67 +313,88 @@ if (!window.CanvasRenderingContext2D) { this.element_ = el; this.arcScaleX_ = 1; this.arcScaleY_ = 1; - }; + this.lineScale_ = 1; + } var contextPrototype = CanvasRenderingContext2D_.prototype; contextPrototype.clearRect = function() { - this.element_.innerHTML = ""; - this.currentPath_ = []; + this.element_.innerHTML = ''; }; contextPrototype.beginPath = function() { // TODO: Branch current matrix so that save/restore has no effect // as per safari docs. - this.currentPath_ = []; }; contextPrototype.moveTo = function(aX, aY) { - this.currentPath_.push({type: "moveTo", x: aX, y: aY}); - this.currentX_ = aX; - this.currentY_ = aY; + var p = this.getCoords_(aX, aY); + this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y}); + this.currentX_ = p.x; + this.currentY_ = p.y; }; contextPrototype.lineTo = function(aX, aY) { - this.currentPath_.push({type: "lineTo", x: aX, y: aY}); - this.currentX_ = aX; - this.currentY_ = aY; + var p = this.getCoords_(aX, aY); + this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y}); + + this.currentX_ = p.x; + this.currentY_ = p.y; }; contextPrototype.bezierCurveTo = function(aCP1x, aCP1y, aCP2x, aCP2y, aX, aY) { - this.currentPath_.push({type: "bezierCurveTo", - cp1x: aCP1x, - cp1y: aCP1y, - cp2x: aCP2x, - cp2y: aCP2y, - x: aX, - y: aY}); - this.currentX_ = aX; - this.currentY_ = aY; + var p = this.getCoords_(aX, aY); + var cp1 = this.getCoords_(aCP1x, aCP1y); + var cp2 = this.getCoords_(aCP2x, aCP2y); + bezierCurveTo(this, cp1, cp2, p); }; + // Helper function that takes the already fixed cordinates. + function bezierCurveTo(self, cp1, cp2, p) { + self.currentPath_.push({ + type: 'bezierCurveTo', + cp1x: cp1.x, + cp1y: cp1.y, + cp2x: cp2.x, + cp2y: cp2.y, + x: p.x, + y: p.y + }); + self.currentX_ = p.x; + self.currentY_ = p.y; + } + contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) { // the following is lifted almost directly from // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes - var cp1x = this.currentX_ + 2.0 / 3.0 * (aCPx - this.currentX_); - var cp1y = this.currentY_ + 2.0 / 3.0 * (aCPy - this.currentY_); - var cp2x = cp1x + (aX - this.currentX_) / 3.0; - var cp2y = cp1y + (aY - this.currentY_) / 3.0; - this.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, aX, aY); + + var cp = this.getCoords_(aCPx, aCPy); + var p = this.getCoords_(aX, aY); + + var cp1 = { + x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_), + y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_) + }; + var cp2 = { + x: cp1.x + (p.x - this.currentX_) / 3.0, + y: cp1.y + (p.y - this.currentY_) / 3.0 + }; + + bezierCurveTo(this, cp1, cp2, p); }; contextPrototype.arc = function(aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise) { aRadius *= Z; - var arcType = aClockwise ? "at" : "wa"; + var arcType = aClockwise ? 'at' : 'wa'; - var xStart = aX + (mc(aStartAngle) * aRadius) - Z2; - var yStart = aY + (ms(aStartAngle) * aRadius) - Z2; + var xStart = aX + mc(aStartAngle) * aRadius - Z2; + var yStart = aY + ms(aStartAngle) * aRadius - Z2; - var xEnd = aX + (mc(aEndAngle) * aRadius) - Z2; - var yEnd = aY + (ms(aEndAngle) * aRadius) - Z2; + var xEnd = aX + mc(aEndAngle) * aRadius - Z2; + var yEnd = aY + ms(aEndAngle) * aRadius - Z2; // IE won't render arches drawn counter clockwise if xStart == xEnd. if (xStart == xEnd && !aClockwise) { @@ -356,14 +402,18 @@ if (!window.CanvasRenderingContext2D) { // that can be represented in binary } + var p = this.getCoords_(aX, aY); + var pStart = this.getCoords_(xStart, yStart); + var pEnd = this.getCoords_(xEnd, yEnd); + this.currentPath_.push({type: arcType, - x: aX, - y: aY, + x: p.x, + y: p.y, radius: aRadius, - xStart: xStart, - yStart: yStart, - xEnd: xEnd, - yEnd: yEnd}); + xStart: pStart.x, + yStart: pStart.y, + xEnd: pEnd.x, + yEnd: pEnd.y}); }; @@ -376,44 +426,55 @@ if (!window.CanvasRenderingContext2D) { }; contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) { - // Will destroy any existing path (same as FF behaviour) + var oldPath = this.currentPath_; this.beginPath(); + this.moveTo(aX, aY); this.lineTo(aX + aWidth, aY); this.lineTo(aX + aWidth, aY + aHeight); this.lineTo(aX, aY + aHeight); this.closePath(); this.stroke(); + + this.currentPath_ = oldPath; }; contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) { - // Will destroy any existing path (same as FF behaviour) + var oldPath = this.currentPath_; this.beginPath(); + this.moveTo(aX, aY); this.lineTo(aX + aWidth, aY); this.lineTo(aX + aWidth, aY + aHeight); this.lineTo(aX, aY + aHeight); this.closePath(); this.fill(); + + this.currentPath_ = oldPath; }; contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) { - var gradient = new CanvasGradient_("gradient"); + var gradient = new CanvasGradient_('gradient'); + gradient.x0_ = aX0; + gradient.y0_ = aY0; + gradient.x1_ = aX1; + gradient.y1_ = aY1; return gradient; }; - contextPrototype.createRadialGradient = function(aX0, aY0, - aR0, aX1, - aY1, aR1) { - var gradient = new CanvasGradient_("gradientradial"); - gradient.radius1_ = aR0; - gradient.radius2_ = aR1; - gradient.focus_.x = aX0; - gradient.focus_.y = aY0; + contextPrototype.createRadialGradient = function(aX0, aY0, aR0, + aX1, aY1, aR1) { + var gradient = new CanvasGradient_('gradientradial'); + gradient.x0_ = aX0; + gradient.y0_ = aY0; + gradient.r0_ = aR0; + gradient.x1_ = aX1; + gradient.y1_ = aY1; + gradient.r1_ = aR1; return gradient; }; - contextPrototype.drawImage = function (image, var_args) { + contextPrototype.drawImage = function(image, var_args) { var dx, dy, dw, dh, sx, sy, sw, sh; // to find the original width we overide the width and height @@ -454,7 +515,7 @@ if (!window.CanvasRenderingContext2D) { dw = arguments[7]; dh = arguments[8]; } else { - throw "Invalid number of arguments"; + throw Error('Invalid number of arguments'); } var d = this.getCoords_(dx, dy); @@ -471,7 +532,7 @@ if (!window.CanvasRenderingContext2D) { vmlStr.push(' ' , '', ''); - this.element_.insertAdjacentHTML("BeforeEnd", - vmlStr.join("")); + this.element_.insertAdjacentHTML('BeforeEnd', + vmlStr.join('')); }; contextPrototype.stroke = function(aFill) { var lineStr = []; var lineOpen = false; var a = processStyle(aFill ? this.fillStyle : this.strokeStyle); - var color = a[0]; - var opacity = a[1] * this.globalAlpha; + var color = a.color; + var opacity = a.alpha * this.globalAlpha; var W = 10; var H = 10; lineStr.push(' max.x) { - max.x = c.x; + if (max.x == null || p.x > max.x) { + max.x = p.x; } - if (min.y == null || c.y < min.y) { - min.y = c.y; + if (min.y == null || p.y < min.y) { + min.y = p.y; } - if (max.y == null || c.y > max.y) { - max.y = c.y; + if (max.y == null || p.y > max.y) { + max.y = p.y; } } } lineStr.push(' ">'); - if (typeof this.fillStyle == "object") { - var focus = {x: "50%", y: "50%"}; - var width = (max.x - min.x); - var height = (max.y - min.y); - var dimension = (width > height) ? width : height; + if (!aFill) { + var lineWidth = this.lineScale_ * this.lineWidth; - focus.x = mr((this.fillStyle.focus_.x / width) * 100 + 50) + "%"; - focus.y = mr((this.fillStyle.focus_.y / height) * 100 + 50) + "%"; - - var colors = []; + // VML cannot correctly render a line if the width is less than 1px. + // In that case, we dilute the color to make the line look thinner. + if (lineWidth < 1) { + opacity *= lineWidth; + } - // inside radius (%) - if (this.fillStyle.type_ == "gradientradial") { - var inside = (this.fillStyle.radius1_ / dimension * 100); + lineStr.push( + '' + ); + } else if (typeof this.fillStyle == 'object') { + var fillStyle = this.fillStyle; + var angle = 0; + var focus = {x: 0, y: 0}; + + // additional offset + var shift = 0; + // scale factor for offset + var expansion = 1; + + if (fillStyle.type_ == 'gradient') { + var x0 = fillStyle.x0_ / this.arcScaleX_; + var y0 = fillStyle.y0_ / this.arcScaleY_; + var x1 = fillStyle.x1_ / this.arcScaleX_; + var y1 = fillStyle.y1_ / this.arcScaleY_; + var p0 = this.getCoords_(x0, y0); + var p1 = this.getCoords_(x1, y1); + var dx = p1.x - p0.x; + var dy = p1.y - p0.y; + angle = Math.atan2(dx, dy) * 180 / Math.PI; + + // The angle should be a non-negative number. + if (angle < 0) { + angle += 360; + } - // percentage that outside radius exceeds inside radius - var expansion = (this.fillStyle.radius2_ / dimension * 100) - inside; + // Very small angles produce an unexpected result because they are + // converted to a scientific notation string. + if (angle < 1e-6) { + angle = 0; + } } else { - var inside = 0; - var expansion = 100; + var p0 = this.getCoords_(fillStyle.x0_, fillStyle.y0_); + var width = max.x - min.x; + var height = max.y - min.y; + focus = { + x: (p0.x - min.x) / width, + y: (p0.y - min.y) / height + }; + + width /= this.arcScaleX_ * Z; + height /= this.arcScaleY_ * Z; + var dimension = m.max(width, height); + shift = 2 * fillStyle.r0_ / dimension; + expansion = 2 * fillStyle.r1_ / dimension - shift; } - var insidecolor = {offset: null, color: null}; - var outsidecolor = {offset: null, color: null}; - - // We need to sort 'colors' by percentage, from 0 > 100 otherwise ie - // won't interpret it correctly - this.fillStyle.colors_.sort(function (cs1, cs2) { + // We need to sort the color stops in ascending order by offset, + // otherwise IE won't interpret it correctly. + var stops = fillStyle.colors_; + stops.sort(function(cs1, cs2) { return cs1.offset - cs2.offset; }); - for (var i = 0; i < this.fillStyle.colors_.length; i++) { - var fs = this.fillStyle.colors_[i]; - - colors.push( (fs.offset * expansion) + inside, "% ", fs.color, ","); + var length = stops.length; + var color1 = stops[0].color; + var color2 = stops[length - 1].color; + var opacity1 = stops[0].alpha * this.globalAlpha; + var opacity2 = stops[length - 1].alpha * this.globalAlpha; - if (fs.offset > insidecolor.offset || insidecolor.offset == null) { - insidecolor.offset = fs.offset; - insidecolor.color = fs.color; - } - - if (fs.offset < outsidecolor.offset || outsidecolor.offset == null) { - outsidecolor.offset = fs.offset; - outsidecolor.color = fs.color; - } + var colors = []; + for (var i = 0; i < length; i++) { + var stop = stops[i]; + colors.push(stop.offset * expansion + shift + ' ' + stop.color); } - colors.pop(); - - lineStr.push(''); - } else if (aFill) { - lineStr.push(''); + + // When colors attribute is used, the meanings of opacity and o:opacity2 + // are reversed. + lineStr.push(''); } else { - lineStr.push( - '' - ); + lineStr.push(''); } - lineStr.push(""); + lineStr.push(''); - this.element_.insertAdjacentHTML("beforeEnd", lineStr.join("")); - - this.currentPath_ = []; + this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); }; contextPrototype.fill = function() { @@ -684,16 +770,17 @@ if (!window.CanvasRenderingContext2D) { } contextPrototype.closePath = function() { - this.currentPath_.push({type: "close"}); + this.currentPath_.push({type: 'close'}); }; /** * @private */ contextPrototype.getCoords_ = function(aX, aY) { + var m = this.m_; return { - x: Z * (aX * this.m_[0][0] + aY * this.m_[1][0] + this.m_[2][0]) - Z2, - y: Z * (aX * this.m_[0][1] + aY * this.m_[1][1] + this.m_[2][1]) - Z2 + x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2, + y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2 } }; @@ -710,6 +797,33 @@ if (!window.CanvasRenderingContext2D) { this.m_ = this.mStack_.pop(); }; + function matrixIsFinite(m) { + for (var j = 0; j < 3; j++) { + for (var k = 0; k < 2; k++) { + if (!isFinite(m[j][k]) || isNaN(m[j][k])) { + return false; + } + } + } + return true; + } + + function setM(ctx, m, updateLineScale) { + if (!matrixIsFinite(m)) { + return; + } + ctx.m_ = m; + + if (updateLineScale) { + // Get the line scale. + // Determinant of this.m_ means how much the area is enlarged by the + // transformation. So its square root can be used as a scale factor + // for width. + var det = m[0][0] * m[1][1] - m[0][1] * m[1][0]; + ctx.lineScale_ = sqrt(abs(det)); + } + } + contextPrototype.translate = function(aX, aY) { var m1 = [ [1, 0, 0], @@ -717,7 +831,7 @@ if (!window.CanvasRenderingContext2D) { [aX, aY, 1] ]; - this.m_ = matrixMultiply(m1, this.m_); + setM(this, matrixMultiply(m1, this.m_), false); }; contextPrototype.rotate = function(aRot) { @@ -730,7 +844,7 @@ if (!window.CanvasRenderingContext2D) { [0, 0, 1] ]; - this.m_ = matrixMultiply(m1, this.m_); + setM(this, matrixMultiply(m1, this.m_), false); }; contextPrototype.scale = function(aX, aY) { @@ -742,7 +856,27 @@ if (!window.CanvasRenderingContext2D) { [0, 0, 1] ]; - this.m_ = matrixMultiply(m1, this.m_); + setM(this, matrixMultiply(m1, this.m_), true); + }; + + contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) { + var m1 = [ + [m11, m12, 0], + [m21, m22, 0], + [dx, dy, 1] + ]; + + setM(this, matrixMultiply(m1, this.m_), true); + }; + + contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) { + var m = [ + [m11, m12, 0], + [m21, m22, 0], + [dx, dy, 1] + ]; + + setM(this, m, true); }; /******** STUBS ********/ @@ -761,15 +895,20 @@ if (!window.CanvasRenderingContext2D) { // Gradient / Pattern Stubs function CanvasGradient_(aType) { this.type_ = aType; - this.radius1_ = 0; - this.radius2_ = 0; + this.x0_ = 0; + this.y0_ = 0; + this.r0_ = 0; + this.x1_ = 0; + this.y1_ = 0; + this.r1_ = 0; this.colors_ = []; - this.focus_ = {x: 0, y: 0}; } CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) { aColor = processStyle(aColor); - this.colors_.push({offset: 1-aOffset, color: aColor}); + this.colors_.push({offset: aOffset, + color: aColor.color, + alpha: aColor.alpha}); }; function CanvasPattern_() {} diff --git a/vendor/assets/javascripts/html5jp_graphs/line.js b/vendor/assets/javascripts/html5jp_graphs/line.js index d87f49b..5aa8e83 100755 --- a/vendor/assets/javascripts/html5jp_graphs/line.js +++ b/vendor/assets/javascripts/html5jp_graphs/line.js @@ -1,4 +1,4 @@ -// Copyright 2007 futomi http://www.html5.jp/ +// Copyright 2007-2009 futomi http://www.html5.jp/ // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. @@ -11,6 +11,8 @@ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. +// +// line.js v1.0.2 if( typeof html5jp == 'undefined' ) { html5jp = new Object(); @@ -25,17 +27,19 @@ if( typeof html5jp.graph == 'undefined' ) { html5jp.graph.line = function (id) { var elm = document.getElementById(id); if(! elm) { return; } - if(elm.nodeName != "CANVAS") { return; } - if(elm.parentNode.nodeName != "DIV") { return; }; - this.canvas = elm; + if( ! elm.nodeName.match(/^CANVAS$/i) ) { return; } + if( ! elm.parentNode.nodeName.match(/^DIV$/i) ) { return; }; /* CANVAS要素 */ - if ( ! this.canvas ){ return; } - if ( ! this.canvas.getContext ){ return; } + if ( ! elm.getContext ){ return; } + this.canvas = elm; /* 2D コンテクストの生成 */ this.ctx = this.canvas.getContext('2d'); this.canvas.style.margin = "0"; this.canvas.parentNode.style.position = "relative"; this.canvas.parentNode.style.padding = "0"; + /* CANVAS要素の親要素となるDIV要素の幅と高さをセット */ + this.canvas.parentNode.style.width = this.canvas.width + "px"; + this.canvas.parentNode.style.height = this.canvas.height + "px"; }; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * 描画 @@ -119,7 +123,7 @@ html5jp.graph.line.prototype.draw = function(items, inparams) { } cpos.w = cpos.x1 - cpos.x0; cpos.h = cpos.y0 - cpos.y1; - /* 項目の数（最大10個）*/ + /* 項目の数（最大10個） */ var item_num = items.length; if(item_num > 10) { item_num = 10; } /* 凡例の各種座標を算出 */ @@ -132,8 +136,8 @@ html5jp.graph.line.prototype.draw = function(items, inparams) { y: Math.round( ( this.canvas.height - ( legend_tmp_s.h * item_num + legend_tmp_s.h * 0.2 * (item_num - 1) ) ) / 2 ), h: legend_tmp_s.h }; - lpos.cx = lpos.x + Math.round( lpos.h * 2.5 ); // 文字表示開始位置(x座標) - lpos.cw = this.canvas.width - lpos.cx; // 文字表示幅 + lpos.cx = lpos.x + Math.round( lpos.h * 2.5 ); /* 文字表示開始位置(x座標) */ + lpos.cw = this.canvas.width - lpos.cx; /* 文字表示幅 */ } /* グラフの背景を塗りつぶす */ if(params.gGradation == true) { diff --git a/vendor/assets/javascripts/html5jp_graphs/radar.js b/vendor/assets/javascripts/html5jp_graphs/radar.js index a10afc3..72dea47 100755 --- a/vendor/assets/javascripts/html5jp_graphs/radar.js +++ b/vendor/assets/javascripts/html5jp_graphs/radar.js @@ -1,4 +1,4 @@ -// Copyright 2007 futomi http://www.html5.jp/ +// Copyright 2007-2009 futomi http://www.html5.jp/ // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. @@ -11,6 +11,8 @@ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. +// +// radar.js v1.0.2 if( typeof html5jp == 'undefined' ) { html5jp = new Object(); @@ -25,17 +27,19 @@ if( typeof html5jp.graph == 'undefined' ) { html5jp.graph.radar = function (id) { var elm = document.getElementById(id); if(! elm) { return; } - if(elm.nodeName != "CANVAS") { return; } - if(elm.parentNode.nodeName != "DIV") { return; }; - this.canvas = elm; + if( ! elm.nodeName.match(/^CANVAS$/i) ) { return; } + if( ! elm.parentNode.nodeName.match(/^DIV$/i) ) { return; }; /* CANVAS要素 */ - if ( ! this.canvas ){ return; } - if ( ! this.canvas.getContext ){ return; } + if ( ! elm.getContext ){ return; } + this.canvas = elm; /* 2D コンテクストの生成 */ this.ctx = this.canvas.getContext('2d'); this.canvas.style.margin = "0"; this.canvas.parentNode.style.position = "relative"; this.canvas.parentNode.style.padding = "0"; + /* CANVAS要素の親要素となるDIV要素の幅と高さをセット */ + this.canvas.parentNode.style.width = this.canvas.width + "px"; + this.canvas.parentNode.style.height = this.canvas.height + "px"; }; /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ * 描画 @@ -115,11 +119,11 @@ html5jp.graph.radar.prototype.draw = function(items, inparams) { cpos.r = Math.min(this.canvas.width, this.canvas.height) * 0.7 / 2 cpos.x = this.canvas.height * 0.1 + cpos.r; } - /* 項目の数（最大10個）*/ + /* 項目の数（最大10個） */ var item_num = items.length; if(item_num > 10) { item_num = 10; } params.itemNum = item_num; - /* 指標の最大数を算出（多角形の角数） 最小3角・最大24角*/ + /* 指標の最大数を算出（多角形の角数） 最小3角・最大24角 */ var angle_num = 0; for(var i=0; i 0) { + y = cpos.y0 - sum * cpos.h / params.yMax; + } /* 棒の高さ */ - var h = v * cpos.h / params.yMax; + var h = 0; + if(params.yMax > 0) { + h = v * cpos.h / params.yMax; + } /* 棒を描画 */ if( params.barShape == "line" ) { this._draw_vertical_bar_line(this.ctx, x, y, h, cpos.r, params.barColors[j], params.barAlpha); @@ -251,6 +264,20 @@ html5jp.graph.vbar.prototype.draw = function(items, inparams) { * 以下、内部関数 * ──────────────────────────────── */ +/* ------------------------------------------------------------------ +グラフをリセット +* ---------------------------------------------------------------- */ +html5jp.graph.vbar.prototype._reset = function() { + var parent = this.canvas.parentNode; + var num = parent.childNodes.length; + for( var i=num-1; i>=0; i-- ) { + var nd = parent.childNodes.item(i); + if( /^canvas$/i.test( nd.nodeName ) ) { continue; } + parent.removeChild(nd); + } + this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); +}; + /* ------------------------------------------------------------------ データラベルを描画 * ---------------------------------------------------------------- */ @@ -265,7 +292,10 @@ html5jp.graph.vbar.prototype._draw_data_label = function(labels) { var s = this._getTextBoxSize(text, p.dLabelFontSize, p.dLabelFontFamily); max_w = Math.max(s.w, max_w); var dx = labels[i].x - s.w / 2; - var dy = p.cpos.y0 - labels[i].v * p.cpos.h / p.yMax - s.h * 1.3; + var dy = p.cpos.y0 - s.h * 1.3; + if(p.yMax > 0) { + dy = p.cpos.y0 - labels[i].v * p.cpos.h / p.yMax - s.h * 1.3; + } pos.push( { x:dx, y:dy, text:text } ); } if( max_w < p.cpos.w / n ) { @@ -316,7 +346,7 @@ html5jp.graph.vbar.prototype._draw_legend = function() { this.ctx.stroke(); this.ctx.restore(); /* グラデーション */ - if( ! document.uniqueID && p.barGradation == true ) { + if( p.barGradation == true ) { this.ctx.save(); this._make_path_legend_mark(lpos.x, lpos.y, s.h, s.h); var grad = this.ctx.createLinearGradient(lpos.x, lpos.y, lpos.x+s.h, lpos.y+s.h); @@ -397,11 +427,15 @@ html5jp.graph.vbar.prototype._draw_y_scale_label = function(pos) { if( p.yScale == true && p.aLinePositions.length > 0 ) { for( var i=0; i p.yMax) { continue; } var text = v.toString(); var s = this._getTextBoxSize(text, p.yScaleFontSize, p.yScaleFontFamily); var x = p.cpos.x0 - p.cpos.r/2 - s.w*1.1; - var y = p.cpos.y0 - v * p.cpos.h / (p.yMax - p.yMin) - s.h/2; + var y = p.cpos.y0 - s.h/2; + if(p.yMax - p.yMin > 0) { + y = p.cpos.y0 - v * p.cpos.h / (p.yMax - p.yMin) - s.h/2; + } if( p.barShape == "cylinder" || p.barShape == "square" ) { var d = p.cpos.r / 3; y += d; @@ -493,6 +527,7 @@ html5jp.graph.vbar.prototype._draw_graph_background = function() { this.ctx.save(); for( var i=0; i p.yMax) { continue; } + if(p.yMax - p.yMin == 0) { continue; } var aY = p.cpos.y0 - p.cpos.h * p.aLinePositions[i] / ( p.yMax - p.yMin ); aY = Math.round(aY); // @@ -567,7 +602,6 @@ html5jp.graph.vbar.prototype._draw_graph_background_back = function(x, y, w, h) var grad = this.ctx.createLinearGradient(x, y-h, x+w, y); grad.addColorStop(0, "rgba(0, 0, 0, 0.1)"); grad.addColorStop(0.3, "rgba(255, 255, 255, 0.2)"); - if(document.uniqueID ) { grad.addColorStop(0.5, "rgba(255, 255, 255, 0.2)"); } grad.addColorStop(1, "rgba(0, 0, 0, 0.3)"); this.ctx.fillStyle = grad; this.ctx.beginPath(); @@ -576,9 +610,7 @@ html5jp.graph.vbar.prototype._draw_graph_background_back = function(x, y, w, h) this.ctx.lineTo(x+w, y-h); this.ctx.lineTo(x, y-h); this.ctx.closePath(); - if(document.uniqueID ) { this.ctx.globalAlpha = 0.3; } this.ctx.fill(); - if(document.uniqueID ) { this.ctx.globalAlpha = 1; } this.ctx.restore(); } /* 補助線 */ @@ -586,6 +618,7 @@ html5jp.graph.vbar.prototype._draw_graph_background_back = function(x, y, w, h) this.ctx.save(); for( var i=0; i p.yMax) { continue; } + if(p.yMax - p.yMin == 0) { continue; } var aY = y - h * p.aLinePositions[i] / ( p.yMax - p.yMin ); aY = Math.round(aY); // @@ -823,15 +856,9 @@ html5jp.graph.vbar.prototype._draw_vertical_bar_square = function(ctx, x, y, h, /* 正面 */ ctx.save(); var grad = ctx.createLinearGradient(p.f.tl.x, p.f.tl.y, p.f.br.x, p.f.br.y); - if(document.uniqueID) { - grad.addColorStop(0, color); - grad.addColorStop(0.3, "rgba(255, 255, 255, 0.1)"); - grad.addColorStop(1, color); - } else { - grad.addColorStop(0, "rgba(0, 0, 0, 0.1)"); - grad.addColorStop(0.3, "rgba(255, 255, 255, 0.1)"); - grad.addColorStop(1, "rgba(0, 0, 0, 0.4)"); - } + grad.addColorStop(0, "rgba(0, 0, 0, 0.1)"); + grad.addColorStop(0.3, "rgba(255, 255, 255, 0.1)"); + grad.addColorStop(1, "rgba(0, 0, 0, 0.4)"); ctx.fillStyle = grad; ctx.beginPath(); ctx.moveTo(p.f.tl.x, p.f.tl.y); @@ -839,21 +866,14 @@ html5jp.graph.vbar.prototype._draw_vertical_bar_square = function(ctx, x, y, h, ctx.lineTo(p.f.br.x, p.f.br.y); ctx.lineTo(p.f.bl.x, p.f.bl.y); ctx.closePath(); - if(document.uniqueID) { ctx.globalAlpha = 0; } ctx.fill(); - if(document.uniqueID) { ctx.globalAlpha = 1; } ctx.restore(); /* 右側面 */ ctx.save(); - if(document.uniqueID ) { - ctx.fillStyle = "#000000"; - ctx.globalAlpha = 0.4; - } else { - var grad3 = ctx.createLinearGradient(p.f.tr.x, p.f.tr.y, p.b.tr.x, p.f.tr.y); - grad3.addColorStop(0, "rgba(0, 0, 0, 0.3)"); - grad3.addColorStop(1, "rgba(0, 0, 0, 0.5)"); - ctx.fillStyle = grad3; - } + var grad3 = ctx.createLinearGradient(p.f.tr.x, p.f.tr.y, p.b.tr.x, p.f.tr.y); + grad3.addColorStop(0, "rgba(0, 0, 0, 0.3)"); + grad3.addColorStop(1, "rgba(0, 0, 0, 0.5)"); + ctx.fillStyle = grad3; ctx.beginPath(); ctx.moveTo(p.f.tr.x, p.f.tr.y); ctx.lineTo(p.b.tr.x, p.b.tr.y); @@ -865,13 +885,8 @@ html5jp.graph.vbar.prototype._draw_vertical_bar_square = function(ctx, x, y, h, /* 上面 */ ctx.save(); var grad2 = ctx.createLinearGradient(x-xr/5, y-h+yr, x+xr/5, y-h-yr); - if(document.uniqueID) { - grad2.addColorStop(0, "rgba(255, 255, 255, 0.2)"); - grad2.addColorStop(1, color); - } else { - grad2.addColorStop(0, "rgba(255, 255, 255, 0.2)"); - grad2.addColorStop(1, "rgba(0, 0, 0, 0.1)"); - } + grad2.addColorStop(0, "rgba(255, 255, 255, 0.2)"); + grad2.addColorStop(1, "rgba(0, 0, 0, 0.1)"); ctx.fillStyle = grad2; ctx.beginPath(); ctx.moveTo(p.f.tl.x, p.f.tl.y); @@ -879,9 +894,7 @@ html5jp.graph.vbar.prototype._draw_vertical_bar_square = function(ctx, x, y, h, ctx.lineTo(p.b.tr.x, p.b.tr.y); ctx.lineTo(p.b.tl.x, p.b.tl.y); ctx.closePath(); - if(document.uniqueID ) { ctx.globalAlpha = 0.1; } ctx.fill(); - if(document.uniqueID ) { ctx.globalAlpha = 1; } ctx.restore(); } else { /* 側面 */ @@ -996,15 +1009,9 @@ html5jp.graph.vbar.prototype._draw_vertical_bar_flat = function(ctx, x, y, h, xr ctx.save(); ctx.lineWidth = 1; var grad = ctx.createLinearGradient(x-xr, y-h, x+xr, y); - if(document.uniqueID ) { - grad.addColorStop(0, color); - grad.addColorStop(0.3, "rgba(255, 255, 255, 0.1)"); - grad.addColorStop(1, color); - } else { - grad.addColorStop(0, "rgba(0, 0, 0, 0.1)"); - grad.addColorStop(0.3, "rgba(255, 255, 255, 0.1)"); - grad.addColorStop(1, "rgba(0, 0, 0, 0.4)"); - } + grad.addColorStop(0, "rgba(0, 0, 0, 0.1)"); + grad.addColorStop(0.3, "rgba(255, 255, 255, 0.1)"); + grad.addColorStop(1, "rgba(0, 0, 0, 0.4)"); ctx.fillStyle = grad; ctx.beginPath(); ctx.moveTo(x-xr+2, y-2); @@ -1012,9 +1019,7 @@ html5jp.graph.vbar.prototype._draw_vertical_bar_flat = function(ctx, x, y, h, xr ctx.lineTo(x+xr-2, y-h+2); ctx.lineTo(x-xr+2, y-h+2); ctx.closePath(); - if(document.uniqueID) { ctx.globalAlpha = 0; } ctx.fill(); - if(document.uniqueID) { ctx.globalAlpha = 1; } ctx.restore(); } }; @@ -1095,16 +1100,9 @@ html5jp.graph.vbar.prototype._draw_vertical_bar_cylinder = function(ctx, x, y, h /* 側面 */ ctx.save(); var grad1 = ctx.createLinearGradient(x-xr, y, x+xr, y); - if(document.uniqueID) { - grad1.addColorStop(0, color); - grad1.addColorStop(0.4, "rgba(255, 255, 255, 0.3)"); - grad1.addColorStop(0.9, color); - grad1.addColorStop(1, color); - } else { - grad1.addColorStop(0, "rgba(0, 0, 0, 0.1)"); - grad1.addColorStop(0.4, "rgba(255, 255, 255, 0.3)"); - grad1.addColorStop(1, "rgba(0, 0, 0, 0.3)"); - } + grad1.addColorStop(0, "rgba(0, 0, 0, 0.1)"); + grad1.addColorStop(0.4, "rgba(255, 255, 255, 0.3)"); + grad1.addColorStop(1, "rgba(0, 0, 0, 0.3)"); ctx.fillStyle = grad1; ctx.beginPath(); ctx.moveTo(x+xr, y); @@ -1114,20 +1112,13 @@ html5jp.graph.vbar.prototype._draw_vertical_bar_cylinder = function(ctx, x, y, h ctx.bezierCurveTo(x-xr, y-h+yr/2, x-xr/2, y-h+yr, x, y-h+yr); ctx.bezierCurveTo(x+xr/2, y-h+yr, x+xr, y-h+yr/2, x+xr, y-h); ctx.lineTo(x+xr, y); - if(document.uniqueID ) { ctx.globalAlpha = 0; } ctx.fill(); - if(document.uniqueID ) { ctx.globalAlpha = 1; } ctx.restore(); /* 上面 */ ctx.save(); var grad2 = ctx.createLinearGradient(x-xr/5, y-h+yr, x+xr/5, y-h-yr); - if(document.uniqueID) { - grad2.addColorStop(0, "rgba(255, 255, 255, 0.2)"); - grad2.addColorStop(1, color); - } else { - grad2.addColorStop(0, "rgba(255, 255, 255, 0.2)"); - grad2.addColorStop(1, "rgba(0, 0, 0, 0.1)"); - } + grad2.addColorStop(0, "rgba(255, 255, 255, 0.2)"); + grad2.addColorStop(1, "rgba(0, 0, 0, 0.1)"); ctx.fillStyle = grad2; ctx.beginPath(); ctx.moveTo(x-xr, y-h); @@ -1135,9 +1126,7 @@ html5jp.graph.vbar.prototype._draw_vertical_bar_cylinder = function(ctx, x, y, h ctx.bezierCurveTo(x+xr/2, y-h-yr, x+xr, y-h-yr/2, x+xr, y-h); ctx.bezierCurveTo(x+xr, y-h+yr/2, x+xr/2, y-h+yr, x, y-h+yr); ctx.bezierCurveTo(x-xr/2, y-h+yr, x-xr, y-h+yr/2, x-xr, y-h); - if(document.uniqueID ) { ctx.globalAlpha = 0; } ctx.fill(); - if(document.uniqueID ) { ctx.globalAlpha = 1; } ctx.restore(); } else { /* 上面 */