javascript smipleChart simple icon class_javascript skills-JS Tutorial-php.cn

Because the editor will damage the code, an online demo is provided http://demo.jb51.net/chengxu/smipleChart.htm

Copy code The code is as follows: smipleChart

.cc{ height:450px; width:800px; border:1px solid #999; position:relative; margin:20px; }

(function(doc,undefined){ var win = this, hasSVG = win.SVGAngle || doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1"), isIE = /msie/i.test(navigator.userAgent) && !win.opera, path = hasSVG?'d':'path', seal = hasSVG?'z':'e', math = Math, 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';

win.$ = function(Id){ return document.getElementById(Id); };

win.extend = function(){ var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, options; if ( typeof target === "boolean" ) { deep = target; target = arguments[1] || {}; i = 2; } if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]") target = {}; for(;i if ( (options = arguments[ i ]) != null ) for(var name in options){ var src = target[ name ], copy = options[ name ]; if ( target === copy ) continue; if ( deep && copy && typeof copy === "object" && !copy.nodeType ){ target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy ); } else if(copy !== undefined) target[ name ] = copy; }

} return target; };

win.each = function ( object, callback, args ) { var name, i = 0, length = object.length; if ( args ) { args = Array.prototype.slice.call(arguments).slice(2); if ( length === undefined ) { for ( name in object ) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) break; } else for ( ; i if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // break; } else { if ( length === undefined ) { for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; } else for ( var value = object[0]; i } return object; }; //--------------------------------------------------------------- function processPoint( x ){ return isIE ? ~~x.toFixed(0) : ~~x.toFixed(0) 0.5; }; function calTextLen(txt, cssStr){ var span = doc.createElement('span'); if(cssStr){ typeof cssStr === 'string' ? span.style.cssText = cssStr : extend(span.style,cssStr); }else{ extend(span.style,{ fontSiz : '12px', fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif' }); } span.innerHTML = txt || ''; span.style.visibility = 'hidden'; doc.body.appendChild(span); var width = span.offsetWidth, height = span.offsetHeight; doc.body.removeChild(span); return {w:width,h:height}; }; function angle(r,center,o,jingdu){ var hudu = Math.PI*2*(o/360), x = center[0] r*Math.sin(hudu), y = center[1] -r*Math.cos(hudu); return [x.toFixed(jingdu||0),y.toFixed(jingdu||0)]; }

function xx(a,b,lineNum){

var t = 10000; var 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 while( stf c = c*10; arr[0]=arr[0]/c; } each([1,2,2.5,5,10],function(i,o){ arr[i]= o/c; }); }else if(stf>arr[4]){ while( stf>arr[4] ){ c = c*10; arr[4] = arr[4]*c; } each([1,2,2.5,5,10],function(i,o){ arr[i]= o*c; }); }

//上面找到间隔后 找到间隔中最接近的一个 each(arr,function(i,o){ if(stf v = o; return false; } }); //a 是最小的 //b是最大 的 a = (a*t-mathAbs((a%v)*t))/t; b = (b*t (b%v===0?0:(v-b%v))*t)/t;

//看看还剩几条线没有画

var num = Math.max(0,lineNum - Math.round((b-a)/v));

if(a>=0){ //让图比较靠中间 /*while(num!==0){ num%2===0 ? a = (a*t-v*t)/t : b = (b*t v*t)/t; num--; }*/

//坐标比较整数化 if(a!=0&&num!=0){ while(a!=0&&num!=0){ a = (a*t-v*t)/t; num--; if((a*t-v*num*t)/10000>0&&a===0) break; } }

if(num!=0){ while(num!==0){ b = (b*t v*t)/t num--; } }

}else{ //让图比较靠中间 /*while(num!==0){ num%2===0 ? b = (b*t v*t)/t : a = (a*t-v*t)/t num--; }*/ //坐标比较整数化 if(b while(b!=0&&num!=0){ b = (b*t v*t)/t; num--; if((b*t v*num*t)/t break; } } if(num!=0){ while(num!==0){ a = (a*t-v*t)/t num--; } }

} return {min:a,max:b,stf:v}; } //--------------------------------------------------------------------------------------------------------------- //对svg vml元素的一些创建 修改属性 样式 删除 == 一些的操作 win.vector = function(){}; win.vector.prototype = { $c : function(graphic,nodeName){ this.element = this[0] = doc.createElementNS('http://www.w3.org/2000/svg', nodeName); this.graphic = graphic; return this; }, attr: function(hash,val){ var elem = this.element, key, value; if(typeof hash === 'string'){ if(val === undefined){ return elem.getAttribute(hash); }else{ elem.setAttribute(hash, val); return this; } } else { for(key in hash){ value = hash[key]; if(key === path){ value && value.join &&(value = value.join(' '));

/(NaN| |^$)/.test(value) &&(value = 'M 0 0'); } elem.setAttribute(key, value) } } return this; }, css: function(hash){ var str = ''; for(var key in hash){ if(isIE && key == "opacity"){ this.element.style['filter'] = "alpha(opacity=" hash[key] * 100 ")"; }else{ this.element.style[key] = hash[key]; } } return this; }, on: function(eventName, handler){ var self = this; this.element.addEventListener(eventName,function(){ handler.call(self) },false); return this; }, appendTo: function(parent){ if(parent){ parent.element ? parent.element.appendChild(this.element) : parent.appendChild(this.element)

} else { this.graphic.container.appendChild(this.element); } return this; }, addText: function(str){ var elem = this.element; if(elem.nodeName === 'text'){ elem.appendChild(doc.createTextNode(str.toString() || ' ')); } return this; }, setOpacity : function(v){ this.attr('fill-opacity',v) }, toFront: function() { this.element.parentNode.appendChild(this.element) return this; }, show: function(){ this.element.style.display = 'block'; return this; }, hide: function(){ this.element.style.display = 'none'; return this; } }; //---------------------------------------------------------------------------------------------------------------

