JavaScript menggunakan smileChart untuk melaksanakan kemahiran charts_javascript yang mudah

Sokongan carta linear, carta kawasan, carta bar, carta pai

Sokong berbilang penyemak imbas

Vml svg terpakai

Salin kod Kod adalah seperti berikut: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml "> smipleChart .cc{ height:450px; width:800px; border:1px solid #999; position:relative; margin:20px; } (fungsi(doc,undefined){ var win = ini, uuuid = -1, hasSVG = menang.SVGAngle || doc.implementation.hasFeature(" http://www.w3.org/TR/SVG11/feature#BasicStructure ", "1.1"), isIE = /msie/i.test(navigator.userAgent) && !win.opera, laluan = hasSVG?'d':'path', meterai = mempunyaiSVG?'z':'e', matematik = Matematik, mathRound = math.round, mathFloor = math.floor, mathCeil = math.ceil, mathMax = math.max, mathMin = math.min, mathAbs = math.abs, mathCos = math.cos, mathSin = math.sin, M = 'M', L = 'L'; menang.$$ = fungsi(Id){ pulangkan document.getElementById(Id); }; win.extend = function(){ var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, pilihan; jika ( jenis sasaran === "boolean") { dalam = sasaran; sasaran = hujah[1] || {}; i = 2; } jika ( jenis sasaran !== "objek" && Object.prototype.toString.call(target)!="[object Function]") sasaran = {}; untuk(;i jika ( (pilihan = hujah[ i ]) != batal ) for(nama var dalam pilihan){ var src = sasaran[ nama ], salinan = pilihan[ nama ]; jika ( sasaran === salin ) teruskan; jika ( dalam && salin && jenis salinan === "objek" && !copy.nodeType ){ target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy ); } else if(copy !== undefined) sasaran[ nama ] = salinan; } } sasaran pulangan; }; win.each = fungsi ( objek, panggil balik, args ) { nama var, i = 0, panjang = objek.panjang; jika ( args ) { args = Array.prototype.slice.call(arguments).slice(2); jika ( panjang === tidak ditentukan ) { untuk ( nama dalam objek ) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) pecah; } lain untuk ( ; i if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // pecah; } lain { jika ( panjang === tidak ditentukan ) { untuk ( nama dalam objek ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) pecah; } lain untuk ( nilai var = objek[0]; i } objek kembali; }; win.contains = fungsi(p,c){ if(!p||!c)return false; jika(p===c) kembali benar; kembalikan isIE ? p.mengandungi(c) : p.compareDocumentPosition(c)==20 ? benar : palsu; }; //------------------------------------------------ --------------- function processPoint( x ){ pulangkan isIE ? ~~x.toFixed(0) : ~~x.toFixed(0) 0.5; }; fungsi calTextLen(txt, cssStr){ var span = doc.createElement('span'); if(cssStr){ typeof cssStr === 'rentetan' ? span.style.cssText = cssStr : extend(span.style,cssStr); }lain{ lanjutkan(span.style,{ fontSiz : '12px', fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif' }); } span.innerHTML = txt || ''; span.style.visibility = 'tersembunyi'; doc.body.appendChild(span); var width = span.offsetWidth, ketinggian = span.offsetHeight; doc.body.removeChild(span); kembalikan {w:width,h:height}; }; sudut fungsi(r,pusat,o,jingdu){ var hudu = Math.PI*2*(o/360), x = pusat[0] r*Math.sin(hudu), y = pusat[1] -r*Math.cos(hudu); kembalikan [x.toFixed(jingdu||0),y.toFixed(jingdu||0)]; } fungsi xx(a,b,lineNum){ var t = 1000, stf = ((b*t-a*t)/lineNum)/t, arr = [1,2,2.5,5,10], c = 1, v; // 分割线的基数是 [1,2,2.5,5,10] 这个步骤是查找 间隔 属于哪个范围 if(stf manakala( stf c = c*10; arr[0]=arr[0]/c; } setiap ([1,2,2.5,5,10],fungsi(i,o){ arr[i]= o/c; }); }lain jika(stf>arr[4]){ manakala( stf>arr[4] ){ c = c*10; arr[4] = arr[4]*c; } setiap ([1,2,2.5,5,10],fungsi(i,o){ arr[i]= o*c; }); } //上面找到间隔后 找到间隔中最接近的一个 setiap(arr,fungsi(i,o){ jika(stf v = o; pulangkan palsu; } }); var bj = (mathAbs(a)*t)/(v*t), ba = 0, isZ = bj!==parseInt(bj); isZ &&a>0 ? ba = -a%v*t : ba = (mathAbs(a)%v-v)*t; a = (a*t ba)/t; b = (b*t (b%v===0?0:(v-b%v))*t)/t; //看看还剩几条线没有画 var num = Math.max(0,lineNum - Math.round((b-a)/v)); jika(a>=0){ //坐标比较整数化 jika(a!=0&&num!=0&&a !==0){ manakala(a!=0&&num!=0){ a = (a*t-v*t)/t; bilangan--; if((a*t-v*num*t)/10000>0&&a ===0) rehat; } } jika(bilangan!=0){ manakala(bilangan!==0){ b = (b*t v*t)/t bilangan--; } } }lain{ //坐标比较整数化 jika(b manakala(b!=0&&num!=0&&b !==0){ b = (b*t v*t)/t; bilangan--; if((b*t v*num*t)/t pecah; } } jika(bilangan!=0){ manakala(bilangan!==0){ a = (a*t-v*t)/t bilangan--; } } } kembali {min:a,maks:b,stf:v}; } //------------------------------------------------ ------------------------------------------------- ------------- //对svg vml元素的一些创建 修改属性 样式 删除 == 一些的操作 win.vector = function(){}; vektor.prototaip = { $c : fungsi(grafik,Nama nod){ this.element = this[0] = doc.createElementNS('http://www.w3.org/2000/svg', nodeName); this.graphic = grafik; pulangkan ini; }, attr: fungsi(cincang,val){ var elem = this.element, kunci, nilai; if(jenis cincang === 'rentetan'){ if(val === undefined){ kembalikan elem.getAttribute(hash); }lain{ elem.setAttribute(hash, val); pulangkan ini; } } lain { untuk(masukkan cincangan){ nilai = hash[key]; if(kunci === laluan){ nilai && nilai.sertai &&(value = value.join(' ')); /(NaN| |^$)/.test(value) &&(nilai = 'M 0 0'); } elem.setAttribute(kunci, nilai) } } pulangkan ini; }, css: fungsi(cincang){ untuk(kunci var dalam cincang){ isIE && key == "opacity" ? this[0].style['filter'] = "alpha(opacity=" hash[key] * 100 ")" : this[0].style[key] = hash[key]; } pulangkan ini; }, on: function(eventName, handler){ var diri = ini; /*this.element.addEventListener(eventName,function(){ pengendali.panggil(diri) },palsu);*/ this.element['on' eventName] = fungsi(e){ e = e || menang.acara; handler.call(self,e); } pulangkan ini; }, appendTo: fungsi(ibu bapa){ jika(ibu bapa){ induk.elemen ? parent.element.appendChild(this.element) : parent.appendChild(elemen.ini) } lain { this.graphic.container.appendChild(this.element); } pulangkan ini; }, addText: function(str){ var elem = this.element; if(elem.nodeName === 'teks'){ elem.appendChild(doc.createTextNode(str '')); } pulangkan ini; }, setOpacity : function(v){ this.attr('fill-opacity',v); pulangkan ini; }, setSize : fungsi(v){ ini[0].nodeName==='bulatan' ? this.attr('r',4 (v===0?0:2)) : this.attr({'lebar lejang':v}); pulangkan ini; }, toFront: function() { this[0].parentNode.appendChild(this[0]); pulangkan ini; }, tunjukkan: fungsi(){ ini[0].style.display = 'block'; pulangkan ini; }, sembunyikan: fungsi(){ ini[0].style.display = 'tiada'; pulangkan ini; }, musnahkan : function(){ //销毁节点...................... nod var = ini[0] || ini; node.onmouseover = node.onmouseout = node.onclick = null; node.parentNode &&node.parentNode.removeChild(nod); pulangkan ini; } }; //------------------------------------------------ ------------------------------------------------- ------------- //------------------------------------------------ ------------------------------------------------- - //Jika ia vml, ubah suai beberapa kaedah jika(!hasSVG){ //--------------Buat persekitaran vml----------------- doc.createStyleSheet().addRule(".vml", "behavior:url(#default#VML);display:inline-block;position:absolute;left:0px;top:0px"); !doc.namespaces.vml && ! "v1"; doc.namespaces.add("vml", "urn:schemas-microsoft-com:vml"); //-------------Ubah suai beberapa kaedah----------------- extend(vector.prototype,{ $c : fungsi(grafik,Nama nod){ var name = nodeName || 'bentuk'; This.element= this[0] = (nama === 'div' || nama === 'span') doc.createElement(nama) : doc.createElement(' '; This.graphic = graphic; Kembalikan ini; }, /*on : function(Nama acara, pengendali){ var diri = ini; This.element.attachEvent("on" eventName,function(){ pengendali.call(self); }); Kembalikan ini; },*/ AddText: function(txt){ Ini[0].innerHTML = txt || Kembalikan ini; }, setSize : fungsi(v){ Ini[0].strokeWeight = v; Kembalikan ini; }, setOpacity : function(v){ This.opacity.opacity=v; Kembalikan ini; } }); } //------------------------------------------------ ------------------------------------------------- - //Kelas lukisan //------------------------------------------------ ------------ win.smipleChart = function(){ This.init.apply(this,arguments); }; smileChart.list = []; smileChart.timer = null; smipleChart.lazyLoad = function(id){ id = id ||. '0' smileChart.list[id] &&smipleChart.list[id].loadMe(); }; smileChart.prototype = { pilihan : { Carta: { paddingKanan: 20, jejari : 200, Gaya : { fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', Saiz fon : '12px', latar belakang : '#FFFFFF' } }, tajuk: { teks : '', y : 10, Gaya: { fonKeluarga:'Verdana,Arial,Helvetica,sans-serif', Saiz fon:'16px', fonBerat:'bold' } }, subTajuk: { teks : '', y : 30, Gaya : { fonFamily:'Verdana,Arial,Helvetica,sans-serif', Saiz fon:'12px', Warna: '#111' } }, yUnit: { teks : '', Gaya: { fonFamily:'Verdana,Arial,Helvetica,sans-serif', Saiz fon:'12px', Warna: '#111' }, Nombor Baris:10 } }, init : fungsi(bekas, pilihan){ clearTimeout(smipleChart.timer) var diri = ini; This.width = container.offsetWidth; This.height = container.offsetHeight; This.currList = {}; This.uuuid = uuuuid; This.timer = null; //Borang koleksi kumpulan lukisan utama //{id : {dom:xx,show:true}} This.mainGroup = {}; // Digunakan semasa membahagikan untuk mengetahui mana yang tersembunyi kerana lukisan semula terlibat This.hideList = {}; //Apabila melukis gambar di dalam svg, mesti ada tag svg Untuk vml, div digunakan This.container = hasSVG ? vektor baharu().$c(1,'svg') .attr({ xmlns : 'http://www.w3.org/2000/svg', Versi: '1.1', lebar: this.width, Tinggi : this.height }) .css({fontSize : '12px'}) .appendTo(bekas) : vektor baharu().$c(1,'div') .css({ Saiz fon : '12px', : 'px' lebar ini, Ketinggian : this.height 'px' }) .appendTo(bekas); This.loading = container.appendChild(doc.createElement('img')); This.loading.setAttribute('src','http://images.cnblogs.com/cnblogs_com/wtcsy/192373/r_loading.gif'); This.loading.style.position = 'mutlak'; This.loading.style.top = container.offsetHeight/2- this.loading.offsetHeight/2 'px'; This.loading.style.left = container.offsetWidth/2- this.loading.offsetWidth/2 'px';

}); var xPices = drawAreaWidth / lineNum; untuk(var i=0;i Self.baseDraw.path(self,{ Sempadan : 1, Warna Sempadan: '#C0C0C0', isfill : palsu, Laluan : [ M, processPoint(startX (i * xPices)), processPoint(startY), L, processPoint(startX (i*xPices)), processPoint(startY - drawAreaHeight) ] }). tambahkepada(panel); Self.baseDraw.span(self,{ x: startX - calTextLen(min i*f '').w/2 i * xPices, y : mulaY, 'text-anchor':'left' }) .css({ fonFamily:'Verdana,Arial,Helvetica,sans-serif', Saiz fon:'12px' }) .addText(min i*f '') .appendTo(panel); } } //------------------------------------------------ ------------------------------------------------- --- //Oleh kerana titik permulaan mungkin tidak bermula dari 0, nilai sehingga 0 mesti ditambah pada titik permulaan var jianju =0; Jika(min>0)jianju = min; Jika(maks StartX = opts.charts.panel==='x' ? startX :startX-xPices*(min/f); StartY = opts.charts.panel==='x' ? mulaY yPices*(min/f) : startY; Opts.draw = { StartX : startX, // titik permulaan paksi-X StartY : startY, // titik permulaan paksi-Y xPices : xPices, // Lebar setiap bahagian paksi X yPices : yPices, // Lebar setiap bahagian paksi Y Offset : offset, // X kedudukan titik tengah titik tunggal offset jianjuY : jianju*yPices/f, jianjuX : jianju*xPices/f, Suapan : f // Berapakah bilangan salinan pada paksi Y } Kembalikan ini; }, createTooltip: function(){ //Sekumpulan This.tipC = this.group('tip') .css({zIndex: 200, tinggi:'20px',lebar:'20px',kedudukan:'mutlak'}) .appendTo() .sembunyi() //Lukis bingkai asasLukis This.tipBox = this.baseDraw.rect(this,{arc:0.22,fill:'#fff',border:2,borderColor:'#606060'}) .appendTo(this.tipC) //Oleh kerana g dalam svg boleh diletakkan secara langsung, tetapi rendering kumpulan dalam vml sangat perlahan, jadi saya menukar div, jadi induk di sini berbeza var p = isIE ?this.tipBox :this.tipC; This.tipTxtContainer = this.baseDraw.text(this,{fill:'#000000',x:5,y:19,'text-anchor':'left'}) .css({ fonFamily:'Verdana,Arial,Helvetica,sans-serif', Saiz fon:'12px', latar belakang: '#FFF' }) .appendTo(p); This.tipText = doc.createTextNode(''); This.tipTxtContainer[0].appendChild(this.tipText); Kembalikan ini; }, showTooltip: fungsi(obj, x, y,data){ /*var txt = obj.name ':' data, saiz = calTextLen(txt,this.tipTxtContainer[0].style.cssText), pos = {x : x - (saiz.w 5 * 2)/2 ,y : y - 32}; This.tipC .toFront() .show(); jika(mempunyaiSVG){ This.tipC.attr({transform:'translate(' pos.x ',' pos.y ')'}); This.tipBox .attr({lebar : saiz.w 5 * 2,tinggi : saiz.h 5 * 2,lejang : obj.color||'#606060'}); }lain{ This.tipC.css({left:pos.x,top:pos.y}); This.tipBox .css({lebar:saiz.w 5 * 2,tinggi : saiz.h 5 * 2}) This.tipBox[0].strokeColor = obj.color||'#000'; } This.tipText.nodeValue = txt || ClearTimeout(this.timer); var txt = obj.name ':' data, diri = ini, saiz = calTextLen(txt,this.tipTxtContainer[0].style.cssText), pos = {x : x - (saiz.w 5 * 2)/2 ,y : y - 32}; jika(mempunyaiSVG){ self.tipBox .attr({lebar : saiz.w 5 * 2,tinggi : saiz.h 5 * 2,lejang : obj.color||'#606060'}); }lain{ self.tipBox .css({lebar:saiz.w 5 * 2,tinggi : saiz.h 5 * 2}) Self.tipBox[0].strokeColor = obj.color||'#000'; } This.tipText.nodeValue = txt || if(this.tipC[0].style.display === 'tiada'){ HasSVG ? self.tipC.attr({transform:'translate(' pos.x ',' pos.y ')',pos:pos.x '-' pos.y}) : self.tipC.attr({pos:pos.x '-' pos.y}).css({kiri:pos.x,atas:pos.y}); ini.tipC .toFront() .show(); }lain{ var move = function(t,b,c,d){ kembalikan c*(t/=d)*t b; }, t = 0, b = self.tipC.attr('pos').split('-'), c = [pos.x,pos.y], d = 5; this.timer = setInterval(function(){ jika(t t ; var x = bergerak(t,~~b[0],(~~c[0])-(~~b[0]),d), y = bergerak(t,~~b[1],(~~c[1])-(~~b[1]),d); mempunyaiSVG ? self.tipC.attr({transform:'translate(' x ',' y ')',pos:x '-' y}) : self.tipC.attr({pos:x '-' y}).css({kiri:x,atas:y}); }lain{ clearTimeout(self.timer); } },1); }; }, hideTooltip: function(){ this.tipC.hide(); }, drawLegend : function(type,redraw){ var self = ini, opts = this.opts, isLine = opts.charts.type === 'line', //颜色块的大小 t_width = 20, t_tinggi = 20, //块之间的距离 t_space = 5, datas = opts.chartData, len = datas.length, css = opts.legend.style, //最大长度 如果是纵着的 需要最大的长度 maxWidth = 10, maxHeight= 30, //这个东西的位置 orig_pos = opts.legend.pos?opts.legend.pos:[2,2], //显示隐藏组的函数 pemegang = fungsi(i){ var g = self.mainGroup['carta' i], issegment = opts.charts.type==='segmen'; if(g.show){ g.chart.hide(); g.show = palsu; mempunyaiSVG ? this.attr({isi:'#ccc'}) : this[0].style.color = '#ccc'; //如果是分段图 是会涉及到重画的 jika(issegment){ self.hideList[i] =''; var mainGroup = self.mainGroup; for(nama var dalam MainGroup){ var parent = mainGroup[name].carta, nod = induk[0].childNodes, len = nod.length; //销毁图上面画的东西 untuk(var i = len-1;i>=0;i--){ vector.prototype.destroy.call(nod[i]) } } //重画 self.drawSegment(); } }lain{ g.chart.show(); g.show = benar; mempunyaiSVG ? this.attr({isi:'#000'}) : ini[0].style.color = '#000' jika(issegment){ padamkan self.hideList[i]; var mainGroup = self.mainGroup; for(nama var dalam MainGroup){ var parent = mainGroup[name].carta, nod = induk[0].childNodes, len = nod.length; untuk(var i = len-1;i>=0;i--){ vector.prototype.destroy.call(nod[i]) } } self.drawSegment(); } } }, arr = []; jenis = jenis ||'sisi'; var legendPanel = self.group('Legend') .appendTo(); if(type==='lateral'){ //如果是横着的 var atas = orig_pos[1] 5, ke = mempunyaiSVG?0:3, kiri = orig_pos[0] 5; setiap satu(data, fungsi(i,d){ kiri = i ===0 ? kiri : t_space left; //计算所有 left的位置 //如果是线性图 按线性图的方式画图 if(isLine){ self.baseDraw.path(self,{ sempadan : 1.5, Warna sempadan : d.warna, isfill : palsu, laluan : [ M, left.toFixed(0), (10 teratas).kepadaTetap(0), L, (kiri 25).kepadaTetap(0), (10 teratas).kepadaTetap(0) ] }) .appendTo(legendPanel); self.baseDraw[d.dotType || 'bulatan'](diri sendiri,{ x : kiri 12, y : 10 teratas, r : 4, isiWarna : d.warna }) .appendTo(legendPanel); }lain{ self.baseDraw.rect(self,{ arka : 0.1, isi : d.warna, sempadan : 1, Warna sempadan : d.warna, kiri : kiri, atas : atas, lebar : t_width 'px', ketinggian : t_tinggi 'px' }) .appendTo(legendPanel) } kiri = kiri t_lebar 2 t_space; var w = calTextLen(d.name,css).w self.baseDraw.span(self,{ 'text-anchor':'left', x : kiri, y : ke atas }) .css(lanjutkan(css,{kursor:'penunjuk'})) .on('klik',function(){ handle.call(this,i); }) .addText(d.name) .appendTo(legendPanel); kiri = kiri w; }); this.baseDraw.rect(this,{ arka : 0.1, isi : 'tiada', sempadan : 1.5, Warna sempadan : '#666666', lebar : t_space kiri- orig_pos[0], ketinggian : maxKetinggian, kiri : orig_pos[0], atas : orig_pos[1] }) .appendTo(legendPanel); }lain{ var atas = orig_pos[1] 5, ke = mempunyaiSVG?0:3, kiri = orig_pos[0] 5; setiap (data, fungsi(i,d){ atas = i ===0 ? atas : t_space atas; self.baseDraw.rect(self,{ arka : 0.1, isi : d.warna, sempadan : 1, Warna sempadan : d.warna, kiri : kiri, atas : atas, lebar : t_width 'px', ketinggian : t_tinggi 'px' }) .appendTo(legendPanel); var h = calTextLen(d.name,css).h; self.baseDraw.span(self,{ 'text-anchor':'left', x : t_width kiri 2 t_space, y : ke atas }) .css(lanjutkan(css,{kursor:'penunjuk'})) .addText(d.name) .on('klik',function(){ //如果是多层饼图 不行进隐藏 if(opts.charts.type==='pies')return; handle.call(ini,i); }) .appendTo(legendPanel); atas = atas h t_space; maxWidth = Math.max(maxWidth,calTextLen(d.name,css).w); }); this.baseDraw.rect(this,{ &