Suporte ao gráfico de gráfico de gráfico linear gráfico de pizza Histograma
Suporta vários navegadores
Usado SVG VML
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.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 {
Altura: 450px; Largura: 800px; fronteira: 1px Solid #999; Posição: relativa; margem: 20px;
}
</style>
</head>
<Body>
<div id = 't'> </div>
<div id = 't1'> </div>
<div id = 'line'> </div>
<div id = 'área'> </div>
<div id = 'zhu'> </div>
<div id = 'zhu1' style = "altura: 600px;"> </div>
<div id = 'segmentx'> </div>
<div id = 'segmenty'> </div>
<div id = 'torta'> </div>
<div id = 'tortas'> </div>
<div id = 'vv' style = 'altura: 300px; Largura: 520px; '> </div>
<script type = "text/javascript">
(função (doc, indefinido) {
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,
caminho = hassvg? 'd': 'caminho',
SEAL = HASSVG? 'Z': 'E',
matemática = matemática,
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) {
retornar document.getElementById (id);
};
win.extend = function () {
VAR Target = Argumentos [0] || {}, i = 1, comprimento = argumentos.Length, Deep = true, opções;
if (typeof alvo === "boolean") {
Deep = Target;
Target = argumentos [1] || {};
i = 2;
}
if (typeof Target! == "Object" && Object.prototype.toString.Call (Target)! = "[Função do objeto]"))
Target = {};
para (; i <comprimento; i ++) {
if ((opções = argumentos [i])! = nulo)
para (Var Nome in Options) {
var src = Target [nome], copy = options [nome];
if (Target === cópia)
continuar;
if (Deep && cópia && typeof cópia === "object" &&! copy.nodetype) {
Target [nome] = argumentos.Callee (Deep, src || (copy.length! = null? []: {}), copy);
}
caso contrário, se (cópia! == indefinido)
Target [nome] = cópia;
}
}
alvo de retorno;
};
win.each = function (objeto, retorno de chamada, args) {
Var nome, i = 0, comprimento = object.Length;
if (args) {
args = array.prototype.slice.call (argumentos) .slice (2);
if (comprimento === indefinido) {
para (nome em objeto)
if (callback.apply (objeto [nome], [nome, objeto [nome]]. concat (args)) === false)
quebrar;
} outro
para (; i <comprimento; i ++)
if (retorno de chamada.apply (objeto [i], [i, objeto [i]]. concat (args)) === false) //
quebrar;
} outro {
if (comprimento === indefinido) {
para (nome em objeto)
if (retorno de chamada.call (objeto [nome], nome, objeto [nome]) === false)
quebrar;
} outro
for (var value = objeto [0];
i <comprimento && callback.call (valor, i, valor)! == false; valor = objeto [++ i]) {}
}
objeto de retorno;
};
win.contains = function (p,
if (! p ||! c) retornar false;
if (p === c) retorna true;
retornar Isie
? P.Contains (C)
: p.comparedocumentPosition (c) == 20
? verdadeiro
: false;
};
// ---------------------------------------------------------------
Função ProcessPoint (x) {
retornar Isie? ~~ x.tofixado (0): ~~ x.tofixado (0) + 0,5;
};
função caltextlen (txt, cssstr) {
var span = doc.createElement ('span');
if (cssstr) {
TIPO DE CSSSTR === 'String'
? span.style.csStext = CSSSTR
: estend (span.style, cssstr);
}outro{
estend (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,
altura = span.offsetHeight;
doc.body.removeChild (span);
retornar {w: largura, h: altura};
};
ângulo de função (r, centro, o, jingdu) {
var hudu = math.pi*2*(o/360),
x = centro [0]+ r*math.sin (hudu),
y = centro [1]+ -r*math.cos (hudu);
retornar [x.tofixed (jingdu || 0), y.tofixed (jingdu || 0)];
}
função xx (a, b, linho) {
var t = 1000,
stf = ((b*ta*t)/linho)/t,
arr = [1,2,2,5,5,10],
c = 1,
v;
// A cardinalidade da linha divisória é [1, 2, 2,5, 5, 10] Esta etapa é descobrir a qual alcance o intervalo pertence a
if (stf <arr [0]) {
while (stf <arr [0]) {
c = c*10;
arr [0] = arr [0]/c;
}
cada ([1,2,2,5,5,10], função (i, o) {
arr [i] = o/c;
});
} else if (stf> arr [4]) {
while (stf> arr [4]) {
c = c*10;
arr [4] = arr [4]*c;
}
cada ([1,2,2,5,5,10], função (i, o) {
arr [i] = o*c;
});
}
// Siga o intervalo para encontrar o mais próximo no intervalo
cada (arr, função (i, o) {
if (stf <= o) {
v = o;
retornar falso;
}
});
var bj = (mathabs (a)*t)/(v*t),
ba = 0,
isz = bj! == parseint (bj);
ISZ
&& a> 0
? ba = -a%v*t
: ba = (mathabs (a)%vv)*t;
a = (a*t+ba)/t;
b = (b*t+(b%v === 0? 0: (vb%v))*t)/t;
// Veja quantas linhas são deixadas e não desenhadas
var num = Math.max (0, linho - Math.Round ((BA)/V));
if (a> = 0) {
// coordenar o número inteiro de comparação
if (a! = 0 && num! = 0 && a%10! == 0) {
while (a! = 0 && num! = 0) {
a = (a*tv*t)/t;
num--;
if ((a*tv*num*t)/10000> 0 && a%10 === 0)
quebrar;
}
}
if (num! = 0) {
while (num! == 0) {
b = (b*t+v*t)/t
num--;
}
}
}outro{
// coordenar o número inteiro de comparação
if (b <0 && num! = 0) {
while (b! = 0 && num! = 0 && b%10! == 0) {
b = (b*t+v*t)/t;
num--;
if ((b*t+v*num*t)/t <0 && b%10 === 0)
quebrar;
}
}
if (num! = 0) {
while (num! == 0) {
a = (a*tv*t)/t
num--;
}
}
}
return {min: a, max: b, stf: v};
}
// -------------------------------------------------------------------------------------------------------------------
// Crie algumas criações de elementos SVG VML e exclua estilos de atributo == Algumas operações
win.Vector = function () {};
vetor.prototype = {
$ c: function (gráfico, nodename) {
this.Element = this [0] = doc.createElementns ('http://www.w3.org/2000/svg', nodename);
this.graphic = gráfico;
devolver isso;
},
Att: function (hash, val) {
var elem = this.Element,
chave,
valor;
if (typeof hash === 'string') {
if (val === indefinido) {
retornar elem.getAttribute (hash);
}outro{
elem.setattribute (hash, val);
devolver isso;
}
} outro {
para (chave no hash) {
valor = hash [chave];
if (key === Path) {
valor && value.join
&& (value = value.join (''));
/(Nan | |^$)/. Teste (valor)
&& (value = 'm 0 0');
}
elem.setattribute (chave, valor)
}
}
devolver isso;
},
CSS: function (hash) {
para (tecla var no hash) {
isie && key == "Opacity"
? este [0] .style ['filtro'] = "alfa (opacity ="+ hash [key] * 100+ ")"
: este [0] .style [key] = hash [key];
}
devolver isso;
},
ON: function (EventName, Handler) {
var self = this;
/*this.element.addeventListener(eventName.function () {
Handler.call (self)
},falso);*/
this.Element ['on' + eventName] = function (e) {
e = e || win.event;
Handler.call (self, e);
}
devolver isso;
},
Appendto: function (pai) {
if (pai) {
parent.Element
? parent.Element.AppendChild (this.Element)
: parent.appendchild (this.element)
} outro {
this.graphic.container.appendChild (this.Element);
}
devolver isso;
},
addText: function (str) {
var elem = this.Element;
if (elem.nodename === 'text') {
elem.appendChild (doc.createTextNode (str+''));
}
devolver isso;
},
Setopacity: function (v) {
this.attr ('preenchimento de opacidade', v);
devolver isso;
},
setSize: function (v) {
Este [0] .Nodename === 'Circle'
? this.attr ('r', 4+(v === 0? 0: 2))
: this.attr ({'stroke-width': v});
devolver isso;
},
tofront: function () {
este [0] .parentnode.appendChild (this [0]);
devolver isso;
},
SHOW: function () {
este [0] .style.display = 'bloco';
devolver isso;
},
ocultar: function () {
este [0] .style.display = 'nenhum';
devolver isso;
},
destruir: function () {
// Destrua nós ............
var node = this [0] || esse;
node.onMouseOver = node.onMouseOut = node.OnClick = null;
Node.parentNode
&& node.parentnode.removeChild (node);
devolver isso;
}
};
// -------------------------------------------------------------------------------------------------------------------
// -----------------------------------------------------------------------------------------------------
// Se for VML para modificar alguns desses métodos
if (! hassvg) {
// -----------------------------------------------------------------------------------------------------------------------------------
doc.createstestylesheet (). addRule (". vml", "comportamento: url (#padrão#vml); exibição: bloqueio em linha; posição: absoluto; esquerda: 0px; top: 0px");
! doc.namespaces.vml &&!+"/v1";
doc.namespaces.add ("vml", "urn: schemas-microsoft-com: vml");
// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Extend (Vector.prototype, {
$ c: function (gráfico, nodename) {
var name = nodename || 'forma';
this.Element = this [0] = (nome === 'div' || nome === 'span')
? doc.createElement (nome)
: doc.createElement ('<vml:'+name+'>');
this.graphic = gráfico;
devolver isso;
},
/*on: function (eventName, manipulador) {
var self = this;
this.element.attachevent ("on" + eventName, function () {
Handler.call (self);
});
devolver isso;
},*/
addText: function (txt) {
Este [0] .innerhtml = txt || '';
devolver isso;
},
setSize: function (v) {
este [0] .StrokeWeight = V;
devolver isso;
},
Setopacity: function (v) {
this.Opacity.Opacity = V;
devolver isso;
}
});
}
// -----------------------------------------------------------------------------------------------------
// Categoria de desenho
// ------------------------------------------------------------
win.smiplechart = function () {
this.init.Apply (isto, argumentos);
};
smilechart.list = [];
smilechart.timer = null;
smilechart.LazyLoad = function (id) {
id = id || '0'
smilechart.list [id]
&& smiplechart.list [id] .loadMe ();
};
smilechart.prototype = {
Opções: {
Gráficos: {
Paddingright: 20,
raio: 200,
estilo: {
Fontfamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, Sans-Serif',
Fontsize: '12px',
Antecedentes: '#ffffff'
}
},
título: {
texto : '',
y: 10,
estilo: {
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
Fontsize: '16px',
peso -font: 'ousado'
}
},
Legenda: {
texto: '',
y: 30,
estilo: {
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
Fontsize: '12px',
Cor: '#111'
}
},
yunit: {
texto : '',
estilo: {
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
Fontsize: '12px',
Cor: '#111'
},
Linho: 10
}
},
init: function (contêiner, opções) {
ClearTimeout (smiplechart.timer)
var self = this;
this.width = container.offsetWidth;
this.Height = container.OffSethEight;
this.currList = {};
this.uuuid = ++ uuuid;
this.timer = null;
// A principal forma de coleta do grupo de desenho
// {id: {dom: xx, mostre: true}}
this.maingRoup = {};
// O que deve ser usado ao segmentar é saber quais estão ocultos porque envolve o redesenho
this.hidelist = {};
// O desenho no SVG deve ter uma tag SVG VML e usar div
this.Container = Hassvg
? New Vector (). $ C (1, 'SVG')
.attr ({
xmlns: 'http://www.w3.org/2000/svg',
Versão: '1.1',
largura: this.width,
Altura: this.Height
})
.css ({fontsize: '12px'})
.appendto (contêiner)
: New Vector (). $ C (1, 'div')
.css ({
Fontsize: '12px',
Largura: this.width +'px',
Altura: this.Height+'PX'
})
.AppendTo (contêiner);
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 = 'Absolute';
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 c = estend (true, {}, this.options),
opts = this.opts = estend (true, c, opções),
style = estend (opts.Charts.style, {
largura: this.width,
Altura: this.Height
});
smilechart.list [this.uuuid] = this;
smilechart.timer = setTimeout (function () {
smilechart.Lazyload ();
}, 200);
},
loadMe: function () {
var opts = this.opts,
eu = isso,
TIPO = OPTS.CHARTS.TYPE;
this.Container = this.Container
.on ('mouseout', função (e) {
var elem = e.RelatedTarget || E.ToElement;
if (! contém (este [0], elem)) {
self.HideTooltip ();
self.currList.dot
&& self.currlist.dot.setsize (0);
self.currList.line
&& self.currlist.line.setsize (1.5);
self.currList = {};
}
})
.css ({display: 'nenhum'}) [0];
// Alguns parâmetros necessários ao calcular a placa de desenho
this.getDrawarea ()
.createTooltip () // Crie uma caixa para informações rápidas
.Drawtitle () // Desenhe o título
// Desenhe a placa
'linha, área, torta'.indexOf (tipo)> = 0
&& (opts.Charts.Panel = 'x');
'torta, tortas'.IndexOF (tipo) <0
&& this.drawpanel ();
this.drawlegend (opts.legend.type); // desenhar barras de bloco colorido
var tipo = {
linha: 'drawline',
Área: 'drawarea',
colunas: 'drawcolumns',
torta: 'drawpie',
tortas: 'drawpies',
segmento: 'traição'
} [opts.Charts.type];
// Comece a desenhar .........
este [tipo] ();
// Excluir nó
this.loading.parentnode.removeChild (this.loading);
// desconecte a referência
this.loading = null;
this.container.style.display = '';
setTimeout (function () {
smilechart.Lazyload ((++ self.uuuid)+'');
}, 10)
},
CreateElement: function (nodename) {
retornar new Vector (). $ C (isto, nodename);
},
Grupo: function (nome) {
Retorne this.createElement (Hassvg? 'G': 'div'). Att ('Mark', nome);
},
getDrawarea: function () {
var opts = this.opts,
largura = this.width,
altura = this.Height,
title = opts.title,
Subtítulo = Opts.Subtitle,
área = {
// Remova a largura do texto da escala no lado esquerdo do eixo de coordenadas (estimado) 80 é o valor fixo e apenas 80 é deixado para o lado esquerdo do valor fixo.
largura de área: largura - 80,
// Remova a altura do texto e as marcações sob o eixo
Peso de área: altura - 40,
// A posição x da origem será calculada abaixo
startx: 0,
// A posição Y da origem será calculada abaixo
Starty: 0,
// Ao desenhar um gráfico de pizza com a coordenada X do centro, você precisa conhecer a posição do centro do círculo.
Centerx: 0,
// Ao desenhar um gráfico de pizza com a coordenada Y no centro, você precisa conhecer a posição do centro do círculo.
Centery: 0
};
// Se o título principal existir, subtraia a altura do título principal, de outra forma subtraia a altura de 10
Area.areaHeight -= (title.Text! == '')
? title.y
: 10;
// Remova a altura da legenda
are.areaHeight -= (Subtitle.Text! == '')
? Legenda.y
: 10
área.startx = 80;
área.starty = altura - 40;
// a posição do centro do círculo
are.centerx = largura / 2;
are.centery = altura / 2;
// Deixe algum espaço à direita
área.areawidth -= 20;
// Deixe algum espaçamento no topo
área.areaHeight -= 15;
opts.area = área;
devolver isso;
},
drawtitle: function () {
var opts = this.opts,
eu = isso,
arr = [opts.title, opts.subtitle, opts.yunit],
// parâmetros básicos da posição das 3 coordenadas do título
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 ();
cada (arr, função (i, título) {
var text = title.text;
if (text) {
var elem = self.basedraw.span (self, {
'Text-âncor': 'Esquerda',
X: Mathmax (config [i] .x - caltextlen (texto, title.style) .w/2,10),
Y: Config [i] .y
}, Caltextlen (title.text, title.style) .h)
.css (title.style)
.AddText (texto)
.appendto (tpanel);
// Se for 2, significa que o subtítulo é usado para colocá -lo verticalmente
if (i === 2) {
Hassvg
? elem.attr ({transform: 'girate (270,'+(opts.yunit.x+10)+','+self.Height / 2+')'})
: (elem.element.style.filter = 'Progid: dxxETransform.microsoft.basicimage (rotação = 3)')
}
}
});
devolver isso;
},
// Placas de desenho é mais problemático
drawPanel: function (type) {
varopts = this.opts,
eu = isso,
área = opts.area,
Chartstype = opts.Charts.Type,
issegment = Chartstype === 'segmento',
// é o tipo de placa horizontal ou vertical
TIPO = OPTS.CHARTS.PANEL || 'x';
// Placa inferior
var draweAeawidth = área.areawidth,
drawAeaHeight = Area.AeaHeight,
// as coordenadas da origem
startx = área.startx,
starty = área.starty;
var alldata = [],
minvalue = 0,
maxvalue = 10,
// O número de linhas só pode estar entre 1 e 10
linho = mathmin (10, Mathmax (opts.yunit.linenum, 1)),
funcionários;
// combinando todos os dados
cada (opts.Chartdata, função (i, o) {
// Se for um gráfico de barras, é resumido para todos os dados
isegment
? cada (o.data, função (j, d) {
Alldata [J]
? alldata [j] = alldata [j] + (~~ d)
: alldata [j] = ~~ d;
})
: alldata = alldata.concat (o.data)
});
// Classifique todos os dados para encontrar o valor máximo e o valor mínimo abaixo
alldata.sort (função (a, b) {return ab});
// termina o valor máximo e o valor mínimo
maxvalue = alldata [alldata.length - 1];
cada (alldata, função (i, o) {
if (o! == null) {
minvalue = o;
retornar falso;
}
});
// Recipiente de placa principal
VAR painel = this.group ('painel'). Appendto ();
var resultado = xx (minvalue, maxvalue, linho),
min = resultado.Min,
max = resultado.max,
f = resultado.stf;
isegment
&& (min = 0);
// significa que a coordenada horizontal ou coordenada dupla é desenhada
if (type.TolowerCase () === 'x') {
// Intervalo da unidade subterrânea
varxpices = draweawidth / opts.xunit.units.length,
// O ponto central do intervalo unitário
deslocamento = xpices / 2,
ypices = draweAeaHeight / linenum;
// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var y = hassvg? 5: 10,
t = 1000,
span;
cada um (opts.xunit.units, function (i, d) {
self.basedraw.path (self, {
fronteira: 1,
BorderColor: '#C0C0C0',
Isfill: falso,
caminho : [
M,
ProcessPoint (startx + (i * xpices)),
ProcessPoint (Starty),
L,
ProcessPoint (startx + (i*xpices)),
ProcessPoint (Starty + 5)
]
}).
appendto (painel);
span = self.basedraw.span (self, {
x: startx + deslocamento + (i * xpices),
y: starty+y,
'Text-âncor': 'meio'
})
.css ({
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
Fontsize: '12px'
})
.AddText (opts.xunit.units [i])
.AppendTo (Painel) [0];
! Hassvg
&& (span.style.left = parseint (span.style.left) - span.offsetWidth/2+'px');
});
// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
for (i = 0; i <= linenum; i ++) {
self.basedraw.path (self, {
fronteira: 1,
BorderColor: '#C0C0C0',
Isfill: falso,
Caminho: [M, StartX, ProcessPoint (Starty - (i * ypices)), L, ProcessPoint (startx + draweAeawidth), processpoint (starty - (i * ypices)]]
})
.css ({zindex: -10})
.AppendTo (painel);
var span = self.basedraw.span (self, {
x: startx - 15,
y: starty - i * ypices -caltextlen (min+i * f+''). h/2,
'Text-âncor': 'meio'
})
.css ({
'Font-Family': 'Verdana, Arial, Helvetica, Sans-Serif',
'Font-Size': '12px',
Largura: '40px',
exibição: 'bloco',
Textalign: 'certo'
})
.AddText ((min*t+(i*t*f/t)*t)/t+'')
.AppendTo (Painel) [0];
if (! hassvg) {
span.style.top = parseint (span.style.top) + span.offsetheight/2 -5 + 'px';
span.style.left = parseint (span.style.left) -35+'px'
}
}
}outro{
// Intervalo da unidade subterrânea
Varypices = draweAHeight / (opts.xunit.units.length),
// O ponto central do intervalo unitário
offset = Math.Round (ypices / 2),
x = hassvg? 25: 70,
y = hassvg? 0: 5,
span
cada um (opts.xunit.units, function (i, d) {
self.basedraw.path (self, {
fronteira: 1,
BorderColor: '#C0C0C0',
Isfill: falso,
caminho : [
M,
ProcessPoint (StartX-5),
ProcessPoint (starty-i * ypices),
L,
ProcessPoint (startx),
ProcessPoint (starty-i * ypices),
]
})
.AppendTo (painel);
span = self.basedraw.span (self, {
x: startx - x,
y: starty -i * ypices-offset-caltextlen (d) .h/2 + y,
'Text-âncor': 'meio'
})
.css ({
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
Fontsize: '12px',
Largura: '60px',
Textalign: 'certo'
})
.AddText (D)
.appendto (painel)
});
var xpices = draweawidth / linenum;
for (var i = 0; i <= linenum; i ++) {
self.basedraw.path (self, {
fronteira: 1,
BorderColor: '#C0C0C0',
Isfill: falso,
caminho : [
M,
ProcessPoint (startx + (i * xpices)),
ProcessPoint (Starty),
L,
ProcessPoint (startx + (i*xpices)),
ProcessPoint (Starty - DrawAeaHeight)
]
}).
appendto (painel);
self.basedraw.span (self, {
x: startx - caltextlen (min+i * f+''). w/2+i * xpices,
Y: Starty,
'Text-âncor': 'Esquerda'
})
.css ({
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
Fontsize: '12px'
})
.AddText (min+i*f+'')
.AppendTo (painel);
}
}
// -----------------------------------------------------------------------------------------------------------
// porque o ponto de partida provavelmente não é iniciado em 0, portanto, o valor da parte 0 deve ser adicionado no ponto de partida.
var jianju = 0;
if (min> 0) jianju = min;
if (max <0) jianju = max;
startx = opts.Charts.Panel === 'x'? startx: startx-xpices*(min/f);
starty = opts.Charts.Panel === 'x'? starty + ypices*(min/f): starty;
opts.draw = {
startx: startx, // x ponto de partida do eixo
Starty: Starty, // e o ponto de partida do eixo
xpices: xpices, // largura de cada parte do eixo x
ypices: ypices, // a largura de cada parte do eixo y
Offset: deslocamento, // x Offset de posição do ponto central do ramo único
Jianjuy: jianju*ypices/f,
JianJux: Jianju*xpices/f,
Feed: f // quantos por y eixo existem
}
devolver isso;
},
createToolTip: function () {
// um grupo
this.tipc = this.group ('tip')
.css ({zindex: 200, altura: '20px', largura: '20px', posição: 'absoluta'})
.appendto ()
.esconder()
// Desenhe um quadro baseado
this.tipbox = this.basedraw.rect (this, {arc: 0.22, preenchimento: '#ffff', borda: 2, borderColor: '#606060'})
.AppendTo (this.tipc)
// porque G no SVG pode ser posicionado diretamente, mas o grupo renderizando em VML é muito lento, então a div é alterada, então o pai aqui não é o mesmo que o estrangeiro
var p = isie? this.tipbox: this.tipc;
this.tiptxtContainer = this.Basedraw.Text (this, {Fill: '#000000', x: 5, y: 19, 'text-âncor': 'esquerda'})
.css ({
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
Fontsize: '12px',
Antecedentes: '#fff'
})
.AppendTo (P);
this.tipText = doc.createTextNode ('');
this.tiptxtContainer [0] .appendChild (this.tipText);
devolver isso;
},
ShowToolTip: function (obj, x, y, dados) {
/*var txt = obj.name + ':' + dados,
size = caltextlen (txt, this.tiptxtContainer [0] .style.csStext),
pos = {x: x - (size.w + 5 * 2)/2, y: y - 32};
this.tipc
.tofront ()
.mostrar();
if (hassvg) {
this.tipc.attr ({transform: 'translate ('+pos.x+','+pos.y+')'});
this.tipbox
.attr ({width: size.w + 5 * 2, altura: size.h + 5 * 2, golpe: obj.color || '#606060'});
}outro{
this.tipc.css ({esquerda: pos.x, top: pos.y});
this.tipbox
.css ({width: size.w + 5 * 2, altura: size.h + 5 * 2})
this.tipbox [0] .strokecolor = obj.color || '#000';
}
this.tiptext.nodEvalue = txt || '';*/
ClearTimeout (this.timer);
var txt = obj.name + ':' + dados,
eu = isso,
size = caltextlen (txt, this.tiptxtContainer [0] .style.csStext),
pos = {x: x - (size.w + 5 * 2)/2, y: y - 32};
if (hassvg) {
self.tipbox
.attr ({width: size.w + 5 * 2, altura: size.h + 5 * 2, golpe: obj.color || '#606060'});
}outro{
self.tipbox
.css ({width: size.w + 5 * 2, altura: size.h + 5 * 2})
self.tipbox [0] .strokecolor = obj.color || '#000';
}
this.tiptext.nodEvalue = txt || '';
if (this.tipc [0] .style.display === 'nenhum') {
Hassvg
? self.tipc.attr ({transform: 'translate ('+pos.x+','+pos.y+')', pos: pos.x+'-'+pos.y})
: self.tipc.attr ({pos: pos.x+'-'+pos.y}). css ({esquerda: pos.x, top: pos.y});
this.tipc
.tofront ()
.mostrar();
}outro{
var move = function (t, b, c, d) {
return c*(t/= d)*t + b;
},
t = 0,
b = self.tipc.attr ('pos'). split ('-'),
c = [pos.x, pos.y],
d = 5;
this.timer = setInterval (function () {
if (t <d) {
t ++;
var x = mover (t, ~~ b [0], (~~ c [0])-(~~ b [0]), d),
y = move (t, ~~ b [1], (~~ c [1])-(~~ b [1]), d);
Hassvg
? self.tipc.attr ({transform: 'translate ('+x+','+y+'), pos: x+'-'+y})
: self.tipc.attr ({pos: x+'-'+y}). css ({esquerda: x, topo: y});
}outro{
ClearTimeout (self.timer);
}
}, 1);
};
},
hidetooltip: function () {
this.tipc.hide ();
},
drawlegend: function (type, redraw) {
var self = this,
opts = this.opts,
isline = opts.charts.type === 'linha',
// O tamanho do bloco de cores
t_width = 20,
t_Height = 20,
// distância entre blocos
t_space = 5,
dados = opts.ChartData,
len = dados.length,
css = opts.legend.style,
// Se o comprimento máximo for longitudinal, o comprimento máximo é necessário
maxwidth = 10,
maxHeight = 30,
// a localização dessa coisa
orig_pos = opts.legend.pos? opts.legend.pos: [2,2],
// mostra funções de grupo oculto
handle = function (i) {
var g = self.maingroup ['Chart'+i],
issegment = opts.Charts.Type === 'Segmento';
if (g.show) {
G.Chart.hide ();
g.show = false;
Hassvg
? this.attr ({preenchimento: '#ccc'})
: este [0] .style.color = '#ccc';
// Se for uma imagem segmentada, ela envolverá redesenho.
if (issegment) {
self.hidelist [i] = '';
var maingroup = self.maingroup;
para (Var Nome em Maingroup) {
var pai = maingroup [nome] .chart,
nós = pai [0] .childnodes,
len = modes.length;
// Destrua as coisas desenhadas na foto
for (var i = len-1; i> = 0; i-) {
vetor.prototype.destroy.call (nós [i])
}
}
// repintar
self.Drawsegment ();
}
}outro{
G.Chart.Show ();
g.show = true;
Hassvg
? this.attr ({preenchimento: '#000'})
: este [0] .style.color = '#000'
if (issegment) {
excluir self.hidelist [i];
var maingroup = self.maingroup;
para (Var Nome em Maingroup) {
var pai = maingroup [nome] .chart,
nós = pai [0] .childnodes,
len = modes.length;
for (var i = len-1; i> = 0; i-) {
vetor.prototype.destroy.call (nós [i])
}
}
self.Drawsegment ();
}
}
},
arr = [];
tipo = tipo || 'lateral';
var legendPanel = self.group ('legenda')
.AppendTo ();
if (type === 'lateral') {
// Se for horizontal
var top = orig_pos [1] + 5,
Th = Hassvg? 0: 3,
esquerda = orig_pos [0] + 5;
cada (dados, função (i, d) {
Esquerda = i === 0? Esquerda: t_space+esquerda;
// Calcule a localização de todas as esquerda
// Se for um diagrama linear, desenhe o desenho na forma de um diagrama linear
if (isline) {
self.basedraw.path (self, {
Fronteira: 1.5,
BorderColor: D.Color,
Isfill: falso,
caminho : [
M,
esquerda.tofixed (0),
(top+10) .Tofixed (0),
L,
(Esquerda+25) .Tofixed (0),
(topo+10) .Tofixed (0)
]
})
.AppendTo (LegendPanel);
self.basedraw [d.dottype || 'círculo'] (eu, {
X: Esquerda+12,
y: top+10,
R: 4,
FillColor: D.Color
})
.AppendTo (LegendPanel);
}outro{
self.basedraw.rect (self, {
arco: 0.1,
preenchimento: d.color,
fronteira: 1,
BorderColor: D.Color,
Esquerda: Esquerda,
topo: topo,
Largura: t_width+'px',
Altura: T_Height+'PX'
})
.AppendTo (LegendPanel)
}
esquerda = esquerda + t_width + 2 + t_space;
var w = caltextlen (d.name, css) .w
self.basedraw.span (self, {
'Text-âncor': 'Esquerda',
X: Esquerda,
y: top+th
})
.css (estend (css, {cursor: 'pointer'})))
.on ('clique', function () {
handle.call (isto, i);
})
.AddText (D.Name)
.AppendTo (LegendPanel);
Esquerda = esquerda + W;
});
this.basedraw.rect (this, {
arco: 0.1,
preencher: 'nenhum',
Fronteira: 1.5,
BorderColor: '#666666',
Largura: esquerda+ t_space- orig_pos [0],
Altura: MaxHeight,
Esquerda: orig_pos [0],
TOP: orig_pos [1]
})
.AppendTo (LegendPanel);
}outro{
var top = orig_pos [1] + 5,
Th = Hassvg? 0: 3,
esquerda = orig_pos [0] + 5;
cada (dados, função (i, d) {
top = i === 0? TOP: T_SPACE + TOP;
self.basedraw.rect (self, {
arco: 0.1,
preenchimento: d.color,
fronteira: 1,
BorderColor: D.Color,
Esquerda: Esquerda,
topo: topo,
Largura: t_width+'px',
Altura: T_Height+'PX'
})
.AppendTo (LegendPanel);
var h = caltextlen (d.name, css) .h;
self.basedraw.span (self, {
'Text-âncor': 'Esquerda',
x: esquerda+t_width+2+t_space,
y: top+th
})
.css (estend (css, {cursor: 'pointer'})))
.AddText (D.Name)
.on ('clique', function () {
// Se for um gráfico de pizza de várias camadas, não pode ser oculto
if (opts.Charts.Type === 'Pies') retornar;
handle.call (isto, i);
})
.AppendTo (LegendPanel);
top = top + h + t_space;
maxWidth = Math.max (MaxWidth, Caltextlen (D.Name, CSS) .W);
});
this.basedraw.rect (this, {
arco: 0.1,
preencher: 'nenhum',
Fronteira: 1.5,
BorderColor: '#666666',
Largura: maxwidth+22+15,
Altura: top+t_space-orig_pos [1],
Esquerda: orig_pos [0],
TOP: orig_pos [1]
})
.AppendTo (LegendPanel);
}
devolver isso;
},
DrawLine: function () {
var self = this,
opts = this.opts,
draw = opts.draw;
cada (opts.Chartdata, função (i, o) {
var id = 'gráfico'+i,
linha de linha = self.group (id)
.AppendTo ();
self.maingroup [id] = {
Gráfico: grupo de linha,
Mostrar: Verdadeiro
};
var path = [m],
dados = o.data,
linha;
for (var i = 0, l = data.length; i <l; i ++) {
if (dados [i] == null) {
// Se esses dados não existirem e não for o primeiro caminho de dados, adicione m a ele
if (path [path.length - 1]! == m)
path.push (m);
}outro{
// Se não for o primeiro caminho de dados, adicione l
i! == 0 && path.push ("l");
// se o primeiro for nulo e não o primeiro a remover o L
if (i> 0 && data [i - 1] == null)
path.pop ();
// calcule a posição de x e y do ponto
var x = draw.startx + draw.offset + (i * draw.xpices),
y = draw.starty - dados [i] * (draw.ypices / draw.feed);
if (isie) {
x = parseint (x);
y = parseint (y);
}
path.push (x);
path.push (y);
// Desenhe pontos
var dottype = O.DotType || 'círculo';
self.basedraw [Dottype] (self, {
x: x,
y: y,
R: 4,
FillColor: O.Color
})
.attr ({data: dados [i], pos: x+'-'+(y-5)})
.css ({zindex: 10, cursor: 'Pointer'})
.on ('mouseOver', (função (o, x, y) {
Return function () {
if (self.currlist.dot) {
if (self.currlist.dot [0] === this [0])
retornar;
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 ('dados'));
self.currList.dot = this;
self.currList.line = line;
}
}) (o, x, y))
/*. on ('mouseout', function () {
this.SetSize (0);
line.SetSize (1.5);
})*/
.on ('clique', function () {lineGroup.tofront ();})
.AppendTo (grupo de linha);
}
};
// desenhar linhas dobradas
linha = self.basedraw.path (self, {
Fronteira: 1.5,
BorderColor: O.Color,
Isfill: falso,
Caminho: caminho
})
.css ({zindex: 5})
/*. on ('mouseOver', function () {
this.SetSize (2.5);
})
.on ('mouseout', function () {
this.SetSize (1.5);
})*/
.on ('clique', function () {lineGroup.tofront ();})
.AppendTo (grupo de linha);
});
devolver isso;
},
drawAea: function () {
var self = this,
opts = this.opts,
draw = opts.draw;
cada (opts.Chartdata, função (i, o) {
var id = 'gráfico' + i,
AreaGroup = self.Group (ID) .AppendTo ();
Self.maingRoup [id] = {Chart: AreaGroup, SHOW: TRUE};
// Existem 2 caminhos, um é o caminho da região e o outro é o caminho da linha
var AreaPath = [m, (draw.startx + draw.offset) .tofixed (0), (draw.starty-draw.jianjuy) .tofixed (0)],
caminho = [m],
dados = o.data,
linha;
for (var n = 0, l = data.length; n <l; n ++) {
// se os dados estiverem vazios
var len = AreaPath.Length;
if (dados [n] === null) {
// Se o anterior não for M, desenhe -o novamente, então adicione m
if (path [path.length - 1]! == m)
path.push (m);
// Se o primeiro ou a frente forem nulos, modifique as coordenadas do ponto de partida
Len === 3
&& (AreaPath [1] = (draw.startx +(n +1)*draw.xpices +draw.offset) .tofixed (0));
// Se o anterior não for o gráfico de área de identificador final, se os primeiros dados forem nulos, a seguinte operação não será executada
if (AreaPath [len - 1]! == SEAL && n! == 0) {
AreaPath = AreaPath.Concat ([
AreaPath [Len - 2],
(draw.starty-draw.jianjuy) .tofixed (0),
selo
]);
}
}outro{
n! == 0 && path.push (l);
AreaPath.push (l);
// Se os dados anteriores forem nulos, remova o L anterior
if (n> 0 && data [n - 1] == null) {
path.pop ();
// Se o primeiro for nulo, não exclua l
n! == 1 && AreaPath.pop ();
}
var x = draw.startx + draw.offset + (n * draw.xpices),
y = draw.starty - dados [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
]);
}outro{
AreaPath.push (x);
AreaPath.push (y);
}
// se for o último ponto
if (n === L - 1) {
AreaPath.push (x);
AreaPath.push (parseint (draw.starty-draw.jianjuy));
}
// Desenhe pontos
Self.Basedraw [O.DotType || 'círculo'] (eu, {
x: x,
y: y,
R: 4,
FillColor: O.Color
})
.attr ({data: dados [n], pos: x+'-'+(y-5)})
.on ('mouseOver', (função (o, x, y) {
Return function () {
if (self.currlist.dot) {
if (self.currlist.dot [0] === this [0])
retornar;
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 ('dados'));
self.currList.dot = this;
self.currList.line = line;
}
}) (o, x, y))
/*. on ('mouseout', function () {
this.SetSize (0);
line.SetSize (1.5);
//self.hideTooltip ()
})*/
.on ('clique', function () {AreaGroup.tofront ();})
.css ({zindex: 10, cursor: 'Pointer'})
.AppendTo (AreaGroup);
}
}
AreaPath.push (selo)
self.basedraw.path (self, {
Border: 0,
Isfill: verdadeiro,
FillColor: O.Color,
Opacidade: 0,5,
Caminho: AreaPath
})
.css ({zindex: 5})
.AppendTo (AreaGroup);
linha = self.basedraw.path (self, {
Fronteira: 1.5,
BorderColor: O.Color,
Isfill: falso,
Caminho: caminho
})
/*. on ('mouseOver', function () {
Hassvg
? this.attr ({'stroke-width': 2.5})
: (este [0] .strokeweight = 2.5);
})
.on ('mouseout', function () {
Hassvg
? this.attr ({'stroke-width': 1.5})
: (este [0] .strokeweight = 1.5);
})*/
.on ('clique', function () {AreaGroup.tofront ();})
.css ({zindex: -1})
.AppendTo (AreaGroup);
});
devolver isso;
},
drawColumns: function () {
var self = this,
opts = this.opts,
draw = opts.draw,
ChartData = opts.Chartdata,
Datalen = ChartData.length,
// o espaçamento entre várias colunas
columnspace = 3,
// soma de todos os intervalos em uma posição
columnpadding = columnspace * datalen + columnspace,
// a largura de cada coluna
columnSize = self.opts.Charts.Panel === 'x'
? Número (((draw.xpices - columnpadding) / datalen) .tofixed (0))
: Número ((((draw.ypices - columnpadding) / datalen) .tofixed (0));
cada (ChartData, função (i, o) {
var dados = o.data,
id = 'gráfico' + i,
isx = opts.Charts.Panel === 'x',
colGroup = self.group (id) .appendto (),
// A posição inicial de cada ponto
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 <l; j ++) {
if (dados [j] === null) continuar;
// se for uma placa lateral
if (isx) {
var x = número ((start + j *draw.xpices) .tofixed (0)),
y = número ((draw.starty-draw.jianjuy) .tofixado (0)),
altura = número ((dados [j] * (draw.ypices / draw.feed) -draw.jianjuy) .tofixed (0)),
caminho = [
M,
x,
y,
L,
x,
y -peso,
L,
x + colunSize,
y - altura,
L,
x + colunSize,
y,
selo
];
var pos = [x+colunSize/2, dados [j]> 0? y-height: draw.starty-draw.jianjuy];
}outro{
var x = número ((draw.startx+draw.jianjux) .tofixed (0)),
largura = número ((dados [j]*((draw.xpices / draw.feed))-draw.jianjux) .tofixed (0)),
y = número ((Iniciar - (j+1) *draw.ypices) .tofixado (0)),
caminho = [
M,
x,
y,
L,
x+largura,
y,
L,
x + largura,
y + colunSize,
L,
x,
y+ colunSize,
selo
];
var pos = [draw.startx+draw.jianjux+width/2, y];
}
self.basedraw.path (self, {
Border: 0,
Isfill: verdadeiro,
FillColor: O.Color,
Opacidade: 1,
Caminho: caminho
})
.attr ({data: dados [j], pos: pos [0]+'-'+pos [1]})
.css ({zindex: 5, cursor: 'Pointer'})
.on ('mouseOver', (função (d) {
Return function () {
this.setOpacity (0,85);
var pos = this.attr ('pos'). split ('-')
self.showtooltip (o, pos [0], pos [1], this.attr ('dados'));
}
}) (dados [j])
)
.on ('mouseout', function () {
this.setOpacity (1);
})
.AppendTo (Colgroup);
}
});
devolver isso;
},
drawpie: function () {
var self = this,
opts = this.opts,
área = opts.area,
rx = área.centerx,
ry = área.centery,
Inc = 0,
total = 0,
dados = [],
Cumulativo = -0,25, // Comece na parte superior;
circ = 2 * math.pi,
radiu = mathmin (opts.Charts.Radius, Mathmin (área.areawidth/2, área.areaHeight/2)),
fração,
Half_fraction;
cada (opts.Chartdata, função (i, o) {
typeof o.data === 'objeto'
? (data.push ((função (o) {
var all = 0;
para (var i em o)
tudo+= ~~ O [i]
Devolver tudo
}) (O.Data)))
: Data.push (Mathabs (O.Data))
});
cada (dados, função (i, o) {
TOTAL = TOTAL + O;
});
cada (dados, função (i, o) {
var piegroup = self.group ('Chart'+i) .appendto (),
s = inc/total*360,
E = (Inc + O)/Total*360,
nome = opts.ChartData [i] .Name,
size = calTextLen(name),
dot = angle(radiu,[rx,ry],s+(es)/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(self,{
config : opts.chartData[i],
s : start,
e : end,
r : radiu,
innerR : 0
})
.css({zIndex:5,cursor:'pointer'})
.attr({move:moveDisplacement,pos:dot[0]+'-'+dot[1]})
.on('mouseover',function(){
this.setOpacity(0.85);
var pos = this.attr('pos').split('-');
self.showTooltip(opts.chartData[i],pos[0],pos[1],((es)/360*100).toFixed(0)+'%')
})
.on('mouseout',function(e){
var elem = e.toElement || e.relatedTarget;
//如果碰到里面的文本或者是提示框不消失
if(!elem||contains(this[0].parentNode,elem)||contains(self.tipC[0],elem))
retornar;
self.hideTooltip();
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('+','')});
}outro{
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(self,{
x : x,
y : y,
fill : '#fff',
'text-anchor':'left'
})
.css({
fontFamily : 'Verdana,Arial,Helvetica,sans-serif',
fontSize : '12px',
Posição: 'Absoluto',
color : '#fff',
cursor : 'pointer',
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)),
fração,
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;
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,
id = 'chart'+j,
piesGroup = self.mainGroup[id]?self.mainGroup[id].chart:self.group(id).appendTo();
!self.mainGroup[id]
&&(self.mainGroup[id] = {chart:piesGroup,show:true});
inc = inc + value;
varname = o.name,
size = calTextLen(name),
dot = angle(radiu,[rx,ry],s+(es)/2,2),
showDot = angle(radiu- Rpice * i,[rx,ry],s+(es)/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(self,{
config : o,
s : start,
e : end,
r : outR,
innerR : innerR
})
.attr({m : i+'-'+j,data:((es)/360*100).toFixed(0)+'%',pos:showDot[0]+'-'+showDot[1]})
.css({zIndex:5,cursor:'pointer'})
.on('mouseover',function(){
this.setOpacity(0.85);
var pos = this.attr('pos').split('-');
self.showTooltip(o,pos[0],pos[1],this.attr('data'))
})
.on('mouseout',function(e){
var elem = e.toElement || e.relatedTarget;
if(!elem||elem.getAttribute('m')===this[0].getAttribute('m'))
retornar;
this.setOpacity(1);
})
.appendTo(piesGroup);
self.baseDraw.span(self,{
x : x,
y : y,
fill : '#fff',
'text-anchor':'left'
})
.attr({m : i+'-'+j})
.css({
fontFamily : 'Verdana,Arial,Helvetica,sans-serif',
fontSize : '12px',
Posição: 'Absoluto',
color : '#fff',
cursor : 'pointer',
zIndex : 10
})
.addText(name)
.appendTo(piesGroup);
});
});
},
drawSegment : function(){
var self = this,
opts = this.opts,
draw = opts.draw,
chartData = opts.chartData,
typeIsX = opts.charts.panel==='x',
columnPad = 5,
prev = [],
columnSize = ~~(typeIsX?draw.xPices:draw.yPices) - columnPad * 2;
each(chartData,function(i,c){
if(i in self.hideList)
retornar;
var id = 'chart' + i,
segmentGroup = self.mainGroup[id]?self.mainGroup[id].chart:self.group(id).appendTo();
self.mainGroup[id] = {chart : segmentGroup,show : true};
each(c.data,function(j,d){
if(d===null||d===0)
retornar;
if(typeIsX){
var start = draw.startX + columnPad,
x = ~~(start + j*draw.xPices).toFixed(0),
y = ~~(draw.startY-(prev[j]?prev[j]:0)).toFixed(0),
size = ~~(d*draw.yPices / draw.feed ).toFixed(0),
path = [
M,
x,
y,
L,
x,
y - size,
L,
x + columnSize,
y - size,
L,
x + columnSize,
y,
selo
];
var pos = [x + columnSize/2,y-size];
}outro{
var start = draw.startY - columnPad,
x = ~~(draw.startX+(prev[j]?prev[j]:0)).toFixed(0) ,
y = ~~(start- j*draw.yPices).toFixed(0),
size = ~~(d*draw.xPices / draw.feed ).toFixed(0),
path = [
M,
x,
y,
L,
x + size,
y ,
L,
x + size,
y - columnSize,
L,
x ,
y - columnSize,
selo
];
var pos = [x+size/2,y - columnSize];
}
self.baseDraw.path(self,{
border : 0,
isfill : true,
fillColor : c.color,
opacity : 1,
path : path
})
.attr({data:d,pos:pos[0]+'-'+pos[1]})
.on('mouseover',function(){
this.setOpacity(0.85);
var pos = this.attr('pos').split('-');
self.showTooltip(chartData[i],pos[0],pos[1],this.attr('data'))
})
.on('mouseout',function(){
this.setOpacity(1);
})
.css({zIndex:5,cursor:'pointer',left:'0px',top:'0px'})
.appendTo(segmentGroup);
prev[j]
? prev[j] = prev[j] + size
: prev[j] = size;
});
});
},
baseDraw : {
rect : function(o,config){
return o.createElement('rect')
.attr({
rx : config.arc*30 || 5,
ry : config.arc*30 || 5,
width : config.width || 50,
height : config.height || 50,
fill : config.fill || '#fff',
'fill-opacity' : config.opacity || 0.85,
'stroke-width' : config.border || 2,
stroke : config.borderColor || '#606060',
transform : 'translate('+(config.left||0)+','+(config.top||0)+')'
});
},
text : function(o,config){
return o.createElement('text')
.attr(config);
},
span : function(o,config,v){
return o.createElement('text')
.attr(config)
.attr({
y : config.y+(v||15)
});
},
path : function(o,config){
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 o.createElement('path')
.attr(set);
},
circle : function(o,config){
var set = {};
set.cx = config.x;
set.cy = config.y;
set['stroke-width'] = 0;
set.stroke = config.borderColor || '#C0C0C0';
set.r = config.r;
set.fill = config.fillColor;
return o.createElement('circle')
.attr(set);
},
square : function(o,config){
var x = config.x,
y = config.y,
r = config.r,
color= config.fillColor,
len = r,
path = [
M,
(x-len).toFixed(0),
(y-len).toFixed(0),
L,
(x+len).toFixed(0),
(y-len).toFixed(0),
(x+len).toFixed(0),
(y+len).toFixed(0),
(x-len).toFixed(0),
(y+len).toFixed(0),
selo
];
return o.baseDraw.path(o,{
border : 1,
borderColor : color,
isfill : true,
fillColor : color,
path : path
});
},
triangle : function(o,config){
var x = config.x,
y = config.y,
r = config.r+0.1,
color = config.fillColor,
path = [
M,
x.toFixed(0),
(y-1.33*r).toFixed(0),
L,
(x+r).toFixed(0),
(y+0.67*r).toFixed(0),
(xr).toFixed(0),
(y+0.67*r).toFixed(0),
selo
];
return o.baseDraw.path(o,{
border : 1,
borderColor : color,
isfill : true,
fillColor : color,
path : path
});
},
diamond : function(o,config){
var x = config.x,
y = config.y,
r = 1.35*config.r,
color = config.fillColor,
path = [
M,
x.toFixed(0),
(yr).toFixed(0),
L,
(x+r).toFixed(0),
y.toFixed(0),
x.toFixed(0),
(y+r).toFixed(0),
(xr).toFixed(0),
y.toFixed(0),
selo
];
return o.baseDraw.path(o,{
border : 1,
borderColor : color,
isfill : true,
fillColor : color,
path : path
});
},
pie : function(o,config){
//config,s,e,r,index
var opts = o.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 < Math.PI ? 0 : 1,
path = [
M,
rx + r * cosStart,
ry + r * sinStart,
'UM',
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 o.baseDraw.path(o,{
border : 1,
border : '#fff',
isfill : true,
fillColor : color,
opacity : 1,
path : path
})
}
}
};
//---------------------------------------------------------------------------------------------------
//如果是vml 修改smipleChart.prototype中的一些方法
!hasSVG
&&extend(smipleChart.prototype.baseDraw,{
rect : function(o,config){
var attr = {},
css = {};
attr.arcsize = config.arc || 0.2 +'';
if(config.fill==='none'){
attr.filled = 'f'
}outro{
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 o.createElement('roundrect')
.attr(attr)
.css(css);
},
text : function(o,config){
return o.createElement('TextBox')
.attr({inset : "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;
}outro{
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 = 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];
}
retornar 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 ? 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 o.baseDraw.path(o,{
border : 1,
border : '#fff',
isfill : true,
fillColor : color,
opacity : 1,
path : path
})
}
});
//---------------------------------------------------------------------------------------------------
})(documento);
window.onload = function(){
var t = new Date().getTime();
var config = {
charts : {
type : 'line',
radius : 150,
panel : 'x',
estilo: {
fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font
fontSize: '12px'
}
},
título: {
text: '线性图表',
y: 10,
estilo: {
color: 'black',
fontSize: '16px'
}
},
subTitle : {
text: '线性图表副标题',
y: 35,
estilo: {
color: '#111',
fontSize: '12px'
}
},
lenda : {
enable : true,
//type : 'lateral', // lateral 横向或lengthwise 纵向
type : 'lateral',
pos : [10,10],
estilo:{
fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font
fontSize : '12px',
magin : '0px'
}
},
yUnit : {
text : '线性图表侧标题',
x : 20,
estilo: {
color : '#111',
fontSize : '12px'
}
},
xUnit : {
units: [
'Janeiro',
'Fevereiro',
'Marchar',
'Abril',
'Poderia',
'Junho',
'Julho',
'Agosto',
'Setembro',
'Outubro',
'Novembro',
'Dezembro'
]
},
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>
Outro
The problem of JS floating point accuracy is difficult to solve. . . . . . . . .
I hope you can give me some advice on limited level. . . . . . .