//--------------------------------------------------------------------------------------------------- //如果是vml修改其中的一些方法 if(!hasSVG){ //-------------创建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");

//-------------修改一些方法----------------- extend(vector.prototype,{ $c : function(graphic,nodeName){ var name = nodeName || 'shape'; this.element= this[0] = (name === 'div' || name === 'span') ? doc.createElement(name) : doc.createElement(' '); this.graphic = graphic; return this; }, on : function(eventName, handler){ var self = this; this.element.attachEvent("on" eventName,function(){ handler.call(self); }); return this; }, addText : function(txt){ var elem = this.element; elem.innerHTML = txt || ''; return this; }, setOpacity : function(v){ this.opacity.opacity=v; } }); } //---------------------------------------------------------------------------------------------------

//画图类 //------------------------------------------------------------ win.smipleChart = function(){ this.init.apply(this,arguments); }; smipleChart.prototype = { options : { charts : { paddingRight : 20, radius : 200, style : { fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', fontSize : '12px', background : '#FFFFFF' } }, title : { text : '', y : 10, style : { fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'16px', fontWeight:'bold' } }, subTitle : { text : '', y : 30, style : { fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'12px', color: '#111' } }, yUnit : { text : '', style : { fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'12px', color: '#111' }, lineNum :10 } }, init : function(container,options,width,height){ this.width = width || container.offsetWidth; this.height = height || container.offsetHeight; this.mainGroup = {};

//svg There must be an svg tag in the drawing. vml uses div this.container = hasSVG ? new vector().$c(1,'svg') .attr({ xmlns : 'http://www.w3.org/2000/svg', version : '1.1' }) .css({fontSize : '12px '}) .appendTo(container).element : new vector().$c(1,'div') .css({ fontSize : '12px', width : this.width 'px', height : this.height 'px' }) .appendTo(container).element; var c = extend(true,{},this .options) var opts = this.opts = extend(true,c,options), style = extend(opts.charts.style,{ width : this.width, height : this.height });

//Calculate some parameters needed when drawing the plate this.getDrawArea() .createTooltip() //Create Prompt message frame .drawTitle() //Draw title //Draw plate

if('line,area,pie'.indexOf(opts.charts.type)>=0 ){ opts.charts.panel = 'x'; }

if(' pie,pies'.indexOf(opts.charts.type) this .drawPanel(); }

this.drawLegend(opts.legend.type); //Draw color block bar

var type = { line : 'drawLine' , area : 'drawArea', columns : 'drawColumns', pie : 'drawPie', pies : 'drawPies', segment : 'drawSegment' }[ opts.charts.type]; this[type]();

}, createElement : function(nodeName){ return new vector().$c(this,nodeName ); }, group: function(name){ return this.createElement(isIE?'div':'g').attr('mark',name); }, getDrawArea : function(){ var opts = this.opts, width = this.width, height = this.height, title = opts.title, subTitle = opts.subTitle, area = { // Remove the scale text width on the left side of the coordinate axis (estimated) 80 is the fixed value, leaving only 80 spacing on the left side areaWidth : width - 80, // Remove the height of the text and markings under the coordinate axis areaHeight : height - 40, //The X position of the origin will be calculated below startX : 0, //The Y of the origin The position will be calculated below startY: 0, //When drawing a pie chart, you need to know the position of the center of the circle. centerX: 0, //The y coordinate of the center to draw a pie chart. When you need to know the position of the center of the circle centerY: 0 };

//If the main title exists, subtract the height of the main title, otherwise subtract 10 from the height area.areaHeight -= (title.text !== '') ? title.y : 10;

// Remove subtitle height area.areaHeight -=(subTitle.text !== ' ') ? subTitle.y : 10

area.startX = 80; area.startY = height - 40;

//The position of the center of the circle area.centerX = width / 2; area.centerY = height / 2;

//Leave some space on the right area.areaWidth -=20; //Also leave some space on the top Some spacing area.areaHeight -=15;

opts.area = area;

return this;

}, drawTitle : function(){ var opts = this.opts, self = this, arr = [opts.title,opts.subTitle,opts.yUnit], //Basic parameters for the position of the three title coordinates config = [ { x : this.width / 2, y : opts.title.y }, { x : this.width / 2 , y : opts.subTitle.y }, { x : opts.yUnit.x, y : this.height / 2 - 20 } ], tpanel = this.group('title') .appendTo();

each(arr,function(i,title){ var text = title.text; if(text){ var elem = self.baseDraw('span',{ 'text-anchor':'left', x : mathMax(config[i].x - calTextLen(text,title.style).w/2,10), y : config[i].y },calTextLen(title.text,title.style).h) .css (title.style) .addText(text) .appendTo(tpanel);

//If it is 2, it means it is a subtitle. Turn it vertically if(i= ==2){ hasSVG ? elem.attr({transform : 'rotate(270, ' (opts.yUnit.x 10) ', ' self.height / 2 ')'}) : (elem.element.style.filter ='progid:DXImageTransform.Microsoft.BasicImage(rotation=3)') }

} }); return this; },

//It’s more troublesome to draw a plate drawPanel: function(type){ var opts = this.opts, self = this, area = opts.area, isSegment= opts.charts.type==='segment', //The type of plate is horizontal or vertical type = opts.charts.panel || 'x ';

// Bottom plate var drawAreaWidth = area.areaWidth, drawAreaHeight = area.areaHeight, //Coordinates of the origin startX = area.startX, startY = area.startY;

var allData = [], minValue = 0, maxValue = 10, lineNum = mathMax(opts.yUnit.lineNum,2), min = opts.yUnit.min, staff;

//Combine all data each(opts.chartData,function(i,o){ isSegment ? each(o.data,function(j,d){ allData[j] ? allData[j] = allData[j] (~~d) : allData[j] = ~~d ; }) : allData = allData.concat(o.data) });

//Sort all data in order to find the maximum and minimum values below allData .sort(function(a,b){return a-b});

//Find the maximum and minimum values maxValue = allData[allData.length - 1];

each (allData,function(i,o){ if(o){ minValue = o; return false; } });

//Main plate container this.panel = this.group('panel').appendTo();

var dd = xx(minValue,maxValue , lineNum), min = dd.min, max = dd.max, f = dd.stf;

//Indicates that the abscissa is drawn if( type.toLowerCase()==='x'){ //Abscissa unit interval var xPices = drawAreaWidth / opts.xUnit.units.length, //Center point of unit interval offset = xPices / 2,

yPices = drawAreaHeight / lineNum;

//----------------------------- ------------Draw horizontal dots and text-------------------------------- -------------------------- each(opts.xUnit.units,function(i,d){ self.baseDraw( 'path',{ border : 1, borderColor : '#C0C0C0', isfill : false, path : [ M, processPoint(startX (i * xPices )), processPoint(startY), L, processPoint(startX (i*xPices)), processPoint(startY 5) ] }). appendTo(self.panel); var y = hasSVG?5:10, span = self.baseDraw('span',{ x : startX offset (i * xPices), y : startY y, 'text-anchor':'middle' }) .css({ fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize: '12px' }) .addText(opts.xUnit.units[i]) .appendTo(self.panel) .element;

//vml has no x y So to simplify the concept, half of the span width needs to be reduced when using span later. !hasSVG span.style.left = parseInt(span.style.left) - span.offsetWidth/2 'px';

}); //--------------------------------Draw vertical dots and text -------------------------------------------------- --------------------- for(i=0;i self.baseDraw('path',{ border : 1, borderColor : '#C0C0C0', isfill : false, path : [M, startX, processPoint(startY - (i * yPices)), L, processPoint(startX drawAreaWidth), processPoint(startY - (i *yPices))] }) .css({zIndex:-10}) .appendTo(self.panel);

