Soporte de la gráfica de gráficos lineal gráfico de histograma
Admite múltiples navegadores
SVG VML usado
La copia del código es la siguiente:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> smiplechart </title>
<style type = "text/css">
.cc {
Altura: 450px; Ancho: 800px; borde: 1px Solid #999; Posición: relativo; margen: 20px;
}
</style>
</ablo>
<Body>
<div id = 't'> </div>
<div id = 't1'> </div>
<div id = 'línea'> </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 = 'pastel'> </div>
<div id = 'Pies'> </div>
<div id = 'vv' style = 'altura: 300px; Ancho: 520px; '> </div>
<script type = "text/javaScript">
(función (doc, indefinido) {
var win = esto,
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.opora,
ruta = Hassvg? 'D': 'ruta',
sello = Hassvg? 'Z': 'E',
matemáticas = matemáticas,
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 objetivo = argumentos [0] || {}, i = 1, longitud = argumentos.length, profundo = true, opciones;
if (typeof Target === "Boolean") {
profundo = objetivo;
objetivo = argumentos [1] || {};
i = 2;
}
if (typeof Target! == "Object" && object.prototype.tostring.call (target)! = "[función de objeto]")
objetivo = {};
para (; i <longitud; i ++) {
if ((opciones = argumentos [i])! = nulo)
para (nombre var en opciones) {
var src = target [name], copy = options [name];
if (Target === Copy)
continuar;
if (profundo && copy && typeof Copy === "Object" &&! Copy.nodeType) {
Target [name] = arguments.callee (profundo, src || (copy.length! = null? []: {}), copiar);
}
más if (copia! == Undefined)
objetivo [nombre] = copia;
}
}
objetivo de retorno;
};
win.each = function (objeto, devolución de llamada, args) {
nombre var, i = 0, longitud = objeto.length;
if (args) {
args = array.prototype.slice.call (argumentos) .slice (2);
if (longitud === indefinido) {
para (nombre en el objeto)
if (callback.apply (objeto [nombre], [nombre, objeto [nombre]]. Concat (args)) === Falso)
romper;
} demás
para (; i <longitud; i ++)
if (callback.apply (objeto [i], [i, objeto [i]]. concat (args)) === falso) //
romper;
} demás {
if (longitud === indefinido) {
para (nombre en el objeto)
if (callback.call (objeto [nombre], nombre, objeto [nombre]) === falso)
romper;
} demás
for (valor var = objeto [0];
i <longitud && callback.call (valor, i, valor)! == falso; valor = objeto [++ i]) {}
}
Objeto de retorno;
};
win.contains = function (p, c) {
if (! p ||! c) devolver falso;
if (p === c) return true;
Regreso ISIE
? P.Contains (C)
: p.comparedocumentPosition (c) == 20
? verdadero
: FALSO;
};
// ---------------------------------------------------------------
function ProcessPoint (x) {
¿Volver a ISIE? ~~ x.tofixed (0): ~~ x.tofixed (0) + 0.5;
};
función calTextLen (txt, cssstr) {
var span = doc.createElement ('span');
if (cssstr) {
typeof cssstr === 'cadena'
? span.style.csstext = CSSSTR
: extender (span.style, cssstr);
}demás{
extender (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 ancho = span.offsetwidth,
altura = span.offsetheight;
doc.body.removechild (span);
regreso {W: ancho, h: altura};
};
Angle de función (R, Center, O, Jingdu) {
var hudu = math.pi*2*(o/360),
x = centro [0]+ r*math.sin (hudu),
y = centro [1]+ -r*math.cos (hudu);
return [x.tofixed (jingdu || 0), y.tofixed (jingdu || 0)];
}
función xx (a, b, lino) {
var t = 1000,
stf = ((b*ta*t)/lino)/t,
arr = [1,2,2.5,5,10],
c = 1,
v;
// La cardinalidad de la línea divisoria es [1, 2, 2.5, 5, 10] Este paso es averiguar a qué rango pertenece el intervalo
if (stf <arr [0]) {
while (stf <arr [0]) {
C = C*10;
arr [0] = arr [0]/c;
}
Cada ([1,2,2.5,5,10], función (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], función (i, o) {
arr [i] = o*c;
});
}
// Siga el intervalo para encontrar el más cercano en el intervalo
cada uno (arr, function (i, o) {
if (stf <= o) {
V = O;
devolver 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;
// Mira cuántas líneas quedan y no se dibujan
var num = Math.max (0, Linenum - Math.round ((BA)/V));
if (a> = 0) {
// Coordinar comparación entero
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)
romper;
}
}
if (num! = 0) {
while (num! == 0) {
b = (b*t+v*t)/t
num--;
}
}
}demás{
// Coordinar comparación entero
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)
romper;
}
}
if (num! = 0) {
while (num! == 0) {
a = (a*tv*t)/t
num--;
}
}
}
return {min: a, max: b, stf: v};
}
// -----------------------------------------------------------------------------------------------------------
// Crear algunas creaciones de elementos SVG VML y eliminar estilos de atributo == Algunas operaciones
win.vector = function () {};
vector.prototype = {
$ C: function (gráfico, nombre nodo) {
this.Element = this [0] = Doc.CreateElementNs ('http://www.w3.org/2000/svg', nodename);
this.graphic = Graphic;
devolver esto;
},
attr: function (hash, val) {
var elem = this.Element,
llave,
valor;
if (typeof hash === 'string') {
if (val === indefinido) {
return elem.getAttribute (hash);
}demás{
Elem.SetAttribute (hash, val);
devolver esto;
}
} demás {
para (clave en el hash) {
valor = hash [clave];
if (key === ruta) {
valor && value.Join
&& (valor = valor.join (''));
/(Nan | |^$)/. Test (valor)
&& (valor = 'm 0 0');
}
Elem.SetAttribute (clave, valor)
}
}
devolver esto;
},
CSS: function (hash) {
para (clave var en hash) {
isie && key == "Opacidad"
? este [0] .style ['filtre'] = "alfa (opacidad ="+ hash [clave] * 100+ ")"
: this [0] .style [clave] = hash [clave];
}
devolver esto;
},
on: function (eventname, handler) {
var self = this;
/*This.element.adDeventListener(EventName,Function () {
Handler.call (yo)
},FALSO);*/
this.Element ['on' + eventName] = function (e) {
E = E || win.event;
handler.call (self, e);
}
devolver esto;
},
appendTo: function (parent) {
if (parent) {
padre.
? parent.element.appendChild (this.Element)
: parent.appendchild (this.Element)
} demás {
this.graphic.container.appendchild (this.element);
}
devolver esto;
},
addText: function (str) {
var elem = this.element;
if (elem.nodename === 'text') {
elem.appendChild (doc.createTextNode (str+'' '));
}
devolver esto;
},
setOpacity: function (v) {
this.Attr ('Fill-Opacity', V);
devolver esto;
},
setSize: function (v) {
esto [0] .nodename === 'círculo'
? this.attr ('r', 4+(v === 0? 0: 2))
: this.attr ({'Stroke-width': V});
devolver esto;
},
tofront: function () {
este [0] .ParentNode.AppendChild (este [0]);
devolver esto;
},
show: function () {
this [0] .style.display = 'bloque';
devolver esto;
},
ocultar: function () {
esto [0] .style.display = 'Ninguno';
devolver esto;
},
destruir: function () {
// destruir nodos ............
nodo var = this [0] || este;
node.onmouseover = node.onmouseout = node.onclick = null;
node.parentnode
&& node.parentnode.removechild (nodo);
devolver esto;
}
};
// ---------------------------------------------------------------------------------------------------------------
// -----------------------------------------------------------------------------------------------
// Si es VML modificar algunos de estos métodos
if (! Hassvg) {
// -------------------------------------------------------------------------------------------------------------------------
doc.createstylesheet (). addrule (". vml", "comportamiento: url (#predeterminado#vml); visual
! doc.namespaces.vml &&!+"/v1";
doc.namespaces.add ("vml", "urn: schemas-microsoft-com: vml");
// -----------------------------------------------------------------------------------------------
extender (vector.prototype, {
$ C: function (gráfico, nombre nodo) {
Var Name = NodeName || 'forma';
this.Element = this [0] = (name === 'Div' || name === 'span')
? doc.createElement (nombre)
: doc.createElement ('<vml:'+name+'>');
this.graphic = Graphic;
devolver esto;
},
/*ON: function (eventName, Handler) {
var self = this;
this.element.attachevent ("on" + eventname, function () {
handler.call (yo);
});
devolver esto;
},*/
addText: function (txt) {
esto [0] .innerhtml = txt || '';
devolver esto;
},
setSize: function (v) {
esto [0].
devolver esto;
},
setOpacity: function (v) {
this.opacity.opacity = v;
devolver esto;
}
});
}
// -----------------------------------------------------------------------------------------------
// Categoría de dibujo
// ------------------------------------------------------------
win.smiplechart = function () {
this.init.apply (this, argumentos);
};
smilechart.list = [];
smilechart.timer = null;
smilechart.lazyload = function (id) {
id = id || '0'
smilechart.list [id]
&& smiplechart.list [id] .loadMe ();
};
smilechart.prototype = {
Opciones: {
gráficos: {
Paddingright: 20,
Radio: 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',
Fontweight: 'Bold'
}
},
Subtítulo: {
texto: '',
Y: 30,
estilo: {
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
FontSize: '12px',
Color: '#111'
}
},
yunit: {
texto : '',
estilo: {
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
FontSize: '12px',
Color: '#111'
},
Lino: 10
}
},
init: function (contenedor, opciones) {
ClearTimeOut (smiplechart.timer)
var self = this;
this.Width = Container.OffSetWidth;
this.Height = Container.OffSetheight;
this.currlist = {};
this.uuuid = ++ uuuid;
this.timer = null;
// La forma principal de colección del grupo de dibujo
// {id: {dom: xx, show: true}}
this.maingroup = {};
// Lo que debe usarse al segmentar es saber cuáles están ocultos porque implica volver a dibujar
this.hidelist = {};
// El dibujo en SVG debe tener una etiqueta SVG VML y usar Div
this.container = Hassvg
? New Vector (). $ C (1, 'SVG')
.attr ({
xmlns: 'http://www.w3.org/2000/svg',
Versión: '1.1',
Ancho: this.width,
Altura: esto.
})
.css ({FontSize: '12px'})
.Appendto (contenedor)
: new Vector (). $ C (1, 'div')
.css ({
FontSize: '12px',
Ancho: this.Width +'PX',
Altura: this.Height+'PX'
})
.Appendto (contenedor);
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 = extend (true, {}, this.options),
opts = this.opts = extend (true, c, opciones),
style = extend (opts.charts.style, {
Ancho: this.width,
Altura: esto.
});
smilechart.list [this.uuuid] = this;
smilechart.timer = setTimeOut (function () {
smilechart.lazyload ();
}, 200);
},
loadMe: function () {
var opts = this.opts,
Self = esto,
type = opts.charts.type;
this.container = this.container
.on ('mouseout', function (e) {
var elem = e.relatedTarget || E.Toelement;
if (! contiene (this [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: 'none'}) [0];
// algunos parámetros requeridos al calcular la placa de dibujo
this.getDrawarea ()
.CreateToolTip () // Crear un cuadro para obtener información rápida
.Drawtitle () // dibuja el título
// Dibuja el plato
'Línea, área, PIE'.Indexof (Tipo)> = 0
&& (opts.charts.panel = 'x');
'Pie, Pies'.indexof (tipo) <0
&& this.drawpanel ();
this.drawlegend (opts.legend.type); // dibujar barras de bloques de color
type var = {
Línea: 'Drawline',
Área: 'Drawarea',
Columnas: 'DrawColumns',
Pie: 'Drawpie',
Pies: 'Drawpies',
Segmento: 'Drawsegment'
} [opts.charts.type];
// Empiece a dibujar .........
este [tipo] ();
// Eliminar nodo
this.loading.parentnode.removechild (this.loading);
// desconectar la referencia
this.loading = null;
this.container.style.display = '';
setTimeOut (function () {
smilechart.lazyload ((++ self.uuuid)+'');
}, 10)
},
createElement: function (nodename) {
devolver nuevo vector (). $ C (this, NodeName);
},
grupo: function (nombre) {
devuelve this.createElement (hasSvg? 'g': 'div'). attr ('mark', nombre);
},
getDrawarea: function () {
var opts = this.opts,
ancho = this.width,
altura = this.Height,
title = Opts.title,
subtítulo = opts.subtitle,
área = {
// Retire el ancho de texto de escala en el lado izquierdo del eje de coordenadas (estimado) 80 es el valor fijo y solo se deja 80 al lado izquierdo del valor fijo.
Area Width: Ancho - 80,
// Retire la altura del texto y las marcas debajo del eje
área de área: altura - 40,
// La posición x del origen se calculará a continuación
startx: 0,
// La posición y del origen se calculará a continuación
Starty: 0,
// Al dibujar un gráfico de pastel con la coordenada X del centro, debe conocer la posición del centro del círculo.
CenterX: 0,
// Al dibujar un gráfico de pastel con la coordenada Y en el centro, debe conocer la posición del centro del círculo.
Centery: 0
};
// Si el título principal existe, reste la altura del título principal de lo contrario, reste la altura de 10
área.areaheight -= (title.text! == '')
? título.y
: 10;
// Retire la altura del subtítulo
área.areaheight -= (subtitle.text! == '')
? subtítulo.y
: 10
área.startx = 80;
área.Starty = altura - 40;
// La posición del centro del círculo
área.centerx = ancho / 2;
área. Centería = altura / 2;
// deja algo de espacio a la derecha
Área. Azuelo -= 20;
// deja algo de espacio en la parte superior
área.
opts.area = área;
devolver esto;
},
DrawTitle: function () {
var opts = this.opts,
Self = esto,
arr = [opts.title, opts.subtitle, opts.yunit],
// Parámetros básicos de la posición de 3 coordenadas de título
config = [
{
x: this.width / 2,
Y: opts.title.y
},
{
x: this.width / 2,
Y: opts.subtitle.y
},
{
x: opts.yunit.x,
Y: esto.
}
]
tpanel = this.group ('título')
.AppendTo ();
cada uno (arr, function (i, title) {
var text = title.Text;
if (text) {
var elem = self.basedraw.span (self, {
'Text-amplio': 'izquierda',
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 (texto)
.appendto (tpanel);
// Si es 2, significa que el subtítulo se usa para ponerlo verticalmente
if (i === 2) {
Hassvg
? elem.attr ({transform: 'Rotate (270,'+(opts.yunit.x+10)+','+self.height / 2+')'})
: (elem.element.style.filter = 'progid: dximagetransform.microsoft.basicimage (rotación = 3)')
}
}
});
devolver esto;
},
// Dibujar placas es más problemático
drawpanel: function (type) {
varopts = this.opts,
Self = esto,
área = opts.area,
ChartStype = opts.charts.type,
issegment = chartstype === 'segmento',
// es el tipo de placa horizontal o vertical
type = opts.charts.panel || 'incógnita';
// Placa inferior
var draweawidth = área.areawidth,
drawAreaHeight = Area.ArEAHEight,
// Las coordenadas del origen
startx = área.startx,
starty = área.Starty;
var Alldata = [],
minvalue = 0,
MaxValue = 10,
// El número de líneas solo puede estar entre 1 y 10
Linenum = Mathmin (10, MathMax (opts.yunit.linenum, 1)),
personal;
// Combinando todos los datos
cada uno (opts.chartData, function (i, o) {
// Si es un gráfico de barras, se suta para todos los datos
segmento
? cada uno (o.data, función (j, d) {
Alldata [J]
? Alldata [J] = Alldata [J] + (~~ D)
: alldata [j] = ~~ d;
})
: alldata = alldata.concat (o.data)
});
// Ordenar todos los datos para encontrar el valor máximo y el valor mínimo a continuación
alldata.sort (function (a, b) {return AB});
// finaliza el valor máximo y el valor mínimo
maxValue = Alldata [Alldata.length - 1];
cada uno (Alldata, function (i, o) {
if (o! == null) {
minvalue = o;
devolver falso;
}
});
// contenedor de placa principal
panel var = this.group ('panel'). appendTo ();
resultado var = xx (minvalue, maxvalue, lino),
min = resultado.min,
max = resultado.max,
f = resultado.stf;
segmento
&& (min = 0);
// significa que se dibuja la coordenada horizontal o la doble coordenada
if (type.tolowercase () === 'x') {
// intervalo de unidad subterránea
varxpices = drawAreawidth / opts.xunit.units.length,
// El punto central del intervalo unitario
offset = xpices / 2,
ypices = drawAreaHeight / Linenum;
// -----------------------------------------------------------------------------------------------
var y = Hassvg? 5: 10,
t = 1000,
durar;
cada uno (opts.xunit.units, function (i, d) {
self.basedraw.path (self, {
borde: 1,
BorderColor: '#C0C0C0',
ISFILL: FALSO,
camino : [
METRO,
ProcessPoint (startx + (i * xpices)),
ProcessPoint (Starty),
L,
ProcessPoint (startx + (i*xpices)),
ProcessPoint (Starty + 5)
]
}).
appendTo (panel);
span = self.basedraw.span (self, {
x: startx + offset + (i * xpices),
Y: Starty+Y,
'Text-Blankor': 'Middle'
})
.css ({
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
FontSize: '12px'
})
.addtext (opts.xunit.units [i])
.AppendTo (panel) [0];
! Hassvg
&& (span.style.left = parseint (span.style.left) - span.offsetwidth/2+'px');
});
// -----------------------------------------------------------------------------------------------
para (i = 0; i <= linenum; i ++) {
self.basedraw.path (self, {
borde: 1,
BorderColor: '#C0C0C0',
ISFILL: FALSO,
Ruta: [M, StartX, ProcessPoint (Starty - (i * ypices)), L, ProcessPoint (startx + draweaAreawidth), ProcessPoint (starty - (i * ypices))]]
})
.css ({zindex: -10})
.appendto (panel);
var span = self.basedraw.span (self, {
x: startx - 15,
y: starty - i * ypices -calTextLen (min+i * f+''). H/2,
'Text-Blankor': 'Middle'
})
.css ({
'Font-Family': 'Verdana, Arial, Helvetica, Sans-Serif',
'Font-Size': '12px',
Ancho: '40px',
Pantalla: 'Bloque',
textalign: 'correcto'
})
.addtext ((min*t+(i*t*f/t)*t)/t+'')
.AppendTo (panel) [0];
if (! Hassvg) {
span.style.top = parseint (span.style.top) + span.offsetheight/2 -5 + 'px';
span.style.left = parseint (span.style.left) -35+'px'
}
}
}demás{
// intervalo de unidad subterránea
VaryPices = DrawAraAhEight / (opts.xunit.units.length),
// El punto central del intervalo unitario
offset = Math.round (ypices / 2),
x = Hassvg? 25: 70,
y = Hassvg? 0: 5,
durar
cada uno (opts.xunit.units, function (i, d) {
self.basedraw.path (self, {
borde: 1,
BorderColor: '#C0C0C0',
ISFILL: FALSO,
camino : [
METRO,
ProcessPoint (startx-5),
ProcessPoint (starty-i * ypices),
L,
ProcessPoint (startx),
ProcessPoint (starty-i * ypices),
]
})
.appendto (panel);
span = self.basedraw.span (self, {
x: startx - x,
y: starty -i * ypices offset-calTextLen (d) .h/2 + y,
'Text-Blankor': 'Middle'
})
.css ({
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
FontSize: '12px',
Ancho: '60px',
textalign: 'correcto'
})
.addtext (d)
.Appendto (panel)
});
var xpices = drawAReaWidth / Linenum;
para (var i = 0; i <= linenum; i ++) {
self.basedraw.path (self, {
borde: 1,
BorderColor: '#C0C0C0',
ISFILL: FALSO,
camino : [
METRO,
ProcessPoint (startx + (i * xpices)),
ProcessPoint (Starty),
L,
ProcessPoint (startx + (i*xpices)),
ProcessPoint (Starty - DrawEAHEight)
]
}).
appendTo (panel);
self.basedraw.span (self, {
x: startx - calTextLen (min+i * f+''). w/2+i * xpices,
Y: Starty,
'Text-amplio': 'izquierda'
})
.css ({
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
FontSize: '12px'
})
.addtext (min+i*f+'')
.appendto (panel);
}
}
// -------------------------------------------------------------------------------------------------
// Debido a que el punto de partida probablemente no se inicia desde 0, por lo que el valor de la Parte 0 debe agregarse en el punto 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 punto de partida del eje
Starty: Starty, // y punto de partida del eje
xpices: xpices, // ancho de cada parte del eje x
Ypices: Ypices, // El ancho de cada porción del eje Y
Offset: Offset, // x Punto central de rama única Offset
jianjuy: jianju*ypices/f,
Jianjux: jianju*xpices/f,
Feed: f // cuántos por eje por y hay
}
devolver esto;
},
CreateToolTip: function () {
// un grupo
this.tipc = this.group ('tip')
.css ({Zindex: 200, altura: '20px', ancho: '20px', posición: 'absoluto'})
.AppendTo ()
.esconder()
// dibujar un marco basado
this.tipbox = this.basedraw.rect (this, {arc: 0.22, relleno: '#ffff', border: 2, borderColor: '#606060'})
.appendto (this.tipc)
// porque G en SVG se puede colocar directamente, pero el grupo de representación en VML es muy lento, por lo que el DIV cambia, por lo que el padre aquí no es lo mismo que el extranjero
var p = isie? this.tipbox: this.tipc;
this.tiptxtContainer = this.basedraw.text (this, {relleno: '#000000', x: 5, y: 19, 'Text-anchor': 'Left'})
.css ({
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
FontSize: '12px',
Antecedentes: '#fff'
})
.appendto (p);
this.tiptext = doc.createTextNode ('');
this.tiptxtContainer [0] .AppendChild (this.tiptext);
devolver esto;
},
showtooltip: function (obj, x, y, data) {
/*var txt = obj.name + ':' + datos,
size = calTextLen (txt, this.tiptxtContainer [0] .style.csstext),
pos = {x: x - (size.w + 5 * 2)/2, y: y - 32};
this.tipc
.tofront ()
.espectáculo();
if (HasSvg) {
this.tipc.attr ({transform: 'traduce ('+pos.x+','+pos.y+')'});
this.tipbox
.attr ({ancho: size.w + 5 * 2, altura: size.h + 5 * 2, trazo: obj.color || '#606060'});
}demás{
this.tipc.css ({izquierda: pos.x, top: pos.y});
this.tipbox
.css ({ancho: 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 + ':' + datos,
Self = esto,
size = calTextLen (txt, this.tiptxtContainer [0] .style.csstext),
pos = {x: x - (size.w + 5 * 2)/2, y: y - 32};
if (HasSvg) {
self.tipbox
.attr ({ancho: size.w + 5 * 2, altura: size.h + 5 * 2, trazo: obj.color || '#606060'});
}demás{
self.tipbox
.css ({ancho: 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 === 'none') {
Hassvg
? self.tipc.attr ({transform: 'traduce ('+pos.x+','+pos.y+')', pos: pos.x+'-'+pos.y})
: self.tipc.attr ({pos: pos.x+'-'+pos.y}). css ({izquierda: pos.x, top: pos.y});
this.tipc
.tofront ()
.espectáculo();
}demás{
var movimiento = 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 = moverse (t, ~~ b [1], (~~ c [1])-(~~ b [1]), d);
Hassvg
? self.tipc.attr ({transform: 'traduce ('+x+','+y+')', pos: x+'-'+y})
: self.tipc.attr ({pos: x+'-'+y}). css ({izquierda: x, top: y});
}demás{
ClearTimeOut (self.timer);
}
}, 1);
};
},
Hidetooltip: function () {
this.tipc.hide ();
},
Shrawlegend: function (type, redraw) {
var self = this,
opts = this.opts,
isline = opts.charts.type === 'línea',
// el tamaño del bloque de color
t_width = 20,
T_HEight = 20,
// Distancia entre bloques
t_space = 5,
datas = opts.chartdata,
len = dataS.length,
css = opts.legend.style,
// Si la longitud máxima es longitudinal, se requiere la longitud máxima
maxwidth = 10,
MaxHeight = 30,
// La ubicación de esta cosa
orig_pos = opts.legend.pos? opts.legend.pos: [2,2],
// Mostrar funciones de grupo oculto
Handle = function (i) {
var g = self.maingroup ['gráfico'+i],
issegment = opts.charts.type === 'segmento';
if (g.show) {
g.chart.hide ();
g.show = falso;
Hassvg
? this.attr ({relleno: '#ccc'})
: this [0] .style.color = '#ccc';
// Si se trata de una imagen segmentada, implicará volver a dibujar.
if (issegment) {
self.hidelist [i] = '';
var maingroup = self.maingroup;
para (nombre var en Maingroup) {
var parent = maingroup [name] .chart,
nodos = parent [0] .childnodes,
len = nodo.length;
// destruir las cosas dibujadas en la imagen
para (var i = len-1; i> = 0; i-) {
vector.prototype.destroy.call (nodos [i])
}
}
// repintar
self.drawsegment ();
}
}demás{
g.chart.show ();
g.show = verdadero;
Hassvg
? this.attr ({relleno: '#000'})
: this [0] .style.color = '#000'
if (issegment) {
eliminar self.hidelist [i];
var maingroup = self.maingroup;
para (nombre var en Maingroup) {
var parent = maingroup [name] .chart,
nodos = parent [0] .childnodes,
len = nodo.length;
para (var i = len-1; i> = 0; i-) {
vector.prototype.destroy.call (nodos [i])
}
}
self.drawsegment ();
}
}
},
arr = [];
type = type || 'lateral';
var legendPanel = self.group ('leyenda')
.AppendTo ();
if (type === 'lateral') {
// Si es horizontal
var top = Orig_pos [1] + 5,
th = Hassvg? 0: 3,
izquierda = orig_pos [0] + 5;
cada uno (datos, función (i, d) {
izquierda = i === 0? Izquierda: t_space+izquierda;
// Calcule la ubicación de todas las izquierdas
// Si es un diagrama lineal, dibuje el dibujo en forma de un diagrama lineal
if (isline) {
self.basedraw.path (self, {
borde: 1.5,
Bordercolor: D.Color,
ISFILL: FALSO,
camino : [
METRO,
izquierda.tofixed (0),
(arriba+10) .tofixed (0),
L,
(izquierda+25) .tofixed (0),
(arriba+10) .tofijo (0)
]
})
.appendto (LegendPanel);
self.basedraw [d.dottype || 'Circle'] (Self, {
x: izquierda+12,
Y: Top+10,
R: 4,
FillColor: D.Color
})
.appendto (LegendPanel);
}demás{
self.basedraw.rect (self, {
arco: 0.1,
Relleno: D.Color,
borde: 1,
Bordercolor: D.Color,
Izquierda: Izquierda,
arriba: arriba,
Ancho: t_width+'px',
Altura: T_HEight+'PX'
})
.Appendto (LegendPanel)
}
izquierda = izquierda + t_width + 2 + t_space;
var w = calTextLen (D.Name, CSS) .W
self.basedraw.span (self, {
'Text-amplio': 'izquierda',
X: Izquierda,
Y: TOP+TH
})
.css (extender (css, {cursor: 'pointer'}))
.on ('hacer clic', function () {
manejar.call (esto, i);
})
.addtext (d.name)
.appendto (LegendPanel);
izquierda = izquierda + W;
});
this.basedraw.rect (this, {
arco: 0.1,
Relleno: 'Ninguno',
borde: 1.5,
BorderColor: '#6666666',
Ancho: izquierda+ t_space- orig_pos [0],
Altura: Maxheight,
Izquierda: Orig_Pos [0],
Top: Orig_Pos [1]
})
.appendto (LegendPanel);
}demás{
var top = Orig_pos [1] + 5,
th = Hassvg? 0: 3,
izquierda = orig_pos [0] + 5;
cada uno (datos, función (i, d) {
superior = i === 0? arriba: t_space + top;
self.basedraw.rect (self, {
arco: 0.1,
Relleno: D.Color,
borde: 1,
Bordercolor: D.Color,
Izquierda: Izquierda,
arriba: arriba,
Ancho: t_width+'px',
Altura: T_HEight+'PX'
})
.appendto (LegendPanel);
var h = calTextLen (d.name, css) .h;
self.basedraw.span (self, {
'Text-amplio': 'izquierda',
x: izquierda+t_width+2+t_space,
Y: TOP+TH
})
.css (extender (css, {cursor: 'pointer'}))
.addtext (d.name)
.on ('hacer clic', function () {
// Si se trata de un gráfico de pastel de múltiples capas, no se puede ocultar
if (opts.charts.type === 'Pies') return;
manejar.call (esto, i);
})
.appendto (LegendPanel);
top = top + h + t_space;
maxwidth = math.max (maxwidth, calTextLen (d.name, css) .w);
});
this.basedraw.rect (this, {
arco: 0.1,
Relleno: 'Ninguno',
borde: 1.5,
BorderColor: '#6666666',
Ancho: MaxWidth+22+15,
Altura: TOP+T_SPACE-ERIG_POS [1],
Izquierda: Orig_Pos [0],
Top: Orig_Pos [1]
})
.appendto (LegendPanel);
}
devolver esto;
},
Drawline: function () {
var self = this,
opts = this.opts,
dibujar = opts.draw;
cada uno (opts.chartData, function (i, o) {
var id = 'gráfico'+i,
linegroup = self.group (id)
.AppendTo ();
self.maingroup [id] = {
Gráfico: LineGroup,
Mostrar: Verdadero
};
ruta var = [m],
datos = o.data,
línea;
para (var i = 0, l = data.length; i <l; i ++) {
if (data [i] == null) {
// Si estos datos no existen y no es la primera ruta de datos, agregue M
if (ruta [Path.length - 1]! == M)
ruta.push (m);
}demás{
// Si no es la primera ruta de datos, agregue L
i! == 0 && path.push ("l");
// Si el primero es nulo y no el primero en eliminar la L
if (i> 0 && data [i - 1] == nulo)
ruta.pop ();
// Calcule la posición de x e y del punto
var x = dibujo.startx + draw.offset + (i * draw.xpices),
y = Draw.Starty - Data [i] * (dibujo.ypices / dibujo.feed);
if (isie) {
x = parseint (x);
y = parseint (y);
}
ruta.push (x);
ruta.push (y);
// dibujar puntos
var dottype = o.dottype || 'círculo';
self.basedraw [dottype] (self, {
x: x,
y: y,
R: 4,
FillColor: O.Color
})
.Attr ({datos: datos [i], pos: x+'-'+(y-5)})
.css ({zindex: 10, cursor: 'Pointer'})
.on ('mouseover', (función (o, x, y) {
Función de retorno () {
if (self.currlist.dot) {
if (self.currlist.dot [0] === esto [0])
devolver;
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);
}
};
// dibujar líneas plegadas
línea = self.basedraw.path (self, {
borde: 1.5,
BorderColor: O.Color,
ISFILL: FALSO,
Camino: camino
})
.css ({zindex: 5})
/*. on ('mouseover', function () {
this.setsize (2.5);
})
.on ('Mouseout', function () {
this.setsize (1.5);
})*/
.on ('click', function () {lineGroup.tofront ();})
.AppendTo (LineGroup);
});
devolver esto;
},
drawarea: function () {
var self = this,
opts = this.opts,
dibujar = opts.draw;
cada uno (opts.chartData, function (i, o) {
var id = 'gráfico' + i,
área de área = self.group (id) .appendTo ();
self.maingroup [id] = {gráfico: área de área, show: true};
// Hay 2 rutas, una es el camino de la región y el otro es el camino de la línea
VAR AreaPath = [M, (Draw.Startx + Draw.OffSet) .tofixed (0), (Draw.Starty-Draw.JianJuy) .tofixed (0)],
ruta = [m],
datos = o.data,
línea;
para (var n = 0, l = data.length; n <l; n ++) {
// Si los datos están vacíos
var len = AreaPath.length;
if (data [n] === null) {
// Si el anterior no es m, entonces dibuje nuevamente, así que agregue M
if (ruta [Path.length - 1]! == M)
ruta.push (m);
// Si el primero o el frente son nulos, modifique las coordenadas del punto de partida
len === 3
&& (AreaPath [1] = (Draw.Startx +(n +1)*Draw.xpices +Draw.OffSet) .tofixed (0));
// Si el anterior no es el gráfico del área del identificador final, si los primeros datos son nulos, la siguiente operación no se realizará
if (AreaPath [Len - 1]! == Seal && n! == 0) {
AreaPath = AreaPath.concat ([[
Area Path [Len - 2],
(dibujo.starty-draw.jianjuy) .tofixed (0),
sello
]);
}
}demás{
n! == 0 && path.push (l);
AreaPath.Push (L);
// Si los datos anteriores son nulos, elimine la L anterior L anterior
if (n> 0 && data [n - 1] == null) {
ruta.pop ();
// Si el primero es nulo, no elimine L
n! == 1 && AreaPath.Pop ();
}
var x = dibujo.startx + draw.offset + (n * draw.xpices),
y = Draw.Starty - Data [n] * (dibujo
if (isie) {
x = parseint (x);
y = parseint (y);
}
ruta.push (x);
ruta.push (y);
if (área de área [len - 1] === sello) {
AreaPath = AreaPath.concat ([[
METRO,
incógnita,
parseint (dibujo.starty-draw.jianjuy),
L,
incógnita,
Y
]);
}demás{
AreaPath.push (x);
AreaPath.push (y);
}
// Si es el último punto
if (n === l - 1) {
AreaPath.push (x);
AreaPath.Push (parseint (sortes
}
// dibujar puntos
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', (función (o, x, y) {
Función de retorno () {
if (self.currlist.dot) {
if (self.currlist.dot [0] === esto [0])
devolver;
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 (Area Group);
}
}
AreaPath.Push (sello)
self.basedraw.path (self, {
Border: 0,
ISFILL: VERDADERO,
FillColor: O.Color,
Opacidad: 0.5,
Camino: área de área
})
.css ({zindex: 5})
.AppendTo (Area Group);
línea = self.basedraw.path (self, {
borde: 1.5,
BorderColor: O.Color,
ISFILL: FALSO,
Camino: camino
})
/*. 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 ('Click', function () {AreaGroup.Tofront ();})
.css ({zindex: -1})
.AppendTo (Area Group);
});
devolver esto;
},
DrawColumns: function () {
var self = this,
opts = this.opts,
dibujar = opts.draw,
chartdata = opts.chartdata,
dataLen = chartData.length,
// El espacio entre varias columnas
columnspace = 3,
// suma de todos los intervalos en una posición
columnPadding = columnspace * dataLen + columnspace,
// El ancho de cada columna
columnsize = self.opts.charts.panel === 'x'
? Número (((draw.xpices - columnpadding) / dataLen) .tofixed (0)))
: Number (((((Draw.yPices - ColumnPadding) / DataLen) .tofixed (0));
cada uno (ChartData, función (i, o) {
data var = o.data,
id = 'gráfico' + i,
isx = opts.charts.panel === 'x',
colgroup = self.group (id) .appendTo (),
// La posición inicial de cada punto
start = self.opts.charts.panel === 'x'
? Draw.startx + columnspace + i*(columnsize + columnspace)
: dibujar.starty + columnspace + i*(columnsize + columnspace)
self.maingroup [id] = {gráfico: colgroup, show: true};
for (var j = 0, l = data.length; j <l; j ++) {
if (datos [j] === nulo) continuar;
// Si es una placa lateral
if (isx) {
var x = número ((start + j *draw.xpices) .tofixed (0)),
y = número ((shrew.starty-draw.jianjuy) .tofixed (0)),
altura = número ((datos [j] * (sorth.ypices / draw.feed) -draw.jianjuy) .tofixed (0)),
ruta = [
METRO,
incógnita,
y,
L,
incógnita,
Y -Height,
L,
x + columnsize,
y - altura,
L,
x + columnsize,
y,
sello
];
var pos = [x+columnsize/2, datos [j]> 0?
}demás{
var x = number ((draw.startx+draw.jianjux) .tofixed (0)),
width = number ((data [j]*((draw.xpices / draw.feed))-draw.jianjux) .tofixed (0)),
y = número ((inicio - (j+1) *dibujo.ipices) .tofixed (0)),
ruta = [
METRO,
incógnita,
y,
L,
x+ancho,
y,
L,
x + ancho,
y + columnsize,
L,
incógnita,
y+ columnsize,
sello
];
var Pos = [Draw.Startx+Draw.JianJux+Width/2, Y];
}
self.basedraw.path (self, {
Border: 0,
ISFILL: VERDADERO,
FillColor: O.Color,
opacity : 1,
path : path
})
.attr({data:data[j],pos:pos[0]+'-'+pos[1]})
.css({zIndex:5,cursor:'pointer'})
.on('mouseover',(function(d){
return function(){
this.setOpacity(0.85);
var pos= this.attr('pos').split('-')
self.showTooltip(o,pos[0],pos[1],this.attr('data'));
}
})(data[j])
)
.on('mouseout',function(){
this.setOpacity(1);
})
.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)),
fracción,
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+(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))
devolver;
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('+','')});
}demás{
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',
position : 'absolute',
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)),
fracción,
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'))
devolver;
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',
position : 'absolute',
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)
devolver;
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)
devolver;
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 = [
METRO,
incógnita,
y,
L,
incógnita,
y - size,
L,
x + columnSize,
y - size,
L,
x + columnSize,
y,
sello
];
var pos = [x + columnSize/2,y-size];
}demás{
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 = [
METRO,
incógnita,
y,
L,
x + size,
y ,
L,
x + size,
y - columnSize,
L,
incógnita,
y - columnSize,
sello
];
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 = [
METRO,
(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),
sello
];
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 = [
METRO,
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),
sello
];
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 = [
METRO,
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),
sello
];
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 = [
METRO,
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 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'
}demás{
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;
}demás{
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];
}
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 ? 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'
}
},
leyenda : {
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: [
'Enero',
'Febrero',
'Marzo',
'Abril',
'Puede',
'Junio',
'Julio',
'Agosto',
'Septiembre',
'Octubre',
'Noviembre',
'Diciembre'
]
},
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>
Otro
The problem of JS floating point accuracy is difficult to solve. . . . . . . . .
I hope you can give me some advice on limited level. . . . . . .