支持 线性图 区域图 柱状图 饼图
支持多浏览器
用到的是svg vml
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>smipleChart</title>
<style type="text/css">
.cc{
height:450px; width:800px; border:1px solid #999; position:relative; margin:20px;
}
</style>
</head>
<body>
<div id='t'></div>
<div id='t1'></div>
<div id='line' class="cc"></div>
<div id='area' class="cc"></div>
<div id='zhu' class="cc"></div>
<div id='zhu1' class="cc" style="height:600px;"></div>
<div id='segmentx' class="cc"></div>
<div id='segmenty' class="cc"></div>
<div id='pie' class="cc"></div>
<div id='pies' class="cc"></div>
<div id='vv' class="cc" style='height:300px; width:520px;'></div>
<script type="text/javascript">
(function(doc,undefined){
var win = this,
uuuid = -1,
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"boolean" ) {
deep = target;
target = arguments[1] || {};
i = 2;
}
if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
target = {};
for(;i<length;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 "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 = 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<arr[0]){
while( stf<arr[0] ){
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<=o){
v = o;
return false;
}
});
var bj = (mathAbs(a)*t)/(v*t),
ba = 0,
isZ = bj!==parseInt(bj);
isZ
&&a>0
"opacity"
"alpha(opacity="+ hash[key] * 100+")"
: this[0].style[key] = hash[key];
}
return this;
},
on: function(eventName, handler){
var self = this;
/*this.element.addEventListener(eventName,function(){
handler.call(self)
},false);*/
this.element['on' + eventName] = function(e){
e = e || win.event;
handler.call(self,e);
}
return this;
},
appendTo: function(parent){
if(parent){
parent.element
".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')
"vml">');
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){
this[0].innerHTML = txt || '';
return this;
},
setSize : function(v){
this[0].strokeWeight = v;
return this;
},
setOpacity : function(v){
this.opacity.opacity=v;
return this;
}
});
}
//---------------------------------------------------------------------------------------------------
//画图类
//------------------------------------------------------------
win.smipleChart = function(){
this.init.apply(this,arguments);
};
smipleChart.list = [];
smipleChart.timer = null;
smipleChart.lazyLoad = function(id){
id = id || '0'
smipleChart.list[id]
&&smipleChart.list[id].loadMe();
};
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){
clearTimeout(smipleChart.timer)
var self = this;
this.width = container.offsetWidth;
this.height = container.offsetHeight;
this.currList = {};
this.uuuid = ++uuuid;
this.timer = null;
//主要画图组的集合 形式
//{id : {dom:xx,show:true}}
this.mainGroup = {};
//分段的时候要用到的 知道哪些是隐藏了的 因为要涉及到重绘
this.hideList = {};
//svg 里面画图 必须有一个svg标签 vml就用div了
this.container = hasSVG
"L");
//如果前面一个是null 并且不是第一个 把那个L去掉
if(i > 0 && data[i - 1] == null)
path.pop();
//计算出 点的x,y的位置
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);
//画点
var dotType = o.dotType||'circle';
self.baseDraw[dotType](self,{
x : x,
y : y,
r : 4,
fillColor : o.color
})
.attr({data:data[i],pos:x+'-'+(y-5)})
.css({zIndex:10,cursor:'pointer'})
.on('mouseover',(function(o,x,y){
return function(){
if(self.currList.dot){
if(self.currList.dot[0] === this[0])
return;
self.currList.dot.setSize(0);
self.currList.line.setSize(1.5);
}
this.setSize(2);
line.setSize(2.5);
var pos = this.attr('pos').split('-');
self.showTooltip(o,pos[0],pos[1],this.attr('data'));
self.currList.dot = this;
self.currList.line = line;
}
})(o,x,y))
/*.on('mouseout',function(){
this.setSize(0);
line.setSize(1.5);
})*/
.on('click',function(){lineGroup.toFront(); })
.appendTo(lineGroup);
}
};
//画折线
line = self.baseDraw.path(self,{
border : 1.5,
borderColor : o.color,
isfill : false,
path : path
})
.css({zIndex:5})
/*.on('mouseover',function(){
this.setSize(2.5);
})
.on('mouseout',function(){
this.setSize(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};
//有2个路径 一个是区域的路径 一个是线的路径
var areaPath = [M, (draw.startX + draw.offset).toFixed(0), (draw.startY-draw.jianjuY).toFixed(0)],
path = [M],
data = o.data,
line;
for(var n=0,l = data.length;n<l;n++){
//如果数据是空的
var len = areaPath.length;
if( data[n] === null){
//如果前面的一个不是m 就重新画 所以加上 M
if(path[path.length - 1] !== M)
path.push(M);
//如果第1个 或者前面的都为null 修改起点坐标
len===3
&&(areaPath[1] = (draw.startX +(n+1)*draw.xPices + draw.offset).toFixed(0));
//如果前面一个不是结束标识符 区域图结束 如果第一个数据是null 则不进行下面的操作
if(areaPath[len - 1] !== seal&&n!==0){
areaPath=areaPath.concat([
areaPath[len - 2],
(draw.startY-draw.jianjuY).toFixed(0),
seal
]);
}
}else{
n !== 0 && path.push(L);
areaPath.push(L);
//如果前面的那个数据是null 把之前的那个L去掉
if(n > 0 && data[n - 1] == null){
path.pop();
//如果是第一个为null 不删除L
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.jianjuY),
L,
x,
y
]);
}else{
areaPath.push(x);
areaPath.push(y);
}
//如果是最后一个点
if(n === l - 1){
areaPath.push(x);
areaPath.push(parseInt(draw.startY-draw.jianjuY));
}
//画点
self.baseDraw[o.dotType || 'circle'](self,{
x : x,
y : y,
r : 4,
fillColor : o.color
})
.attr({data:data[n],pos:x+'-'+(y-5)})
.on('mouseover',(function(o,x,y){
return function(){
if(self.currList.dot){
if(self.currList.dot[0] === this[0])
return;
self.currList.dot.setSize(0);
self.currList.line.setSize(1.5);
}
this.setSize(2);
line.setSize(2.5);
var pos = this.attr('pos').split('-');
self.showTooltip(o,pos[0],pos[1],this.attr('data'));
self.currList.dot = this;
self.currList.line = line;
}
})(o,x,y))
/*.on('mouseout',function(){
this.setSize(0);
line.setSize(1.5);
//self.hideTooltip()
})*/
.on('click',function(){areaGroup.toFront(); })
.css({zIndex:10,cursor:'pointer'})
.appendTo(areaGroup);
}
}
areaPath.push(seal)
self.baseDraw.path(self,{
border : 0,
isfill : true,
fillColor : o.color,
opacity : 0.5,
path : areaPath
})
.css({zIndex:5})
.appendTo(areaGroup);
line = self.baseDraw.path(self,{
border : 1.5,
borderColor : o.color,
isfill : false,
path : path
})
/*.on('mouseover',function(){
hasSVG
"2px,2px,2px,2px" })
.css({zIndex:200})
},
span : function(o,config){
return o.createElement('span').
css({
position:'absolute',
left : config.x+'px',
top : config.y+'px'
})
},
path : function(o,config){
var attr = {},
width = o.width,
height = o.height,
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"#C0C0C0");
attr.coordsize = width+','+height;
attr.path = config.path;
var elem = o.createElement()
.attr(attr)
.css(css);
if(config.opacity){
var fill = o.createElement('fill')
.attr({
type : 'fill',
color : config.fillColor||"#C0C0C0",
opacity : config.opacity
})
.appendTo(elem);
//那这个对象的一个属性引用设置透明的元素 以后会用到
elem.opacity = fill[0];
}
return elem;
},
circle : function(o,config){
var width = o.width,
height = o.height,
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 o.createElement()
.attr(attr)
.css(css)
},
pie : function(o,config){
////config,s,e,r,index
var opts = o.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 "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',
dotType : 'square',
//data : [11,12,13,15,16,18,17,14,10]
//[1,2,3,5,6,8,7,4,10]
data: [44,-12,-78,100,-13,-4,-26,34]
}, {
name: 'frfr',
color: '#AA4643',
dotType : 'triangle',
data: [-44,12,78,-100,13,4,-56,-34]
}, {
name: 'AAAAA',
color: '#89A54E',
dotType : 'diamond',
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 ='区域图表侧标题'
config.chartData = [
{
name : 'xcv',
color : '#4572A7',
//data : [0,3,4,5,6,7,8,9,10,11]
data : [11,12,13,14,15,16,-17,18,19,0]
}, {
name: 'frfr',
color: '#AA4643',
data: [44,12,78,100,13,44,56,34]
}, {
name: 'AAAAA',
color: '#89A54E',
data: [null,101,83,null,22,78,88,44,78]
}, {
name: 'BBBB',
color: '#80699B',
data: [null, 58, 35, null, 52, 47, 26, 55, 39, 123,15,66]
}
]
new smipleChart($$('area'),config);
config.title.text ='柱状图表'
config.subTitle.text='柱状图表副标题'
config.yUnit.text ='柱状图表侧标题'
config.charts.type ='columns';
config.chartData =[
{
name : 'xcv',
color : '#4572A7',
//data : [2,3,4,5,6,7,8,9,10,11]
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,411]
}, {
name: 'ccc',
color: '#89A54E',
data: [55,null,75,233]
}, {
name: 'ddd',
color: '#80699B',
data: [63,null,100,333]
}
]
config.legend.pos= [680,30]
new smipleChart($$('pie'),config);
config.charts.type ='pies';
config.title.text ='多层饼图图表'
config.subTitle.text='多层饼图图表副标题'
config.legend.type='lateral';
config.legend.pos= [290,400]
new smipleChart($$('pies'),config);
config.chartData =[
{
name : 'xcv',
color : '#4572A7',
data : [111,222,333,null,444,555,56,57,84]
}, {
name: 'frfr',
color: '#AA4643',
data: [845,666,100,null,666,677,56,88,633,55,555]
}, {
name: 'AAAAA',
color: '#89A54E',
data: [555,162,75,null,364,0,637,112,163,615]
}
]
config.charts.type ='line';
config.legend.pos= [10,10]
//
config.yUnit.lineNum = 10;
config.charts.panel = 'x';
config.title.text ='分段图表'
config.subTitle.text='分段图表副标题'
config.yUnit.text ='分段图表侧标题'
config.charts.type ='segment';
new smipleChart($$('segmentx'),config);
config.charts.panel = 'y';
new smipleChart($$('segmenty'),config);
config.yUnit.lineNum = 2;
config.title.text ='比较小的'
config.subTitle.text='只设置了2条线'
config.yUnit.text ='小测标题' ;
new smipleChart($$('vv'),config);
//alert(new Date().getTime()-t)
}
</script>
</body>
</html>
另
js浮点精度问题 不好解决 求助。。。。。。。。。
水平有限 难免问题多多 望赐教。。。。。。。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。
一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。
另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？