var span = self.baseDraw('span',{ x : startX - 15, y : startY - i * yPices-calTextLen(min i*f '').h/2, 'text -anchor':'middle' }) .css({ 'font-family':'Verdana,Arial,Helvetica,sans-serif', 'font-size':' 12px', width: '40px', display:'block', textAlign:'right' }) .addText((min*1000 (i*1000*f /1000)*1000)/1000 '') .appendTo(self.panel) .element;

if(!hasSVG){ span.style.top = parseInt( span.style.top) span.offsetHeight/2 -5 'px'; span.style.left = parseInt(span.style.left) -35 'px' } }

}else{ //Abscissa unit interval var yPices = drawAreaHeight / (opts.xUnit.units.length), //The center point of the unit interval offset = Math. round(yPices / 2);

var x = hasSVG?25:70, vv = hasSVG?0:5;

each(opts.xUnit .units,function(i,d){

self.baseDraw('path',{ border : 1, borderColor : '#C0C0C0', isfill : false, path : [ M, processPoint(startX-5), processPoint(startY-i * yPices), L, processPoint(startX), processPoint( startY-i * yPices), ] }) .appendTo(self.panel); var span = self.baseDraw('span',{ x : startX - x , y : startY -i * yPices-offset-calTextLen(d).h/2 vv, 'text-anchor':'middle' }) .css({ fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'12px', width : '60px', textAlign:'right' }) . addText(d) .appendTo(self.panel)

});

var xPices = drawAreaWidth / lineNum;

for(var i= 0;i self.baseDraw('path',{ border : 1, borderColor : '#C0C0C0', isfill : false, path : [ M, processPoint(startX (i * xPices)), processPoint(startY), L, processPoint(startX (i*xPices)), processPoint (startY - drawAreaHeight) ] }). appendTo(self.panel);

var span = self.baseDraw('span',{ x : startX - calTextLen(min i*f '').w/2 i * xPices, y : startY, 'text-anchor':'left' }) .css({ fontFamily:'Verdana,Arial,Helvetica,sans-serif', fontSize:'12px' }) .addText(min i*f '') .appendTo(self.panel ) .element; }

}

//--------------------- -------------------------------------------------- -------------------------- //When drawing the area map, you also need the starting point //Because The coordinates are likely to be negative and may not start from 0, so jianju var jianju =0 if(min>0)jianju = min; if(max //Calculate the starting position startX = opts.charts.panel==='x' ? startX :startX-xPices*(min/f); startY = opts.charts.panel=== 'x' ? startY yPices*(min/f) : startY;

