JavaScript menggunakan smileChart untuk melaksanakan kemahiran charts

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,{ &

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

JavaScript menggunakan smileChart untuk melaksanakan kemahiran charts_javascript yang mudah