エディターはコードを破損する可能性があるため、オンライン デモが提供されています http://demo.jb51.net/chengxu/smipleChart.htm コードをコピー コードは次のとおりです: smipleChart <br><br>.cc{ <br>height:450px; width:800px; border:1px solid #999; position:relative; margin:20px; <br>} <br> <br>(function(doc,unknown){ <br>var win = this, <br>hasSVG = win.SVGAngle || doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/ feature#BasicStructure", "1.1"), <br>isIE = /msie/i.test(navigator.userAgent) && !win.opera, <br>path = hasSVG?'d':'path', <br> seal = hasSVG?'z':'e'、<br>math = Math、<br>mathRound = math.round、<br>mathFloor = math.floor、<br>mathCeil = math.ceil、<br>mathMax = math.max、<br>mathMin = math.min、<br>mathAbs = math.abs、<br>mathCos = math.cos、<br>mathSin = math.sin、<br>M = 'M'、 <br>L = 'L'; <br><br>win.$ = function(Id){ <br>return document.getElementById(Id); <br><br>win.extend = function(){ <br>var target = argument[0] {}、i = 1、length = argument.length、deep = true、オプション; <br>if ( typeof target === "boolean" ) { <br>ディープ = ターゲット; <br>ターゲット = 引数[1] {}; <br>i = 2; <br>} <br>if ( typeof target !== "object" && Object.prototype. toString.call(target)!="[オブジェクト関数]") <br>target = {}; <br>for(;i<length>if ( (options = argument[ i ]) ! = null ) <br>for(オプションの変数名){ <br>var src = target[ name ], copy = options[ name ]; <br>if ( target === copy ) <br>続行; <br>if ( deep && copy && typeof copy === "object" && !copy.nodeType ){ <br>target[ name ] = argument.callee( deep, src || ( copy.length != null ? [ ] ： { } ）、 コピー ）; <br>} <br>else if(copy !== 未定義) <br>target[ name ] = copy; <br>} <br><br>} <br>ターゲットを返します。 <br>}; <br><br>win.each = function ( object, callback, args ) { <br>var name, i = 0, length = object.length; <br>if ( args ) { <br>args = Array.prototype.slice.call(arguments).slice(2); <br>if ( length === 未定義 ) { <br>for ( object 内の name ) <br>if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) = == false ) <br>ブレーク; <br>} else <br>for ( ; i if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // <br>休憩; <br>} else { <br>if ( length === 未定義 ) { <br>for ( オブジェクト内の名前 ) <br>if ( callback.call( object[ name ], name, object[ name ] ) == = false ) <br>ブレーク; <br>} else <br>for ( var value = object[0]; <br>i < length && callback.call( value, i, value ) !== false; value = object[i] ){} <BR>} <BR>オブジェクトを返します。 <BR>}; <BR>//------------------------------------------ ------------------ <BR>function processPoint( x ){ <BR>return isIE ? ~~x.toFixed(0) : ~~x.toFixed(0) 0.5; <BR>}; <BR>関数 calTextLen(txt, cssStr){ <BR>var span = doc.createElement('span'); <BR>if(cssStr){ <BR>typeof cssStr === '文字列' <BR>? span.style.cssText = cssStr <BR>: extend(span.style,cssStr); <BR>}else{ <BR>extend(span.style,{ <BR>fontSiz : '12px', <BR>fontFamily : '"Lucida Grande"、"Lucida Sans Unicode"、Verdana、Arial、Helvetica、sans-セリフ' <BR>}); <BR>} <BR>span.innerHTML = txt || ''; <BR>span.style.visibility = 'hidden'; <BR>doc.body.appendChild(span); <BR>var width = span.offsetWidth, <BR>height = span.offsetHeight; <BR>doc.body.removeChild(span); <BR>return {w:width,h:height}; <BR>}; <BR>関数 angle(r,center,o,jingdu){ <BR>var hudu = Math.PI*2*(o/360), <BR>x = center[0] r*Math.sin(hudu) , <BR>y = center[1] -r*Math.cos(hudu); <BR>return [x.toFixed(jingdu||0),y.toFixed(jingdu||0)]; <BR>} <BR><br>function xx(a,b,lineNum){ <br><br>var t = 10000; <br>var stf = ((b*t-a*t)/lineNum)/t, <BR>arr = [1,2,2.5,5,10], <BR>c = 1, <BR>v; <BR><br>// 分割線の基数は [1,2,2.5,5,10] このステップは、範囲に属する間隔です <br>if(stf<arr[0]){ <BR>while( stf<arr[0] ){ <BR>c = c*10; <BR>arr[0]=arr[0]/c; <BR>} <BR>each([1,2,2.5,5,10],function(i,o){ <BR>arr[i]= o/c; <BR>}); <BR>}else if(stf>arr[4]){ <BR>while(stf>arr[4] ){ <BR>c = c*10; <BR>arr[4] = arr[4]*c; <BR>} <BR>each([1,2,2.5,5,10],function(i,o){ <BR>arr[i]= o*c; <BR>}); <BR>} <BR><br>//上面に到達した後、期間中に最も近いものの 1 つ <br>each(arr,function(i,o){ <BR>if(stf<o){ <BR> v = o; <BR>戻り値 <BR>} <BR>}); <BR>//a は最小の <BR>//b は最大の <BR>a = (a*t-mathAbs((a%v)*t))/t; <BR>b = (b*t (b%v===0?0:(v-b%v))*t)/t; <BR><br>//看看还剩几条線没有画 <br><br>var num = Math.max(0,lineNum - Math.round((b-a)/v)); <br><br>if(a>=0){ <br>//让图比较靠中间 <BR>/*while(num!==0){ <BR>num%2===0 <BR>？ a = (a*t-v*t)/t <BR>: b = (b*t v*t)/t; <BR>数字--; <BR>}*/ <BR><br>//坐标比较整数化 <br>if(a!=0&&num!=0){ <BR>while(a!=0&&num!=0){ <BR>a = (a*t-v*t)/t; <BR>数字--; <BR>if((a*t-v*num*t)/10000>0&&a ===0) <BR>break; <BR>} <BR>} <BR><br>if(num!=0){ <br>while(num!==0){ <BR>b = (b*t v*t)/t <BR>番号--; <BR>} <BR>} <BR><br>}else{ <br>//让图比较靠中间 <BR>/*while(num!==0){ <BR>num%2=== 0<BR>? b = (b*t v*t)/t <BR>: a = (a*t-v*t)/t <BR>num--; <BR>}*/ <BR>//坐标比较整数化 <BR>if(b<0&&num!=0){ <BR>while(b!=0&&num!=0){ <BR>b = (b* t v*t)/t; <BR>数字--; <BR>if((b*t v*num*t)/t<0&&a ===0) <BR>break; <BR>} <BR>}<BR>if(num!=0){ <BR>while(num!==0){ <BR>a = (a*t-v*t)/t <BR>num--; <BR>} <BR>} <br><br>} <BR>return {min:a,max:b,stf:v}; <BR>} <BR>//----------------------------------------------------- -------------------------------------------------- -------------------- <BR>//对svg vml元素の一部の操作 修正プロパティ 样式删除 == 一部の操作 <BR>win.vector = function( ){}; <BR>win.vector.prototype = { <BR>$c : function(graphic,nodeName){ <BR>this.element = this[0] = doc.createElementNS('http://www.w3.org/ 2000/svg', ノード名); <BR>this.graphic = グラフィック; <BR>これを返します; <BR>}, <BR>attr: function(hash,val){ <BR>var elem = this.element, <BR>key, <BR>value; <BR>if(ハッシュの型 === '文字列'){ <BR>if(val === 未定義){ <BR>return elem.getAttribute(hash); <BR>}else{ <BR>elem.setAttribute(hash, val); <BR>これを返します; <BR>} <BR>} else { <BR>for(ハッシュ内のキー){ <BR>値 = ハッシュ[キー]; <BR>if(key === path){ <BR>value && value.join <BR>&&(value = value.join(' ')); <br><br>/(NaN| |^$)/.test(value) <BR>&&(value = 'M 0 0'); <BR>} <BR>elem.setAttribute(key, value) <BR>} <BR>} <BR>これを返します; <BR>}, <BR>css: function(hash){ <BR>var str = ''; <BR>for(ハッシュの var key){ <BR>if(isIE && key == "opacity"){ <BR>this.element.style['filter'] = "alpha(opacity=" hash[key] * 100 ")"; <BR>}else{ <BR>this.element.style[key] = hash[key]; <BR>} <BR>} <BR>これを返します; <BR>}, <BR>on: function(eventName, handler){ <BR>var self = this; <BR>this.element.addEventListener(eventName,function(){ <BR>handler.call(self) <BR>},false); <BR>これを返します; <BR>}, <BR>appendTo: function(parent){ <BR>if(parent){ <BR>parent.element <BR>? parent.element.appendChild(this.element) <BR>:parent.appendChild(this.element) <br><br>} else { <BR>this.graphic.container.appendChild(this.element); <BR>} <BR>これを返します; <BR>}, <BR>addText: function(str){ <BR>var elem = this.element; <BR>if(elem.nodeName === 'text'){ <BR>elem.appendChild(doc.createTextNode(str.toString() || ' ')); <BR>} <BR>これを返します; <BR>}, <BR>setOpacity : function(v){ <BR>this.attr('fill-opacity',v) <BR>}, <BR>toFront: function() { <BR>this.element .parentNode.appendChild(this.element) <BR>これを返します; <BR>}, <BR>show: function(){ <BR>this.element.style.display = 'block'; <BR>これを返します; <BR>}, <BR>hide: function(){ <BR>this.element.style.display = 'none'; <BR>これを返します; <BR>} <BR>}; <BR>//------------------------------------------ -------------------------------------------------- ---------------- <br><br><br><br>//---------------------- -------------------------------------------------- ----------------------------- <BR>//結果が vml 修正の場合のいくつかのメソッド <BR>if(!hasSVG) { <BR>//---------------创建vml環境------ <BR>doc.createStyleSheet().addRule( ".vml", "behavior:url(#default#VML);display:inline-block;position:absolute;left:0px;top:0px"); <BR>!doc.namespaces.vml && ! "v1"; <BR>doc.namespaces.add("vml", "urn:schemas-microsoft-com:vml"); <br><br>//---------------修正方法の一部----------------- <BR>extend(vector.prototype, { <BR>$c : function(graphic,nodeName){ <BR>var name = ノード名 || 'shape'; <BR>this.element= this[0] = (name === 'div' || 名前=== 'span') <BR>? doc.createElement(name) <BR>: doc.createElement('<vml:' name ' class="vml">');グラフィック; <br>これを返します; <br>}, <br>on : function(eventName, handler){ <br>var self = this; { <br>handler.call(self); <br>}); <br>return this; <br>}, <br>addText : function(txt){ <br>var elem = this.element; >elem.innerHTML = txt || ''; <br>これを返します; <br>setOpacity : function(v){ <br>this.opacity.opacity=v; }); <br>} <br>//----------------------------------------------------- -------------------------------------------------- -------- <br><br><br><br><br><br><br><br>//画图类 <br>//-------- -------------------------------------------------- - <br>win.smipleChart = function(){ <br>this.init.apply(this,arguments); <br>}; <br>smipleChart.prototype = { <br>options : { <br>charts : { <br>paddingRight : 20, <br>radius : 200, <br>style : { <br>fontFamily : '"Lucida Grande" 、「Lucida Sans Unicode」、Verdana、Arial、Helvetica、sans-serif'、<br>fontSize : '12px'、<br>background : '#FFFFFF' <br>} <br>}、<br>title : { <br>text : '', <br>y : 10, <br>style : { <br>fontFamily:'Verdana,Arial,Helvetica,sans-serif', <br>fontSize:'16px', <br>fontWeight:'bold' <br>} <br>}, <br>subTitle : { <br>text : '', <br>y : 30, <br>style : { <br>fontFamily:'Verdana, Arial,Helvetica,sans-serif'、<br>fontSize:'12px'、<br>color: '#111' <br>} <br>}、<br>yUnit : { <br>text : '', <br>スタイル : { <br>fontFamily:'Verdana,Arial,Helvetica,sans-serif', <br>fontSize:'12px', <br>color: '#111' <br>}, <br>lineNum :10 <br>} <br>}, <br>init : function(container,options,width,height){ <br>this.width = width ||コンテナのオフセット幅; <br>this.height = 身長 ||コンテナのオフセット高さ; <br>this.mainGroup = {}; <br><br>//svg 図面に svg タグが必要です。vml は div <br>this.container = hasSVG <br>? new Vector().$c(1,'svg') <br>.attr({ <br>xmlns : 'http://www.w3.org/2000/svg', <br>バージョン : '1.1' <br>}) <br>.css({fontSize : ' 12px '}) <br>.appendTo(container).element <br>: new Vector().$c(1,'div') <br>.css({ <br>fontSize : '12px', <br> 幅 : this.width 'px', <br>高さ : this.height 'px' <br>}) <br>.appendTo(container).element; <br>var c = extend(true,{}, this .options) <br>var opts = this.opts = extend(true,c,options), <br>style = extend(opts.charts.style,{ <br>width : this.width, <br>height : this.height <br>}); <br><br><br><br>//プレートの描画時に必要なパラメータを計算します <br>this.getDrawArea() <br>.createTooltip() //作成プロンプトメッセージフレーム<br>.drawTitle() //タイトルを描画<br>//プレートを描画<br><br>if('line,area,pie'.indexOf(opts.charts.type)>=0 ) { <br>opts.charts.panel = 'x'; <br>} <br><br>if(' pie,pies'.indexOf(opts.charts.type)this . drawPanel(); <br><br>this.drawLegend(opts.legend.type); //カラーブロックバーを描画します<br><br>var type = { <br>line : 'drawLine' , <br>エリア : 'drawArea'、<br>列 : 'drawColumns'、<br>円 : 'drawPie'、<br>円 : 'drawPies'、<br>セグメント : 'drawSegment' <br>}[ opts .charts.type]; <br>this[type](); <br><br>}, <br>createElement : function(nodeName){ <br>return new Vector().$c(this,nodeName) ; <br>}, <br>グループ: function(name){ <br>return this.createElement(isIE?'div':'g').attr('mark',name); 🎜>getDrawArea : function(){ <br>var opts = this.opts、<br>width = this.width、<br>height = this.height、<br>title = opts.title、<br>subTitle = opts.subTitle, <br>area = { <br>// 座標軸の左側のスケール テキスト幅を削除します (推定) 80 は固定値で、左側のスペースは 80 だけ残します <br>areaWidth : width - 80, <br> // 座標軸の下のテキストとマークの高さを削除します <br>areaHeight : height - 40, <br>// 原点の X 位置は <br>startX の下で計算されます。 0, <br>//原点の Y 位置は以下で計算されます <br>startY: 0, <br>//円グラフを描くときは、円の中心の位置を知る必要があります。 🎜>centerX: 0, <br>//円グラフを描画するための中心の y 座標 <br>centerY: 0 <br>}; <br>//メインタイトルが存在する場合はメインタイトルの高さを減算し、そうでない場合は高さから10を減算します <br>area.areaHeight -= (title.text !== '') <br>? <br>: 10; <br><br>// 字幕の高さを削除します <br>area.areaHeight -=(subTitle.text !== ' ') <br>: 10 <br> <br>area.startX = 80; <br>area.startY = height - 40; <br><br>//円の中心の位置<br>area.centerX = width <br> area.centerY = height / 2; <br><br>//右側にスペースを残します <br>area.areaWidth -=20>//上部にもスペースを残します <br>エリア.areaHeight -=15; <br><br>opts.area = area; <br><br>}, <br>drawTitle : function(){ <br>var opts = this.opts, <br>self = this, <br>arr = [opts.title,opts.subTitle,opts.yUnit], <br>// 3 つのタイトル座標の位置に関する基本パラメータ <br>config = [ <br>{ <br>x : this.width / 2, <br>y : opts.title.y <br>}, <br>{ <br>x : this.width / 2 , <br>y : opts.subTitle.y <br>}, <br>{ <br>x : opts.yUnit.x, <br>y : this.height / 2 - 20 <br>} <br> ], <br> tpanel = this.group('title') <br>.appendTo(); <br><br>each(arr,function(i,title){ <br>var text = title.text; <br>if( text){ <br>var elem = self.baseDraw('span',{ <br>'text-anchor':'left', <br>x : mathMax(config[i].x - calTextLen(text,title) .style).w/2,10), <br>y : config[i].y <br>},calTextLen(title.text,title.style).h) <br>.css (title.style) <br>.addText(text) <br>.appendTo(tpanel); <br><br>// 2 の場合は、縦方向に回転します。 <br>if(i= ==2) ){ <br>hasSVG <br>? elem.attr({transform : 'rotate(270, ' (opts.yUnit.x 10) ', ' self.height / 2 ')'}) <br> : (elem .element.style.filter ='progid:DXImageTransform.Microsoft.BasicImage(rotation=3)') <br>} <br><br>} <br>}); <br>return this; <br><br><br>//板を描くのが面倒 <br>drawPanel: function(type){ <br>var opts = this.opts, <br>self = this, <br>area = opts.area, <br>isSegment= opts.charts.type==='segment', <br>//プレートのタイプは水平または垂直です <br>type = opts.charts.panel || <br><br>// 底板<br>vardrawAreaWidth = area.areaWidth, <br>drawAreaHeight = area.areaHeight, <br>//原点の座標 <br>startX = area.startX, <br> startY = area.startY; <br><br>var allData = []、<br>minValue = 0、<br>maxValue = 10、<br>lineNum = mathMax(opts.yUnit.lineNum,2)、<br>min = opts.yUnit.min, <br>staff; <br><br>//すべてのデータを結合します <br>each(opts.chartData,function(i,o){ <br>isSegment <br>? each (o.data,function(j,d){ <br>allData[j] <br>? allData[j] = allData[j] (~~d) <br>: allData[j] = ~~d ; <br>}) <br>: allData = allData.concat(o.data) <br>}); <br><br>//allData .sort(function(a,b){return a-b}); <br><br>//最大値と最小値を検索します<br>maxValue = allData[allData.length - 1]; >each (allData,function(i,o){ <br>if(o){ <br>minValue = o; <br>return false; <br>} <br>}); <br><br>//メインプレートコンテナ<br>this.panel = this.group('panel').appendTo(); <br><br><br>var dd = xx(minValue,maxValue) , lineNum), <br>min = dd.min, <br>max = dd.max, <br>f = dd.stf; <br><br>//横軸が描画されることを示します <br>if( type.toLowerCase()==='x'){ <br>//横座標単位間隔<br>var xPices =drawAreaWidth / opts.xUnit.units.length, <br>//単位間隔の中心点<br> offset = xPices / 2, <br><br>yPices =drawAreaHeight / lineNum <br><br><br>//--------------------- -------- -----------横ドットと文字を描画する ------------------------ ------- ------------------------ <br>each(opts.xUnit.units,function(i,d) { <br>self.baseDraw( 'path',{ <br>border : 1, <br>borderColor : '#C0C0C0', <br>isfill : false, <br>path : [ <br>M, <br>processPoint(startX (i * xPices )), <br>processPoint(startY), <br>L, <br>processPoint(startX (i*xPices)), <br>processPoint(startY 5) <br>] <br>}); <br> appendTo(self.panel); <br>var y = hasSVG?5:10, <br>span = self.baseDraw('span',{ <br>x : startX offset (i * xPices), <br>y : startY y, <br>'text-anchor':'middle' <br>}) <br>.css({ <br>fontFamily:'Verdana,Arial,Helvetica,sans- serif', <br>fontSize: '12px' <br>}) <br>.addText(opts.xUnit.units[i]) <br>.appendTo(self.panel) <br>.element; <br>//vml には x y がありません。 したがって、概念を単純化するために、後で Span を使用するときに、Span 幅の半分を減らす必要があります。<br>!hasSVG <br>span.style.left = parseInt(span.style.left) ) -span.offsetWidth/2 'px' <br><br>}); ------------------------縦のドットと文字を描く -------------------------------------- ------------ --------------------- <br>for(i=0;i<=lineNum;i ){ <BR>self.baseDraw('path',{ <BR>border : 1, <BR>borderColor : '#C0C0C0', <BR>isfill : false, <BR>path : [M, startX, processPoint(startY - (i * yPices)), L, processPoint(startXdrawAreaWidth), processPoint(startY - (i *yPices))] <BR>}) <BR>.css({zIndex:-10}) <BR>.appendTo( self.panel); <BR><BR>var span = self.baseDraw('span',{ <br>x : startX - 15, <br>y : startY - i * yPices-calTextLen(min i*f ') ').h/2, <BR>'text -anchor':'middle' <BR>}) <BR>.css({ <BR>'font-family':'Verdana,Arial,Helvetica,sans-serif ', <BR>'font-size':' 12px', <BR>width: '40px', <BR>display:'block', <BR>textAlign:'right' <BR>}) <BR>。 addText((min*1000 (i*1000*f /1000)*1000)/1000 '') <BR>.appendTo(self.panel) <BR>.element <BR><BR>if(!hasSVG) { <br>span.style.top = parseInt(span.style.top) span.offsetHeight/2 -5 'px'; <br>span.style.left = parseInt(span.style.left) -35 'px ' <BR>} <BR>} <BR> <BR>}else{ <br>//横軸単位間隔<br>var yPices =drawAreaHeight / (opts.xUnit.units.length), <BR>//単位区間の中心点<BR>offset = Math.round(yPices / 2); <BR><BR><br><br>var x = hasSVG?25:70, <br>vv = hasSVG?0: 5; <br><BR>each(opts.xUnit .units,function(i,d){ <br><br>self.baseDraw('path',{ <br>border : 1, <br>borderColor : '#C0C0C0', <BR>isfill : false, <BR>path : [ <BR>M, <BR>processPoint(startX-5), <BR>processPoint(startY-i * yPices), <BR>L, <BR>processPoint(startX), <BR>processPoint( startY-i * yPices), <BR>] <BR>}) <BR>.appendTo(self.panel) <BR>var span = self.baseDraw( 'span',{ <BR>x : startX - x , <BR>y : startY -i * yPices-offset-calTextLen(d).h/2 vv, <BR>'text-anchor':'middle' <BR>}) <BR>.css({ <BR>fontFamily:'Verdana,Arial,Helvetica,sans-serif', <BR>fontSize:'12px', <BR>width : '60px', <BR>textAlign :'right' <BR>}) <BR>.addText(d) <BR>.appendTo(self.panel) <BR><BR>}); <br><br><br>var xPices =drawAreaWidth / lineNum; <br><BR>for(var i= 0;i<=lineNum;i ){ <br>self.baseDraw('path',{ <br>border : 1, <BR>borderColor : '#C0C0C0 ', <BR>isfill : false, <BR>path : [ <BR>M, <BR>processPoint(startX (i * xPices)), <BR>processPoint(startY), <BR>L, <BR>processPoint (startX (i*xPices))、<BR>processPoint (startY -drawAreaHeight) <BR>] <BR>})。 ('span',{ <BR>x : startX - calTextLen(min i*f '').w/2 i * xPices, <BR>y : startY, <BR>'text-anchor':'left' <br>}) <br>.css({ <BR>fontFamily:'Verdana,Arial,Helvetica,sans-serif', <BR>fontSize:'12px' <BR>}) <BR>.addText(min i* f '') <BR>.appendTo(self.panel ) <BR>.element <BR>} <BR><BR>} <BR><BR>//----------- ---------- -------------------------------------- ---------- ------------------------ <BR>//エリアマップを描画する際には、開始点 <br>//座標は負の値である可能性が高く、0 から開始できない可能性があるため、 jianju <br>var jianju =0 <br>if(min>0)jianju = min; max<0)jianju = max; //開始位置を計算します <br>startX = opts.charts.panel==='x' ? startX :startX-xPices*(min/f); = opts.charts.panel=== 'x' ? startY yPices*(min/f) : startY; <BR><BR>opts.draw = { <BR>startX : startX, // X 軸の開始点<BR>startY : startY , // Y 軸の始点 <BR>xPices : xPices, // X 軸の各部分の幅 <BR>yPices : yPices, // Y 軸の各部分の幅 <BR>offset : offset, // X 単一中心点位置のオフセット <BR>jianju : jianju*yPices/f, <br>feed : f // Y 軸上にコピーが何個あるか<br>}; <BR>これを返します<BR>}, <br><br>createTooltip: function(){ <BR>//A group<BR>this.tipC = this.group('tip') <BR>.css({zIndex: 200,height:'20px ',width:'20px',position:'absolute'}) <BR>.appendTo() <BR>.hide() <br><br>//ボックスを描画しますbaseDraw <BR>this.tipBox = this. BaseDraw('rect',{arc:0.22,fill:'#fff',border:2,borderColor:'#606060'}) <BR>.appendTo(this.tipC) <br><br>// なぜなら svg内部の g は直接配置できますが、vml でのグループのレンダリングが非常に遅いため、ここの親は異なります。 <BR>var p = isIE ?this.tipBox :this.tipC; 🎜>this.tipTxtContainer = this.baseDraw('text',{fill:'#000000',x:5,y:19,'text-anchor':'left'}) <br>.css({ <br>fontFamily:'Verdana、Arial、Helvetica、sans-serif'、<BR>fontSize:'12px'、<BR>背景: '#FFF' <BR>}) <BR>.appendTo(p); <BR>this.tipText = doc.createTextNode(''); <BR>this.tipTxtContainer[0].appendChild(this.tipText); <br>これを返します; <br>showTooltip : function( obj, x, y, data){ <BR>var txt =obj.name ((' : ' data)||''), <BR>size = calTextLen(txt,this.tipTxtContainer[0].style.cssText ), <BR>pos = {x : x - (size.w 5 * 2)/2 ,y : y - 32}; <BR>this.tipC <BR>.toFront() <BR>.show() ; <BR><BR>if(hasSVG){ <BR>this.tipC.attr({transform:'translate(' pos.x ',' pos.y ')'}); .tipBox <BR>.attr({幅 : size.w 5 * 2,高さ : size.h 5 * 2,ストローク : obj.color||'#606060'}); this.tipC.css( {left:pos.x,top:pos.y}); <br><br>this.tipBox <BR>.css({width:size.w 5 * 2,height : サイズ. h 5 * 2}) <br>this.tipBox[0].ストロークカラー = obj.color||'#606060'; <br>} <BR><BR>this.tipText.nodeValue = txt || ''; <BR>}, <br>hideTooltip: function(){ <br>this.tipC.hide(); <BR>}, <BR><BR>drawLegend : function(type,redraw){ <br>var self = this, <br> opts = this.opts, <BR>// カラー ブロックのサイズ<BR>t_width = 20, <BR>t_height = 20, <BR>// ブロック間の距離<br> t_space = 5, <br>datas = opts.chartData, <BR>len = datas.length, <BR>css = opts.legend.style, <BR><BR>//最大長 縦の場合は最大長さは必須です <BR>maxWidth = 10 , <BR>maxHeight = 30, <BR>//このものの位置<BR>orig_pos = opts.legend.pos?opts.legend.pos:[2,2], <BR><BR>//グループ関数の表示と非表示 <br>handle = function(i){ <br>var g = self.mainGroup['chart' i] <BR>if(g.show){ <BR>g.chart.hide(); <BR>g.show = false; <BR>hasSVG <br>? this.attr({fill:'#ccc'}) <br>: this[0].style .color = '#ccc' <BR> }else{ <BR>g.chart.show(); <BR>hasSVG <BR>? 000'}) <BR>: this[ 0].style.color = '#000' <BR>} <BR>}, <BR><BR>arr = []; <BR><BR>type = タイプ||'横'; <BR>var legendPanel = self.group('凡例') <BR>.appendTo(); <BR>if(type===='横'){ <BR>//水平方向です <BR>var top = orig_pos[1 ] 5, <br>th = hasSVG?0:3, <br>left = orig_pos[0] 5; <br>left = i===0 ? left : t_space left; <br>//すべての左の位置を計算します <BR>self.baseDraw('rect',{ <BR>arc : 0.1, <BR>fill : d.color, <BR>border : 1, <BR>borderColor : d.color, <BR>left : 左, <BR>top : 上, <BR>width : t_width 'px', <BR>height : t_height 'px' <BR>}) <BR> .appendTo(legendPanel); <BR>left = left t_width 2 t_space; <BR>var w = calTextLen(d.name,css).w <BR>self.baseDraw ('span',{ <BR>'text-anchor':'left', <BR>x : 左, <BR>y : 一番上の <BR>}) <BR>.css(extend(css,{cursor :'pointer'})) <BR>.on ('click',function(){ <BR>if(opts.charts.type==='pies')return; <BR>handle.call(this,i ); <BR>}) <BR>.addText (d.name) <BR>.appendTo(legendPanel); <BR><BR>}); 'rect',{ <BR>arc : 0.1, <BR>fill : 'none', <BR>border : 1.5, <BR>borderColor : '#666666', <BR>width : left t_space-orig_pos[0] , <BR>高さ : maxHeight, <BR>左 : orig_pos[0], <BR>上 : orig_pos[1] <BR>}) <br>.appendTo(legendPanel) <br>}else{ <BR>; <BR>var top = orig_pos[1] 5, <BR>th = hasSVG?0:3, <BR>left = orig_pos[0] 5; <BR>each(datas, function(i,d){ <BR>top = i===0 ? top : t_space top; <BR>self.baseDraw('rect',{ <BR>arc : 0.1, <BR>fill : d.color, <BR>border : 1, <BR>borderColor : d.color、<BR>left : 左、<br>top : 上、<br>width : t_width 'px'、<BR>height : t_height 'px' <BR>}) <BR>。 appendTo(legendPanel); <BR><BR>var h = calTextLen(d.name,css).h; <BR><BR>self.baseDraw('span',{ <BR>'text-anchor':' left', <BR>x : 左 t_width 2 t_space , <BR>y : 上 th <BR>}) <BR>.css(extend(css,{cursor:'pointer'})) <BR>.addText( d.name) <BR>.on('click ',function(){ <BR>if(opts.charts.type==='pies')return; <br>handle.call(this,i); <br>}) <br>.appendTo(legendPanel) ; <br>top = トップ h t_space; <BR>maxWidth = Math.max(maxWidth,calTextLen(d.name,css).w); ; <BR>this.baseDraw('rect', { <BR>arc : 0.1, <BR>fill : 'none', <BR>border : 1.5, <BR>borderColor : '#666666', <BR>width : maxWidth 22 15, <BR>height : top t_space -orig_pos[1], <BR>left : orig_pos[0], <BR>top : orig_pos[1] <BR>}) <BR>.appendTo(legendPanel) ; <BR>} <BR>これを返します <BR>}, <BR>drawLine : function(){ <BR>var self = this, <BR>opts = this.opts; <BR>draw = opts.draw; <BR>each(opts.chartData,function(i,o) ){ <BR>var id = 'chart' i, <BR>lineGroup = self.group(id) <BR>.appendTo(); <BR>self.mainGroup[id]={chart:lineGroup,show:true }; <BR>var path = [M], <BR>data = o.data, <BR>line; <br><br>for(var i = 0; i < data.length; i ){ <BR>if( data[i] == null){ <BR>//このデータが存在せず、最初のデータ パスではない場合は、M <BR>if(path[path.length - 1] !== M ) <BR>path.push(M); <BR>}else{ <BR>//最初のデータパスでない場合は、L <BR>i !== 0 && path.push("L") ); <BR>// 前のパスが null で、最初のパスではない場合は、L <BR>if(i > 0 && data[i - 1] == null) <BR>path.pop (); <BR> //点の x、y 位置を計算します <BR>var x =draw.startXdraw.offset (i *draw.xPices), <BR>y =draw.startY - (data[i ] * (draw.yPices) /draw.feed)); <BR>if(isIE){ <BR>x = parseInt(x); <BR>パス.push(x); <BR>path.push(y); <BR>// 点を描画します<BR>self.baseDraw('circle',{ <BR>x : x, <BR>y : y, <BR>r : 4, <BR>fillColor : o.color <BR>}) <BR>.attr({data:data[i]}) <BR>.css({zIndex:10,cursor:'pointer' }) <BR>.on ('mouseover',(function(o,x,y){ <BR>return function(){ <BR>hasSVG <BR>? (this[0].setAttribute('r', '5'),line.attr({'ストローク幅':2.5})) <BR>: (this[0].ストロークウェイト = 3,ライン[0].ストロークウェイト = 2.5); (o,x,y, this.attr('data')); <BR>} <BR><BR>})(o,x,y)) <BR>.on('mouseout',function() { <br>hasSVG <br>? (this[0].setAttribute('r','4'),line.attr({'ストローク幅':1.5})) <BR>: (this[0] .ストロークウェイト = 1,line[ 0].ストロークウェイト = 1.5); <BR>self.hideTooltip() <BR>}) <BR>.on('click',function(){lineGroup.toFront(); }) <BR>.appendTo(lineGroup ); <BR><BR>} <BR>}; <br>//ポリラインを描画します<br>line = self.baseDraw('path',{ <BR>border : 1.5, <BR>borderColor : o.color , <BR>isfill : false, <BR>path : path <BR>}) <BR>.css({zIndex:5}) <BR>.on('mouseover',function (){ <BR>hasSVG <BR>? this.attr({'ストローク幅':2.5}) <BR>: (this[0].ストロークウェイト = 2.5) <BR> .on('mouseout',function() { <BR>hasSVG <BR>? this.attr({'ストローク幅':1.5}) <BR>: (this[0].ストロークウェイト = 1.5); <BR>}) <BR>.on(' click',function(){lineGroup.toFront(); }) <BR>.appendTo(lineGroup); <BR>} , <BR>drawArea : function(){ <BR>var self = this, <BR>opts = this.opts, <BR>draw = opts.draw; <BR>each(opts.chartData,function(i,o) ){ <BR>var id = 'chart ' i, <BR>areaGroup = self.group(id).appendTo(); <BR>self.mainGroup[id] = {chart: areaGroup,show: true}; 🎜>//パスは 2 つあり、1 つは次のパスです。エリアのパスは行のパスです。<BR><BR>var areaPath = [M, (draw.startXdraw.offset).toFixed(0), (draw .startY-draw.jianju).toFixed(0)]、<BR>path = [M]、<BR>data = o.data、<BR>line; .length;n<l;n ){ <BR>/ /データが空の場合 <BR>var len = areaPath.length; <br>if( data[n] === null){ <br>//前のものが m でない場合は、再描画して M <BR>if(path[path.length - 1] !== M) <BR>path.push(M);最初または前のものが雄牛の場合、開始点の座標を変更します<BR>len===3 <BR>&&(areaPath[1] = (draw.startX (n 1)*draw.xPicesdraw.offset).toFixed( 0)); <BR><BR>//前のデータがエリアマップの終了識別子ではない場合、次の操作は実行されません <BR>if(areaPath[len - 1] ] !== seal&&n!==0){ <BR>areaPath=areaPath.concat( [ <BR>areaPath[len - 2], <BR>(draw.startY-draw.jianju).toFixed(0), <br>シール <br>]); <BR>} <BR>}else{ <br>n !== 0 && path.push(L); <br>areaPath.push(L);前のデータが null の場合は、前のデータを削除します L<BR>if(n > ; 0 && data[n - 1] == null){ <BR>path.pop(); 1 つ目は null であり、L は削除されません。 ), <BR>y =draw.startY - ((data[n]) * (draw.yPices /draw.feed)); <BR>if(isIE){ <BR>x = parseInt(x); >y = parseInt(y); <BR>パス.push(x); <BR><BR><BR>if(エリアパス[len - 1] = == seal){ <BR>areaPath = areaPath.concat([ <BR>M, <BR>x , <BR>parseInt(draw.startY-draw.jianju), <BR>L, <BR>x, <BR>y <br>]); <br>}else{ <BR>areaPath.push(x) ; <BR><BR>//最後のポイント <BR>if(n === l - 1){ <BR><BR>areaPath.push(x); ); <BR>} <br><br>//点を描画<BR>self.baseDraw('circle ',{ <BR>x : x, <BR>y : y, <BR>r : 4, <BR>fillColor : o.color <BR>}) <BR>.attr({data:data[n] }) <BR>.on('mouseover',(function(o,x,y){ <BR> return function(){ <BR>hasSVG <BR>? (this[0].setAttribute('r', '5'),line.attr({'ストローク幅':2.5})) <BR>: ( this[0].ストロークウェイト = 3,line[0].ストロークウェイト = 2.5); <BR>self.showTooltip (o,x,y,this.attr('data')); 🎜>})(o,x,y)) <br>.on('mouseout',function() { <br>hasSVG <BR>? (this[0].setAttribute('r','4') ,line.attr({'ストローク-幅':1.5})) <br>: (this[0] .ストロークウェイト = 1,line[0].ストロークウェイト = 1.5); <br>self.hideTooltip() <br>}) <br>.on('click',function(){areaGroup.toFront(); }) <BR>.css({zIndex:10,cursor:'pointer'}) <BR>.appendTo(エリアグループ); <br><br>} <BR>} <br><br>areaPath.push(seal) <br><br>self.baseDraw('path',{ <BR>border : 0, <BR>isfill : true, <BR>fillColor : o.color, <BR>opacity : 0.5, <BR>path : areaPath <BR>}) <BR>.css({zIndex:5}) <BR>.appendTo(areaGroup); <br><br>line = self.baseDraw('path',{ <BR>border : 2.5, <BR>borderColor : o.color, <BR>isfill : false, <BR>path : path <BR>} ) <BR>.on('mouseover',function(){ <BR>hasSVG <BR>? this.attr({'ストローク幅':2.5}) <BR>: (this[0].ストロークウェイト = 2.5 ); <BR>}) <BR>.on('mouseout',function(){ <BR>hasSVG <BR>? this.attr({'ストローク幅':1.5}) <BR>: (this[ 0].ストロークウェイト = 1.5); <BR>}) <BR>.on('click',function(){areaGroup.toFront(); }) <BR>.css({zIndex:-1}) <BR>.appendTo(エリアグループ); <BR>}); <BR>これを返します; <BR>}, <BR>drawColumns : function(){ <BR>var self = this, <BR>opts = this.opts, <BR>draw = opts.draw, <BR>chartData = opts.chartData, <BR>dataLen = chartData.length, <BR>//複数の列の間の間隔 <BR>columnSpace = 3, <BR>//1 つの位置内のすべての間隔之和 <BR>columnPadding = columnSpace * dataLen columnSpace, <BR>//柱子の度合い <BR>columnSize = self.opts.charts.panel==='x' <BR>? Number(((draw.xPices - columnPadding) / dataLen).toFixed(0)) <BR>: Number(((draw.yPices - columnPadding) / dataLen).toFixed(0)); <br><br>each(chartData, function(i,o){ <BR>var data = o.data, <BR>id = 'chart' i, <BR>isX = opts.charts.panel=== 'x', <BR>colGroup = self.group(id).appendTo(), <BR>//每个点開始の位置 <BR>start = self.opts.charts.panel==='x' <BR>?draw.startX columnSpace i*(columnSize columnSpace) <BR>:draw.startY columnSpace i*(columnSize columnSpace) <br><br>self.mainGroup[id] = {chart:colGroup,show:true}; <br><br>for(var j = 0,l=data.length; j <l ; j ){ <BR>if(data[j]===null) continue;横盘子 <BR>if(isX){ <BR>var x = Number((start j *draw.xPices ).toFixed(0)), <BR>y = Number((draw.startY).toFixed(0) ))、<BR>高さ = Number((data[j] * (draw.yPices /draw.feed)).toFixed(0))、<BR>パス = [ <BR>M, <BR>x, <BR>y、<BR>L、<BR>x、<BR>y -高さ、<BR>L、<BR>x 列サイズ、<BR>y - 高さ、<BR>L、<BR>x 列サイズ、 <BR>y, <BR>seal <BR>]; <BR>var pos = [x columnSize/2,data[j]>0?y-height:draw.startY]; <BR>}else{ 🎜><BR>var x = Number((draw.startX).toFixed(0)), <br>width = Number((data[j]*((draw.xPices /draw.feed))).toFixed( 0)), <br>y = Number((start - (j 1) *draw.yPices ).toFixed(0)), <BR>path = [ <BR>M, <BR>x, <BR>y 、<BR>L、<BR>x 幅、<BR>y 、<BR>L、<BR>x 幅、<BR>y 列サイズ、<BR>L、<BR>x 、<BR>y 列サイズ、 <BR>シール<BR>]; <BR>var pos = [draw.startX width/2,y-columnSize]; <BR>} <BR><BR>self.baseDraw('path',{ <br>border : 0, <br>isfill : true, <BR>fillColor : o.color, <BR>opacity : 1, <BR>パス : パス <BR>}) <BR>.attr({data:data[j]}) <BR>.css({zIndex:5,cursor:'pointer'}) <BR>.on('マウスオーバー',(function(x,y,d){ <BR><BR>return function(){ <br><br>this.setOpacity(0.85); <br><br>self.showTooltip(o,x ,y,this.attr('data')); <br>} <br><BR>})(pos[0],pos[1],data[j]) <br><br>) <br>.on('mouseout',(function(x,y){ <br>return function(){ <BR>this.setOpacity(1); <BR>self.hideTooltip(); <BR>} <BR> })(x,y)) <BR>.appendTo(colGroup); <BR><BR>} <br>}); <br>これを返します; <BR>}, <BR>drawPie : function(){ <BR>var self = this, <BR>opts = this.opts, <BR>area = opts.area, <BR>rx = area.centerX, <BR>ry = area.centerY, <BR>inc = 0, <BR>total = 0, <BR>data = [], <BR>cumulative = -0.25, // 先頭から開始; <BR>circ = 2 * Math.PI, <BR>radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2)), <BR>fraction, <BR>half_fraction; <BR><BR>each(opts.chartData,function(i,o){ <br>typeof o.data ==='object' <br>? (data.push((function(o){ <BR> var all =0; <BR>for(var i in o) <BR>all =~~o[i] <BR>すべてを返す <BR>})(o.data))) <BR>:data.push (mathAbs(o.data)) <BR><BR>}); <br><br>each(data,function(i,o){ <br>total = total o; <br>}); <BR><BR>each(data,function(i,o){ <br>var pieGroup = self.group('chart' i).appendTo(), <br>s = inc/total*360, <BR>e = (inc o)/total*360、<BR>name = opts.chartData[i].name、<BR>size = calTextLen(name)、<BR>dot = angle(radiu,[rx,ry] ,s (e-s)/2,2)、<BR>x = rx (dot[0]-rx)/2 - size.w/2、<BR>y = ry (dot[1]-ry)/2 - size.h/2、<BR>len = Math.sqrt((x-rx)*(x-rx) (y-ry)*(y-ry))、<BR>moveDisplacement = ((x-rx) )*8/len) ',' ((y-ry)*8/len); <BR><BR>inc = inc o; <br><br>var value = Number(o); = 合計 ? 値 / 合計 : 0; <br>half_fraction = 合計 ? (値 / 2) / 合計 : 0; <br>half_cumulative = 累積 Half_fraction;累積 = 分数; <BR><BR>var end = 累積 * circ; <br><br>self.baseDraw('pie',{ <BR>config : opts.chartData[i], <BR>s : start 、<br>e : 終了、<br>r : 半径、<br>innerR : 0 <br>}) <BR>.css({zIndex:5,cursor:'pointer'}) <BR>.attr( {move:moveDisplacement}) <BR>.on('mouseover',function(){ <BR>this.setOpacity(0.85); <BR>}) <BR>.on('mouseout',function(){ <BR>this.setOpacity(1); <BR>}) <BR>.on('click',function(){ <BR>var m = this.attr('move') <BR>if(m.indexOf(' ')>0){ <BR>hasSVG <BR>? this.attr({ <BR>transform: 'translate(0,0)' <BR>}) <BR>: this.css({ <BR>left : '0px', <BR>top : '0px' <BR>}) <BR>this.attr({move:m.replace(' ','')}); <br><br>}else{ <BR>var s= m.split( ','); <BR>hasSVG <BR>? this.attr({ <BR>transform: 'translate(' m ')' <BR>}) <BR>: this.css({ <BR>left : s[0] 'px', <BR>top : s[1] 'px' <BR>}) <br><br>this.attr({move:m ' '}); >}) <BR>.appendTo(pieGroup); <BR><BR>self.mainGroup['chart' i] = {chart:pieGroup,show:true}; <br><br>self.baseDraw('span',{ <br>x : x, <br>y : y, <BR>fill : '#fff', <BR>'text-anchor':'left ' <BR>}) <BR>.css({ <BR>fontFamily : 'Verdana,Arial,Helvetica,sans-serif', <BR>fontSize : '12px', <BR>position : 'absolute', <BR>color : '#fff', <BR>zIndex : 10 <BR>}) <BR>.addText(name) <BR>.appendTo(pieGroup); <BR>}); <BR><BR>}, <br>drawPies : function(){ <br><BR>var self = this, <br>opts = this.opts, <br>area = opts.area, <BR>rx = area.centerX, <BR>ry = area.centerY, <BR>total = 0, <BR>data = [], <BR>chartData = opts.chartData, <BR>cumulative = -0.25, // 開始時刻トップ; <BR>circ = 2 * Math.PI、<BR>radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2))、<BR>fraction、<BR>half_cumulative、 <BR>半分の小数; <BR><BR>each(chartData,function(i,o){ <br>each(o.data,function(j,d){ <br>data[j] <BR>? data[j] =mathAbs (d) <BR>: データ[j] =mathAbs(d) <BR>}); <BR>//あるデータを見て生成、生成内半径 <BR>var len = data.length, <br>innerSpace = radiu / 10; <br>Rpice = (radiu - innerSpace) / len, <BR>piesGroup = this.group('pies').appendTo(); <BR><BR>each(data,function(i,d){ <BR>var inc = 0 ; <BR>if(d===0) return; <br>each(chartData,function(j,o) ){ <br>if(~~o.data[i]===0)return; <BR>var outR = radiu - Rpice * i, <BR>innerR = radiu - Rpice * (i 1), <BR>value = ~~o.data[i]、<BR>fraction = value / d; <BR>half_fraction = (value/2)/d 、<BR>start = 累積 * circ、<BR>s = inc/ d*360, <BR>e = (inc 値)/d*360; <BR><BR>inc = inc 値; <BR>var name = o.name, <BR>size = calTextLen(name), <br>dot = angle(radiu,[rx,ry],s (e-s)/2,2), <br>px = dot[0]>rx?1:-1, <BR>py = dot[1 ]>ry?1:-1; <BR>var x = rx px*innerSpace ((dot[0]-rx-px*innerSpace)/len)*(len-i-1) ((dot[0] -rx-px*innerSpace)/len)/2- size.w/2, <BR>y = ry py*innerSpace ((dot[1]-ry-py*innerSpace)/len)*(len-i- 1) ((dot[1]-ry-py*innerSpace)/len)/2- size.h/2; <BR><BR>half_cumulative = 累積 Half_fraction、<BR>cumulative = 分数、<BR>end =累積 * circ; <br><br>self.baseDraw('pie',{ <BR>config : o, <BR>s : start, <br>e : end, <br>r : outR, <BR> innerR : innerR <BR>}) <BR>.css({zIndex:5,cursor:'pointer'}) <BR>.on('mouseover',function(){ <BR>this.setOpacity(0.85); <BR>}) <BR>.on('mouseout',function(){ <BR>this.setOpacity(1); <BR>}) <BR>.appendTo(piesGroup); <BR>self.baseDraw('span',{ <BR>x : x, <BR>y : y, <BR>fill : '#fff', <BR>'text-anchor':'left' <BR>}) <BR>.css({ <BR>fontFamily : 'Verdana,Arial,Helvetica,sans-serif', <BR>fontSize : '12px', <BR>position : 'absolute', <BR>color : '#fff', <BR>zIndex : 10 <BR>}) <BR>.addText(name) <BR>.appendTo(piesGroup); <BR><BR>}) <BR>}); <BR><br>}、<br>drawSegment : function(){ <BR>var self = this、<br>opts = this.opts、<br>draw = opts.draw、<BR>chartData = opts。 chartData、<BR>columnPad = 5、<BR>columnWidth =draw.xPices - columnPad * 2; <BR><BR>each(chartData,function(i,c){ <BR><BR><br>}); <br>}, <br>baseDraw : function(type,config){ <br>var self = this <BR>arg = 引数; <BR>return { <BR>rect : function(){ <BR>var set = {}; <BR>set.rx = set.ry = config.arc*30 || 5; <BR>set.width = config.width || 50; <BR>set.height = config.height || 50; <BR>set.fill = config.fill || '#fff'; <BR>set['fill-opacity'] = config.opacity || 0.85; <BR>set['ストローク幅'] = config.border || 2; <BR>set.ストローク = config.borderColor || '#606060'; <BR>set.transform = 'translate(' (config.left||0) ',' (config.top||0) ')'; <BR>return self.createElement('rect') <BR>.attr(set) <BR><BR>}, <BR>text : function(){ <BR>return self.createElement('text') <br>.attr(config) <br>}, <BR>span : function(){ <BR>var elem= self.createElement('text') <BR>.attr(config) <BR>.attr({ <BR>y : config.y (arg[2]||15) <BR>}) <BR>return elem; <BR>}, <BR>パス : function(){ <BR>var set = {}; <BR>set['ストローク幅'] = config.border; <BR>set.ストローク = config.borderColor || '#C0C0C0'; <BR>set.fill = config.isfill?config.fillColor:'none'; <BR>set.d = config.path; <BR>config.opacity <BR>&&(set['fill-opacity'] = config.opacity); <BR><BR>return self.createElement('path') <BR>.attr(set); <BR>}, <br>circle : function(){ <br>var set = {}; <BR>set.cx = config.x; <BR>set.cy = config.y; <BR>set.r = config.r; <BR>set.fill = config.fillColor; <BR>return self.createElement('circle') <BR>.attr(set); <BR>}, <BR>pie : function(){ <BR>//config,s,e,r,index <BR>var opts = self.opts, <BR>s = config.s, <BR>r = config. r、<BR>e = config.e - 0.000001、<BR>id = 'chart' config.index、<BR>エリア = opts.area、<BR>rx = area.centerX、<BR>ry = エリア。 centerY、<BR>cosStart = mathCos(s)、<BR>sinStart = mathSin(s)、<BR>cosEnd = mathCos(e)、<BR>sinEnd = mathSin(e)、<BR>color = config.config .color、<BR>innerR = config.innerR、<BR>longArc = e - s <;数学.PI? 0 : 1, <BR>path = [ <BR>M, <BR>rx r * cosStart, <BR>ry r * sinStart, <BR>'A', <BR>r, <BR>r, <BR>0、<BR>longArc、<BR>1、<BR>rx r * cosEnd、<BR>ry r * sinEnd、<BR>L、<BR>rx innerR * cosEnd、<BR>ry innerR * sinEnd、 <BR>'A', // arcTo <BR>innerR, // x 半径 <BR>innerR, // y 半径 <BR>0, // 傾斜 <BR>longArc, // 長い円弧または短い円弧 <BR> 0, // 時計回りに <BR>rx innerR * cosStart, <BR>ry innerR * sinStart, <BR>'Z' <BR>]; <br><br>return self.baseDraw('path',{ <BR>border : 1, <BR>border : '#fff', <BR>isfill : true, <BR>fillColor : color, <BR>不透明度 : 1, <BR>パス : パス <br><br>}) <br><br>} <BR>}[タイプ](); <BR>} <BR>}; <br><br>//------------------------------------------ -------------------------------------------------- ------- <BR>//結果が vml 修正smipleChart.prototype 内のいくつかのメソッド <BR>!hasSVG <BR>&&extend(smipleChart.prototype,{ <BR>baseDraw : function(type,config){ <BR>var self = this, <BR>width = this.width, <BR>height = this.height, <BR>name = argument[2]; <BR>return { <BR>rect : function(){ <BR>var attr = {}, <BR>css = {}; <BR>attr.arcsize = config.arc || 0.2 ''; <BR>if(config.fill==='none') 🎜>attr.filled = 'f' <BR>}else{ <BR>attr.filled = 't'; <BR>attr.fillcolor = '#fff' || <BR>attr.ストローク重量 = config.border || 2; <BR>attr.ストロークカラー = config.borderColor || '#606060'; <br>css.width = config.width || >css.height = config.height || 50 'px'; <br>css.zIndex = 10; <BR>css.left = config.left||0 'px';トップ ||0 'px'; <BR><BR>return self.createElement('roundrect') <BR>.attr(attr) <BR>.css(css) <BR>}, <br>text : 関数(){ <br>return self.createElement('TextBox') <BR>.attr({inset : "2px,2px,2px,2px" }) <BR>}, <BR>span : function(){ <BR>return self.createElement('span')。 <BR>css({ <BR>position:'absolute', <BR>left : config.x 'px', <BR>top : config.y 'px' <BR>}) <BR>}, <BR>path : function(){ <BR>var attr = {}, <BR>css = { <BR>width : 幅 'px', <BR>height : 高さ 'px' <BR>}; <BR><BR>if(config.border===0){ <BR>attr.Stroked = 'f'; <BR>attr.ストロークウェイト =0; <BR>}else{ <br>attr.ストロークウェイト = config.border||1 ; <br>} <BR>attr.ストロークカラー = config.borderColor || "#C0C0C0"; <BR>attr.filled = config.isfill?'t':'f'; <BR>attr.filled==='t' <BR>&&(attr.fillcolor=config.fillColor||"#C0C0C0"); <BR>attr.coordsize = 幅 ',' 高さ; <BR>attr.path = config.path; <BR>var elem = self.createElement() <BR>.attr(attr) <BR>.css(css); <BR>if(config.opacity){ <BR>var fill = self.createElement('fill') <BR>.attr({ <BR>type : 'fill', <BR>color : config.fillColor|| "#C0C0C0", <BR>opacity : config.opacity <BR>}) <BR>.appendTo(elem); <BR>//このオブジェクトのプロパティ参照設定の透明な要素は、その後 <BR>elem.opacity = fill[0]; に使用されます。 <BR>} <BR>要素を返します。 <BR><BR>}, <BR>circle : function(){ <BR>var attr ={ <BR>ストロークWeight : 1, <br>coordsize : width ',' height, <br>filled : 't' <BR>}, <BR>css ={ <BR>width : 幅 'px', <BR>height : 高さ 'px' <BR>} <BR>x = config.x, <BR>y = config. y, <BR>r = config.r; <BR>attr.drawingColor=attr.fillcolor = config.fillColor <BR><BR>attr.path =[ <BR>'wa', // 時計回りに円弧 <BR>x - r, // 左 <BR>y - r, // 上 <br>x r, // 右 <br>y r, // 下 <BR>x r, // 開始 x <BR>y, // 開始 y <BR>x r, // 終了 x <BR>y, // y を終了 <BR>'e' // 閉じる <BR>]; <BR>return self.createElement() <BR>.attr(attr) <BR>.css(css) <BR>}, <BR>pie : function(){ <BR>////config,s,e,r,index <br><br>var opts = self.opts, <BR>area = opts.area, <BR>r = config.r、<BR>rx = area.centerX、<BR>ry = area.centerY、<BR>innerR= config.innerR||0、<BR>sDot = angle(r,[rx,ry ],s,2)、<BR>eDot = angle(r,[rx,ry],e,2)、<BR>color = config.config.color、<BR>s = config.s、<BR> e = config.e, <BR>e = e - s == 2 * Math.PI ? e - 0.001 : e、<BR>cosStart = mathCos(s)、<BR>sinStart = mathSin(s)、<BR>cosEnd = mathCos(e)、<BR>sinEnd = mathSin(e)、<br><br><BR>path = [ <BR>'wa', // 時計回りに円弧 <BR>(rx - r).toFixed(0), // 左 <BR>(ry - r).toFixed(0), / / 上 <BR>(rx r).toFixed(0), // 右 <BR>(ry r).toFixed(0), // 下 <BR>(rx r * cosStart).toFixed(0), / / start x <BR>(ry r * sinStart).toFixed(0), // start y <BR>(rx r * cosEnd).toFixed(0), // end x <BR>(ry r * sinEnd) .toFixed(0), // y の終わり <br><br>'at', // 時計回りの円弧 <BR>(rx - innerR).toFixed(0), // 左 <BR>(ry - innerR).toFixed (0), // 上 <BR>(rx innerR).toFixed(0), // 右 <BR>(ry innerR).toFixed(0), // 下 <BR>(rx innerR * cosEnd).toFixed (0), // 開始 x <BR>(ry innerR * sinEnd).toFixed(0), // 開始 y <BR>(rx innerR * cosStart).toFixed(0), // 終了 x <BR>( ry innerR * sinStart).toFixed(0), // 終了 y <br><br>'x', // 終了パス <BR>'e' // 閉じる <BR>]; <br><br>return self.baseDraw('path',{ <BR>border : 1, <BR>border : '#fff', <BR>isfill : true, <BR>fillColor : color, <BR>不透明度 : 1, <BR>パス : パス <BR>}) <br><br>} <BR>}[タイプ](); <BR>} <BR>}); <br><br>//------------------------------------------ -------------------------------------------------- ------- <BR>})(ドキュメント); <br><br>window.onload = function(){ <BR>var config = { <BR>charts : { <BR>type : 'line', <BR>radius : 150, <BR>panel : 'x ', <BR>style: { <BR>fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // デフォルトのフォント <BR>fontSize: '12px' <BR>} <BR>}, <BR>title : { <BR>text : '線性图标' , <BR>y : 10, <BR>style : { <BR>color: 'black', <BR>fontSize: '16px' <BR>} <BR>}, <BR>subTitle : { <BR>text : '線性图标副标题', <BR>y : 35, <BR>style: { <BR>color: '#111 ', <BR>fontSize: '12px' <BR>} <BR>}, <BR>legend : { <BR>enable : true, <BR>//type : 'lartical', // 横方向の横方向または縦方向の纵方向<BR>type : 'larate'、<BR>pos : [10,10]、<BR>style:{ <BR>fontFamily: '"Lucida Grande"、"Lucida Sans Unicode"、Verdana、Arial、Helvetica、sans -serif', // デフォルトのフォント <BR>fontSize: '12px', <BR>magin:'0px' <BR>} <BR>}, <BR>yUnit : { <BR>text : '線性图标侧标题', <BR>x : 20, <BR>style: { <BR>color : '#111', <BR>fontSize : '12px' <BR>} <BR>}, <BR>xUnit : { <BR>単位: [ <BR>'一月', <BR>'二月', <BR>'三月', <BR>'四月', <BR>'五月', <BR>'六月'、<BR>'七月'、<BR>'八月'、<BR>'九月'、<BR>'十月'、<BR>'十一月'、<BR>'十二月' <BR>] <BR>}, <BR>chartData : [ <BR>{ <br><br>name : 'xcv', <BR>color : '#4572A7', <BR>data : [-18 ,45,-38,29,95,-45,77] <BR>}, { <br><br>名前: 'frfr', <BR>色: '#AA4643', <BR>データ: [- 44,12,78,-100,13,4,-56,-34] <BR>}, { <BR>名前: 'AAAAA', <BR>色: '#89A54E', <br><br>データ: [null,78,83,null,22,-78,2,44,78] <BR>}, { <BR>名前: 'BBBB', <BR>色: '#80699B', <BR>データ: [null, 58, 35, null, 52, 47, 26, -55, 39, 123,15,66] <BR>} <BR>] <BR>}; <br><br>new smipleChart($('line'),config); <BR>config.charts.type ='エリア'; <BR>config.title.text ='領域图标' <BR>config.subTitle.text='領域图标副标题' <BR>config.yUnit.text ='領域图标侧标题' <br><br>新しい smipleChart ($('エリア'),config); <BR>config.title.text ='柱状图标' <BR>config.subTitle.text='柱状图标副标题' <BR>config.yUnit.text ='柱状图标侧标题' <BR>config.charts.type ='列'; <BR>config.chartData =[ <BR>{ <br><br>名前 : 'xcv', <BR>色 : '#4572A7', <br><br>データ : [-0.01,-0.62,0 ,0.55,null,0.78,-0.63,-0.82,null,null,0.33] <BR>}, { <br><br>名前: 'frfr', <BR>色: '#AA4643', <BR>データ: [-0.22,0.82,0.55,1.32,0.33,0.95,null,1,0.65,null,0.78] <BR>}, { <BR>名前: 'AAAAA', <BR>色: '#89A54E' 、<br><br>データ: [null,0.62,0.34,null,0.63,0,-0.23,-1,0.62,0.45,null,-0.56] <BR>} <BR>] <br><br>新しいsmipleChart($('zhu'),config); <BR>config.charts.panel='y' <BR>new smipleChart($('zhu1'),config); <BR>config.charts.type ='pie'; <BR>config.title.text ='饼图图标' <BR>config.subTitle.text='饼图图标副标题' <BR>config.yUnit.text ='' <BR>config.legend.type='縦方向に'; <BR>config.chartData =[ <BR>{ <br><br>名前 : 'aaa', <BR>色 : '#4572A7', <br><br>データ : [433,123,null,66] <BR>}, { <br><br>名前: 'bbb', <BR>色: '#AA4643', <BR>データ: [45,33,33,511] <BR>}, { <BR>名前: 'ccc'、<BR>カラー: '#89A54E'、<br><br>データ: [55,null,75,333] <BR>}<BR>] <BR>config.legend.pos= [680,30] <BR>new smipleChart($('pie'),config); <BR>config.charts.type ='pies'; <BR> config.title.text ='Multi-layered pie chart icon' <BR>config.subTitle.text='Multi-layered pie chart icon subtitle' <BR>config.legend.type='lateral'; <BR>config.legend. pos= [330,400] <BR>new smipleChart($('pies'),config); <br><br><BR>config.chartData =[ <BR>{ <br><br>name : 'xcv' , <BR>color : '#4572A7', <br><br>data : [433,355,275,null,588,323,576,32,99] <BR>}, { <br><br>name: 'frfr', <BR>color: '#AA4643', <BR>data: [45,666,100,null,677,56,88,633,55,64] <BR>}, { <BR>name: 'AAAAA', <BR>color: '# 89A54E', <br><br>data: [55,162,75,null,364,0,637,112,163,615] <BR>} <BR>] <BR>config.yUnit.lineNum = 2; <BR>config.title.text = 'Relatively small' <BR>config.subTitle.text='Only 2 lines are set' <BR>config.yUnit.text ='Quiz title'; <br><br>config.charts.type =' line'; <BR>config.legend.pos= [10,10] <BR>new smipleChart($('vv'),config); <BR>config.yUnit.lineNum = 10; <BR>config.charts .panel = 'x'; <BR>config.charts.type ='segment'; <BR>//new smipleChart($('segment'),config); <br><br>} <BR>< /script> <br></body> <br></html> <br></length> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