opts.draw = { startX : startX, // Starting point of X axis startY : startY , // Starting point of Y axis xPices : xPices, // The width of each part of the X axis yPices : yPices, // The width of each part of the Y axis offset : offset, // The offset of the X single center point position jianju : jianju*yPices/f, feed : f // How many copies are there on the Y axis }; return this; },

createTooltip: function(){ //A group this.tipC = this.group('tip') .css({zIndex: 200,height:'20px ',width:'20px',position:'absolute'}) .appendTo() .hide()

//Draw a box baseDraw this.tipBox = this. baseDraw('rect',{arc:0.22,fill:'#fff',border:2,borderColor:'#606060'}) .appendTo(this.tipC)

//Because svg The g inside can be positioned directly, but the group rendering in vml is very slow, so I changed the div. So the parent here is different var p = isIE ?this.tipBox :this.tipC;

this.tipTxtContainer = this.baseDraw('text',{fill:'#000000',x:5,y:19,'text-anchor':'left'}) .css({ fontFamily:'Verdana, Arial,Helvetica,sans-serif', fontSize:'12px', background: '#FFF' }) .appendTo(p);

this.tipText = doc.createTextNode(''); this.tipTxtContainer[0].appendChild(this.tipText); return this; }, showTooltip : function(obj, x, y, data){ var txt =obj.name ((' : ' data)||''), size = calTextLen(txt,this.tipTxtContainer[0].style.cssText), pos = {x : x - (size.w 5 * 2)/2 ,y : y - 32}; this.tipC .toFront() .show();

if(hasSVG){ this.tipC.attr({transform:'translate(' pos.x ',' pos.y ')'});

this.tipBox . attr({width : size.w 5 * 2,height : size.h 5 * 2,stroke : obj.color||'#606060'}); }else{ this.tipC.css( {left:pos.x,top:pos.y});

this.tipBox .css({width:size.w 5 * 2,height : size.h 5 * 2}) this.tipBox[0].strokeColor = obj.color||'#606060'; }

this.tipText.nodeValue = txt || ''; }, hideTooltip: function(){ this.tipC.hide(); },

drawLegend : function(type,redraw){ var self = this, opts = this.opts, //The size of the color block t_width = 20, t_height = 20, //The distance between the blocks t_space = 5, datas = opts.chartData, len = datas.length, css = opts.legend.style,

//Maximum length If it is vertical, the maximum length is required maxWidth = 10 , maxHeight = 30, //The position of this thing orig_pos = opts.legend.pos?opts.legend.pos:[2,2],

//Show and hide Group function handle = function(i){ var g = self.mainGroup['chart' i]; if(g.show){ g.chart.hide(); g.show = false; hasSVG ? this.attr({fill:'#ccc'}) : this[0].style.color = '#ccc' }else{ g.chart.show(); g.show = true; hasSVG ? this.attr({fill:'#000'}) : this[ 0].style.color = '#000' } },

arr = [];

type = type ||'lateral'; var legendPanel = self.group('Legend') .appendTo(); if(type===='lateral'){ //If it is horizontal var top = orig_pos[1 ] 5, th = hasSVG?0:3, left = orig_pos[0] 5; each(datas, function(i,d){ left = i===0 ? left : t_space left; //Calculate the positions of all lefts self.baseDraw('rect',{ arc : 0.1, fill : d.color, border : 1, borderColor : d.color, left : left, top : top, width : t_width 'px', height : t_height 'px' }) .appendTo(legendPanel); left = left t_width 2 t_space; var w = calTextLen(d.name,css).w self.baseDraw('span',{ 'text- anchor':'left', x : left, y : top th }) .css(extend(css,{cursor:'pointer'})) .on ('click',function(){ if(opts.charts.type==='pies')return; handle.call(this,i); }) .addText (d.name) .appendTo(legendPanel); left = left w;

}); this.baseDraw('rect',{ arc : 0.1, fill : 'none', border : 1.5, borderColor : '#666666', width : left t_space- orig_pos[0], height : maxHeight, left : orig_pos[0], top : orig_pos[1] }) .appendTo(legendPanel); }else{

var top = orig_pos[1] 5, th = hasSVG?0:3, left = orig_pos[0] 5; each(datas, function(i,d){ top = i===0 ? top : t_space top; self.baseDraw('rect',{ arc : 0.1, fill : d.color, border : 1, borderColor : d.color, left : left, top : top, width : t_width 'px', height : t_height 'px' }) .appendTo(legendPanel);

var h = calTextLen(d.name,css).h;

self.baseDraw('span',{ 'text-anchor':'left', x : left t_width 2 t_space , y : top th }) .css(extend(css,{cursor:'pointer'})) .addText(d.name) .on('click ',function(){ if(opts.charts.type==='pies')return; handle.call(this,i); }) .appendTo(legendPanel) ; top = top h t_space; maxWidth = Math.max(maxWidth,calTextLen(d.name,css).w); }); this.baseDraw('rect', { arc : 0.1, fill : 'none', border : 1.5, borderColor : '#666666', width : maxWidth 22 15, height : top t_space -orig_pos[1], left : orig_pos[0], top : orig_pos[1] }) .appendTo(legendPanel); } return this; }, drawLine : function(){ var self = this, opts = this.opts; draw = opts.draw; each(opts.chartData,function(i,o ){ var id = 'chart' i, lineGroup = self.group(id) .appendTo(); self.mainGroup[id]={chart:lineGroup,show:true }; var path = [M], data = o.data, line;

for(var i = 0; i if( data[i] == null){ //If this data does not exist and is not the first data path, add M if(path[path.length - 1] !== M ) path.push(M); }else{ //If it is not the first data path, add L i !== 0 && path.push("L"); //If the previous one is null and it is not the first one, remove the L if(i > 0 && data[i - 1] == null) path.pop(); //Calculate the x, y position of the point var x = draw.startX draw.offset (i * draw.xPices), y = draw.startY - (data[i] * (draw.yPices) / draw.feed)); if(isIE){ x = parseInt(x); y = parseInt(y); } path.push(x); path.push(y); //Draw points self.baseDraw('circle',{ x : x, y : y, r : 4, fillColor : o.color }) .attr({data:data[i]}) .css({zIndex:10,cursor:'pointer'}) .on ('mouseover',(function(o,x,y){ return function(){ hasSVG ? (this[0].setAttribute('r','5'),line. attr({'stroke-width':2.5})) : (this[0].strokeWeight = 3,line[0].strokeWeight = 2.5); self.showTooltip(o,x,y, this.attr('data')); }

})(o,x,y)) .on('mouseout',function(){ hasSVG ? (this[0].setAttribute('r','4'),line.attr({'stroke-width':1.5})) : (this[0].strokeWeight = 1,line[ 0].strokeWeight = 1.5); self.hideTooltip() }) .on('click',function(){lineGroup.toFront(); }) .appendTo(lineGroup );

} }; //Draw a polyline line = self.baseDraw('path',{ border : 1.5, borderColor : o.color , isfill : false, path : path }) .css({zIndex:5}) .on('mouseover',function(){ hasSVG ? this.attr({'stroke-width':2.5}) : (this[0].strokeWeight = 2.5); }) .on('mouseout',function() { hasSVG ? this.attr({'stroke-width':1.5}) : (this[0].strokeWeight = 1.5); }) .on(' click',function(){lineGroup.toFront(); }) .appendTo(lineGroup); }); return this; }, drawArea : function(){ var self = this, opts = this.opts, draw = opts.draw; each(opts.chartData,function(i,o){ var id = 'chart ' i, areaGroup = self.group(id).appendTo(); self.mainGroup[id] = {chart: areaGroup,show: true}; //There are 2 paths and one is The path of the area is the path of the line

var areaPath = [M, (draw.startX draw.offset).toFixed(0), (draw.startY-draw.jianju).toFixed(0)], path = [M], data = o.data, line; for(var n=0,l=data.length;n / /If the data is empty var len = areaPath.length; if( data[n] === null){ //If the previous one is not m, redraw it so add M if(path[path.length - 1] !== M) path.push(M);

//If the first or previous one is bull, modify the starting point coordinates len===3 &&(areaPath[1] = (draw.startX (n 1)*draw.xPices draw.offset).toFixed(0));

//If the previous It is not the end identifier of the area map. If the first data is null, the following operation will not be performed if(areaPath[len - 1] !== seal&&n!==0){ areaPath=areaPath.concat( [ areaPath[len - 2], (draw.startY-draw.jianju).toFixed(0), seal ]); } }else{ n !== 0 && path.push(L); areaPath.push(L); //If the previous data is null, remove the previous L if(n &gt ; 0 && data[n - 1] == null){ path.pop(); //If it is the first one, it is null and L is not deleted. n!==1&&areaPath.pop() ; }

var x = draw.startX draw.offset (n * draw.xPices), y = draw.startY - ((data[n]) * (draw.yPices / draw.feed)); if(isIE){ x = parseInt(x); y = parseInt(y); } path.push(x); path.push(y);

if(areaPath[len - 1] === seal){ areaPath = areaPath.concat([ M, x , parseInt(draw.startY-draw.jianju), L, x, y ]); }else{ areaPath.push(x) ; areaPath.push(y); }

//If it is the last point if(n === l - 1){

areaPath. push(x);

areaPath.push(parseInt(draw.startY-draw.jianju)); }

//Draw points self.baseDraw('circle ',{ x : x, y : y, r : 4, fillColor : o.color }) .attr({data:data[n] }) .on('mouseover',(function(o,x,y){ return function(){ hasSVG ? (this[0].setAttribute('r', '5'),line.attr({'stroke-width':2.5})) : (this[0].strokeWeight = 3,line[0].strokeWeight = 2.5); self.showTooltip (o,x,y,this.attr('data')); }

})(o,x,y)) .on('mouseout',function() { hasSVG ? (this[0].setAttribute('r','4'),line.attr({'stroke-width':1.5})) : (this[0] .strokeWeight = 1,line[0].strokeWeight = 1.5); self.hideTooltip() }) .on('click',function(){areaGroup.toFront(); }) .css({zIndex:10,cursor:'pointer'}) .appendTo(areaGroup);

} }

areaPath.push(seal)

self.baseDraw('path',{ border : 0, isfill : true, fillColor : o.color, opacity : 0.5, path : areaPath }) .css({zIndex:5}) .appendTo(areaGroup);

line = self.baseDraw('path',{ border : 2.5, borderColor : o.color, isfill : false, path : path }) .on('mouseover',function(){ hasSVG ? this.attr({'stroke-width':2.5}) : (this[0].strokeWeight = 2.5); }) .on('mouseout',function(){ hasSVG ? this.attr({'stroke-width':1.5}) : (this[0].strokeWeight = 1.5); }) .on('click',function(){areaGroup.toFront(); }) .css({zIndex:-1}) .appendTo(areaGroup); }); return this; }, drawColumns : function(){ var self = this, opts = this.opts, draw = opts.draw, chartData = opts.chartData, dataLen = chartData.length, //多个柱子之间的间距 columnSpace = 3, //一个位置中 所有的间隔之和 columnPadding = columnSpace * dataLen columnSpace, //每个柱子的宽度 columnSize = self.opts.charts.panel==='x' ? Number(((draw.xPices - columnPadding) / dataLen).toFixed(0)) : Number(((draw.yPices - columnPadding) / dataLen).toFixed(0));

each(chartData, function(i,o){ var data = o.data, id = 'chart' i, isX = opts.charts.panel==='x', colGroup = self.group(id).appendTo(), //每个点开始的位置 start = self.opts.charts.panel==='x' ? draw.startX columnSpace i*(columnSize columnSpace) : draw.startY columnSpace i*(columnSize columnSpace)

self.mainGroup[id] = {chart:colGroup,show:true};

for(var j = 0,l=data.length; j if(data[j]===null) continue; //如果是横盘子 if(isX){ var x = Number((start j *draw.xPices ).toFixed(0)), y = Number((draw.startY).toFixed(0)), height = Number((data[j] * (draw.yPices / draw.feed)).toFixed(0)), path = [ M, x, y, L, x, y -height, L, x columnSize, y - height, L, x columnSize, y, seal ]; var pos = [x columnSize/2,data[j]>0?y-height:draw.startY]; }else{

var x = Number((draw.startX).toFixed(0)), width = Number((data[j]*((draw.xPices / draw.feed))).toFixed(0)), y = Number((start - (j 1) *draw.yPices ).toFixed(0)), path = [ M, x, y, L, x width, y , L, x width, y columnSize, L, x , y columnSize, seal ]; var pos = [draw.startX width/2,y-columnSize]; }

self.baseDraw('path',{ border : 0, isfill : true, fillColor : o.color, opacity : 1, path : path }) .attr({data:data[j]}) .css({zIndex:5,cursor:'pointer'}) .on('mouseover',(function(x,y,d){

return function(){

this.setOpacity(0.85);

self.showTooltip(o,x,y,this.attr('data')); }

})(pos[0],pos[1],data[j])

) .on('mouseout',(function(x,y){ return function(){ this.setOpacity(1); self.hideTooltip(); } })(x,y)) .appendTo(colGroup);

} }); return this; }, drawPie : function(){ var self = this, opts = this.opts, area = opts.area, rx = area.centerX, ry = area.centerY, inc = 0, total = 0, data = [], cumulative = -0.25, // start at top; circ = 2 * Math.PI, radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2)), fraction, half_fraction;

each(opts.chartData,function(i,o){ typeof o.data ==='object' ? (data.push((function(o){ var all =0; for(var i in o) all =~~o[i] return all })(o.data))) :data.push(mathAbs(o.data))

});

each(data,function(i,o){ total = total o; });

each(data,function(i,o){ var pieGroup = self.group('chart' i).appendTo(), s = inc/total*360, e = (inc o)/total*360, name = opts.chartData[i].name, size = calTextLen(name), dot = angle(radiu,[rx,ry],s (e-s)/2,2), x = rx (dot[0]-rx)/2 - size.w/2, y = ry (dot[1]-ry)/2 - size.h/2, len = Math.sqrt((x-rx)*(x-rx) (y-ry)*(y-ry)), moveDisplacement = ((x-rx)*8/len) ',' ((y-ry)*8/len);

inc = inc o;

var value = Number(o); fraction = total ? value / total : 0; half_fraction = total ? (value / 2) / total : 0;

var start = cumulative * circ; half_cumulative = cumulative half_fraction; cumulative = fraction;

var end = cumulative * circ;

self.baseDraw('pie',{ config : opts.chartData[i], s : start, e : end, r : radiu, innerR : 0 }) .css({zIndex:5,cursor:'pointer'}) .attr({move:moveDisplacement}) .on('mouseover',function(){ this.setOpacity(0.85); }) .on('mouseout',function(){ this.setOpacity(1); }) .on('click',function(){ var m = this.attr('move') if(m.indexOf(' ')>0){ hasSVG ? this.attr({ transform: 'translate(0,0)' }) : this.css({ left : '0px', top : '0px' }) this.attr({move:m.replace(' ','')});

}else{ var s= m.split(','); hasSVG ? this.attr({ transform: 'translate(' m ')' }) : this.css({ left : s[0] 'px', top : s[1] 'px' })

this.attr({move:m ' '}); } }) .appendTo(pieGroup);

self.mainGroup['chart' i] = {chart:pieGroup,show:true};

self.baseDraw('span',{ x : x, y : y, fill : '#fff', 'text-anchor':'left' }) .css({ fontFamily : 'Verdana,Arial,Helvetica,sans-serif', fontSize : '12px', position : 'absolute', color : '#fff', zIndex : 10 }) .addText(name) .appendTo(pieGroup); });

}, drawPies : function(){

var self = this, opts = this.opts, area = opts.area, rx = area.centerX, ry = area.centerY, total = 0, data = [], chartData = opts.chartData, cumulative = -0.25, // start at top; circ = 2 * Math.PI, radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2)), fraction, half_cumulative, half_fraction;

each(chartData,function(i,o){ each(o.data,function(j,d){ data[j] ? data[j] =mathAbs(d) : data[j] =mathAbs(d) });

}); //看有多少个数据来生成来生成内半径 var len = data.length, innerSpace = radiu / 10; Rpice = (radiu - innerSpace) / len, piesGroup = this.group('pies').appendTo();

each(data,function(i,d){ var inc = 0 ; if(d===0) return; each(chartData,function(j,o){ if(~~o.data[i]===0)return; var outR = radiu - Rpice * i, innerR = radiu - Rpice * (i 1), value = ~~o.data[i], fraction = value / d; half_fraction = (value/2)/d , start = cumulative * circ, s = inc/d*360, e = (inc value)/d*360;

inc = inc value; var name = o.name, size = calTextLen(name), dot = angle(radiu,[rx,ry],s (e-s)/2,2), px = dot[0]>rx?1:-1, py = dot[1]>ry?1:-1; var x = rx px*innerSpace ((dot[0]-rx-px*innerSpace)/len)*(len-i-1) ((dot[0]-rx-px*innerSpace)/len)/2- size.w/2, y = ry py*innerSpace ((dot[1]-ry-py*innerSpace)/len)*(len-i-1) ((dot[1]-ry-py*innerSpace)/len)/2- size.h/2;

half_cumulative = cumulative half_fraction, cumulative = fraction, end = cumulative * circ;

self.baseDraw('pie',{ config : o, s : start, e : end, r : outR, innerR : innerR }) .css({zIndex:5,cursor:'pointer'}) .on('mouseover',function(){ this.setOpacity(0.85); }) .on('mouseout',function(){ this.setOpacity(1); }) .appendTo(piesGroup); self.baseDraw('span',{ x : x, y : y, fill : '#fff', 'text-anchor':'left' }) .css({ fontFamily : 'Verdana,Arial,Helvetica,sans-serif', fontSize : '12px', position : 'absolute', color : '#fff', zIndex : 10 }) .addText(name) .appendTo(piesGroup);

}) });

}, drawSegment : function(){ var self = this, opts = this.opts, draw = opts.draw, chartData = opts.chartData, columnPad = 5, columnWidth = draw.xPices - columnPad * 2;

each(chartData,function(i,c){

}); }, baseDraw : function(type,config){ var self = this arg = arguments; return { rect : function(){ var set = {}; set.rx = set.ry = config.arc*30 || 5; set.width = config.width || 50; set.height = config.height || 50; set.fill = config.fill || '#fff'; set['fill-opacity'] = config.opacity || 0.85; set['stroke-width'] = config.border || 2; set.stroke = config.borderColor || '#606060'; set.transform = 'translate(' (config.left||0) ',' (config.top||0) ')'; return self.createElement('rect') .attr(set)

}, text : function(){ return self.createElement('text') .attr(config) }, span : function(){ var elem= self.createElement('text') .attr(config) .attr({ y : config.y (arg[2]||15) }) return elem; }, path : function(){ var set = {}; set['stroke-width'] = config.border; set.stroke = config.borderColor || '#C0C0C0'; set.fill = config.isfill?config.fillColor:'none'; set.d = config.path; config.opacity &&(set['fill-opacity'] = config.opacity);

return self.createElement('path') .attr(set); }, circle : function(){ var set = {}; set.cx = config.x; set.cy = config.y; set.r = config.r; set.fill = config.fillColor; return self.createElement('circle') .attr(set); }, pie : function(){ //config,s,e,r,index var opts = self.opts, s = config.s, r = config.r, e = config.e - 0.000001, id = 'chart' config.index, area = opts.area, rx = area.centerX, ry = area.centerY, cosStart = mathCos(s), sinStart = mathSin(s), cosEnd = mathCos(e), sinEnd = mathSin(e), color = config.config.color, innerR = config.innerR, longArc = e - s path = [ M, rx r * cosStart, ry r * sinStart, 'A', r, r, 0, longArc, 1, rx r * cosEnd, ry r * sinEnd, L, rx innerR * cosEnd, ry innerR * sinEnd, 'A', // arcTo innerR, // x radius innerR, // y radius 0, // slanting longArc, // long or short arc 0, // clockwise rx innerR * cosStart, ry innerR * sinStart, 'Z' ];

return self.baseDraw('path',{ border : 1, border : '#fff', isfill : true, fillColor : color, opacity : 1, path : path

})

} }[type](); } };

//--------------------------------------------------------------------------------------------------- //如果是vml 修改smipleChart.prototype中的一些方法 !hasSVG &&extend(smipleChart.prototype,{ baseDraw : function(type,config){ var self = this, width = this.width, height = this.height, name = arguments[2]; return { rect : function(){ var attr = {}, css = {}; attr.arcsize = config.arc || 0.2 ''; if(config.fill==='none'){ attr.filled = 'f' }else{ attr.filled = 't'; attr.fillcolor = config.fill || '#fff'; }

attr.strokeWeight = config.border || 2; attr.strokeColor = config.borderColor || '#606060'; css.width = config.width || 50 'px'; css.height = config.height || 50 'px'; css.zIndex = 10; css.left = config.left||0 'px'; css.top = config.top ||0 'px';

return self.createElement('roundrect') .attr(attr) .css(css) }, text : function(){ return self.createElement('TextBox') .attr({inset : "2px,2px,2px,2px" }) }, span : function(){ return self.createElement('span'). css({ position:'absolute', left : config.x 'px', top : config.y 'px' }) }, path : function(){ var attr = {}, css = { width : width 'px', height : height 'px' };

if(config.border===0){ attr.Stroked = 'f'; attr.strokeWeight =0; }else{ attr.strokeWeight = config.border||1 ; } attr.strokeColor = config.borderColor || "#C0C0C0"; attr.filled = config.isfill?'t':'f'; attr.filled==='t' &&(attr.fillcolor=config.fillColor||"#C0C0C0"); attr.coordsize = width ',' height; attr.path = config.path; var elem = self.createElement() .attr(attr) .css(css); if(config.opacity){ var fill = self.createElement('fill') .attr({ type : 'fill', color : config.fillColor||"#C0C0C0", opacity : config.opacity }) .appendTo(elem); //那这个对象的一个属性引用设置透明的元素 以后会用到 elem.opacity = fill[0]; } return elem;

}, circle : function(){ var attr ={ strokeWeight : 1, coordsize : width ',' height, filled : 't' }, css ={ width : width 'px', height : height 'px' } x = config.x, y = config.y, r = config.r; attr.strokeColor=attr.fillcolor = config.fillColor

attr.path =[ 'wa', // clockwisearcto x - r, // left y - r, // top x r, // right y r, // bottom x r, // start x y, // start y x r, // end x y, // end y 'e' // close ]; return self.createElement() .attr(attr) .css(css) }, pie : function(){ ////config,s,e,r,index

var opts = self.opts, area = opts.area, r = config.r, rx = area.centerX, ry = area.centerY, innerR= config.innerR||0, sDot = angle(r,[rx,ry],s,2), eDot = angle(r,[rx,ry],e,2), color = config.config.color, s = config.s, e = config.e, e = e - s == 2 * Math.PI ? e - 0.001 : e, cosStart = mathCos(s), sinStart = mathSin(s), cosEnd = mathCos(e), sinEnd = mathSin(e),

path = [ 'wa', // clockwisearcto (rx - r).toFixed(0), // left (ry - r).toFixed(0), // top (rx r).toFixed(0), // right (ry r).toFixed(0), // bottom (rx r * cosStart).toFixed(0), // start x (ry r * sinStart).toFixed(0), // start y (rx r * cosEnd).toFixed(0), // end x (ry r * sinEnd).toFixed(0), // end y

'at', // clockwisearcto (rx - innerR).toFixed(0), // left (ry - innerR).toFixed(0), // top (rx innerR).toFixed(0), // right (ry innerR).toFixed(0), // bottom (rx innerR * cosEnd).toFixed(0), // start x (ry innerR * sinEnd).toFixed(0), // start y (rx innerR * cosStart).toFixed(0), // end x (ry innerR * sinStart).toFixed(0), // end y

'x', // finish path 'e' // close ];

return self.baseDraw('path',{ border : 1, border : '#fff', isfill : true, fillColor : color, opacity : 1, path : path })

} }[type](); } });

//--------------------------------------------------------------------------------------------------- })(document);

window.onload = function(){ var config = { charts : { type : 'line', radius : 150, panel : 'x', style: { fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font fontSize: '12px' } }, title : { text : '线性图标' , y : 10, style : { color: 'black', fontSize: '16px' } }, subTitle : { text : '线性图标副标题', y : 35, style: { color: '#111', fontSize: '12px' } }, legend : { enable : true, //type : 'lateral', // lateral 横向 或 lengthwise 纵向 type : 'lateral', pos : [10,10], style:{ fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font fontSize: '12px', magin:'0px' } }, yUnit : { text : '线性图标侧标题', x : 20, style: { color : '#111', fontSize : '12px' } }, xUnit : { units: [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ] }, chartData : [ {

name : 'xcv', color : '#4572A7', data : [-18,45,-38,29,95,-45,77] }, {

name: 'frfr', color: '#AA4643', data: [-44,12,78,-100,13,4,-56,-34] }, { name: 'AAAAA', color: '#89A54E',

data: [null,78,83,null,22,-78,2,44,78] }, { name: 'BBBB', color: '#80699B', data: [null, 58, 35, null, 52, 47, 26, -55, 39, 123,15,66] } ] };

new smipleChart($('line'),config); config.charts.type ='area'; config.title.text ='区域图标' config.subTitle.text='区域图标副标题' config.yUnit.text ='区域图标侧标题'

new smipleChart($('area'),config); config.title.text ='柱状图标' config.subTitle.text='柱状图标副标题' config.yUnit.text ='柱状图标侧标题' config.charts.type ='columns'; config.chartData =[ {

name : 'xcv', color : '#4572A7',

data : [-0.01,-0.62,0,0.55,null,0.78,-0.63,-0.82,null,null,0.33] }, {

name: 'frfr', color: '#AA4643', data: [-0.22,0.82,0.55,1.32,0.33,0.95,null,1,0.65,null,0.78] }, { name: 'AAAAA', color: '#89A54E',

data: [null,0.62,0.34,null,0.63,0,-0.23,-1,0.62,0.45,null,-0.56] } ]

new smipleChart($('zhu'),config); config.charts.panel='y' new smipleChart($('zhu1'),config); config.charts.type ='pie'; config.title.text ='饼图图标' config.subTitle.text='饼图图标副标题' config.yUnit.text ='' config.legend.type='lengthwise'; config.chartData =[ {

name : 'aaa', color : '#4572A7',

data : [433,123,null,66] }, {

name: 'bbb', color: '#AA4643', data: [45,33,33,511] }, { name: 'ccc', color: '#89A54E',

data: [55,null,75,333] } ] config.legend.pos= [680,30] new smipleChart($('pie'),config) config.charts.type ='pies'; config.title.text ='다층 원형 차트 아이콘' config.subTitle.text='다층 원형 차트 아이콘 자막' config.legend.type='측면' config. legend.pos= [330,400] new smipleChart($('pies'),config)

config.chartData =[ {

name : ' xcv' , 색상 : '#4572A7',

데이터 : [433,355,275,null,588,323,576,32,99] }, {

이름: 'frfr', 색상: '#AA4643', 데이터: [45,666,100,null,677,56,88,633,55,64] }, { 이름: 'AAAAA', 색상: '# 89A54E',

데이터: [55,162,75,null,364,0,637,112,163,615] } ] config.yUnit.lineNum = 2; config.title. text = '상대적으로 작음' config.subTitle.text='2줄만 설정됨' config.yUnit.text ='퀴즈 제목'

config.charts.type =' 줄 '; config.legend.pos= [10,10] new smipleChart($('vv'),config) config.yUnit.lineNum = 10; 패널 = 'x'; config.charts.type ='segment';//new smipleChart($('segment'),config)

/ 스크립트>

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

javascript smipleChart simple icon class_javascript skills