Prise en charge du graphique de la zone du graphique linéaire
Prend en charge plusieurs navigateurs
VML SVG utilisé
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> SmipleChart </Title>
<style type = "text / css">
.cc {
hauteur: 450px; Largeur: 800px; Border: 1px solide # 999; Position: relative; marge: 20px;
}
</ style>
</ head>
<body>
<div id = 't'> </div>
<div id = 't1'> </div>
<div id = 'line'> </ div>
<div id = 'zone'> </div>
<div id = 'zhu'> </div>
<div id = 'zhu1' style = "height: 600px;"> </div>
<div id = 'segmentX'> </div>
<div id = 'segmenty'> </div>
<div id = 'Pie'> </div>
<div id = 'PIES'> </div>
<div id = 'vv' style = 'hauteur: 300px; Largeur: 520px; '> </div>
<script type = "text / javascript">
(fonction (doc, indéfini) {
var win = ceci,
uuuid = -1,
hassvg = win.svgangle || doc.implementation.hasfeature ("http://www.w3.org/tr/svg11/feature#basicstructure", "1.1"),
Isie = /msie/i.test(navigator.UserAgent) &&! win.opera,
path = hassvg? 'd': 'path',
scel = hassvg? 'z': 'e',
math = math,
Mathround = Math.round,
mathfloor = math.floor,
mathceil = math.ceil,
mathmax = math.max,
mathmin = math.min,
mathabs = math.abs,
mathcos = math.cos,
mathsin = math.sin,
M = 'm',
L = 'l';
win. $$ = fonction (id) {
return document.getElementById (id);
};
win.Extend = function () {
var cible = arguments [0] || {}, i = 1, longueur = arguments.length, deep = true, options;
if (typeof cible === "booléen") {
Deep = Target;
Target = arguments [1] || {};
i = 2;
}
if (typeof Target! == "Object" && object.prototype.tostring.call (cible)! = "[Fonction objet]")
Target = {};
pour (; i <length; i ++) {
if ((options = arguments [i])! = null)
pour (nom var dans les options) {
var src = cible [name], copy = options [name];
if (cible === copie)
continuer;
if (deep && copy && typeof copy === "objet" &&! copy.nodeType) {
cible [name] = arguments.callee (Deep, src || (copy.length! = null? []: {}), copy);
}
sinon si (copie! == Undefined)
Target [name] = copy;
}
}
cible de retour;
};
win.each = fonction (objet, rappel, args) {
var name, i = 0, longueur = object.length;
if (args) {
args = array.prototype.slice.call (arguments) .slice (2);
if (longueur === Undefined) {
pour (nom dans l'objet)
if (callback.apply (objet [nom], [nom, objet [name]]. Concat (args)) === false)
casser;
} autre
pour (; i <durée; i ++)
if (callback.Apply (objet [i], [i, objet [i]]. Concat (args)) === false) //
casser;
} autre {
if (longueur === Undefined) {
pour (nom dans l'objet)
if (callback.call (objet [nom], nom, objet [name]) === false)
casser;
} autre
pour (var valeur = objet [0];
i <longueur && callback.call (valeur, i, valeur)! == false; valeur = objet [++ i]) {}
}
retour objet;
};
win.contains = fonction (p, c) {
if (! p ||! c) return false;
if (p === c) renvoie true;
Retour Isie
? P. Continent (c)
: p .paredocumentPosition (c) == 20
? vrai
: FAUX;
};
// ---------------------------------------------------------------
fonction processPoint (x) {
Retour Isie? ~~ x.tofixed (0): ~~ x.tofixed (0) + 0,5;
};
fonction caltextlen (txt, cssstr) {
var span = doc.createelement ('span');
if (cssstr) {
type de cssstr === 'String'
? span.style.cssText = CSSStr
: extension (span.style, CSSStr);
}autre{
étendre (span.style, {
Fontsiz: «12px»,
Fontfamily: "" Lucida Grande "," Lucida Sans Unicode ", Verdana, Arial, Helvetica, Sans-Serif '
});
}
span.innerhtml = txt || '';
span.style.visibilité = 'Hidden';
doc.body.appendChild (Span);
var width = span.offsetwidth,
hauteur = span.offsetheight;
doc.body.removechild (span);
return {w: largeur, h: hauteur};
};
Angle de fonction (R, Centre, O, Jingdu) {
var hudu = math.pi * 2 * (o / 360),
x = centre [0] + r * math.sin (hudu),
y = centre [1] + -r * math.cos (hudu);
return [x.tofixed (jingdu || 0), y.tofixed (jingdu || 0)];
}
fonction xx (a, b, linenum) {
var t = 1000,
stf = ((b * ta * t) / linenum) / t,
arr = [1,2,2,5,5,10],
c = 1,
V;
// La cardinalité de la ligne de division est [1, 2, 2,5, 5, 10] Cette étape consiste à découvrir à quelle gamme l'intervalle appartient
if (stf <arr [0]) {
while (stf <arr [0]) {
C = C * 10;
arr [0] = arr [0] / c;
}
chaque ([1,2,2,5,5,10], fonction (i, o) {
arr [i] = o / c;
});
} else if (stf> arr [4]) {
while (stf> arr [4]) {
C = C * 10;
arr [4] = arr [4] * c;
}
chaque ([1,2,2,5,5,10], fonction (i, o) {
arr [i] = o * c;
});
}
// Suivez l'intervalle pour trouver le plus proche de l'intervalle
chaque (arr, fonction (i, o) {
if (stf <= o) {
v = o;
retourne false;
}
});
var bj = (mathabs (a) * t) / (v * t),
ba = 0,
ISZ = BJ! == PARSEIINT (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;
// regarde combien de lignes restent et non dessinées
var num = math.max (0, linenum - math.round ((ba) / v));
if (a> = 0) {
// coordonnée entier de comparaison
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)
casser;
}
}
if (num! = 0) {
tandis que (num! == 0) {
b = (b * t + v * t) / t
num--;
}
}
}autre{
// coordonnée entier de comparaison
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)
casser;
}
}
if (num! = 0) {
tandis que (num! == 0) {
a = (a * tv * t) / t
num--;
}
}
}
return {min: a, max: b, stf: v};
}
// ---------------------------------------------------------------------------------------------------------------
// Créer quelques créations d'éléments VML SVG et supprimer les styles d'attribut == Certaines opérations
win.vector = function () {};
vector.prototype = {
$ c: fonction (graphique, nodename) {
this.element = this [0] = doc.createelementns ('http://www.w3.org/2000/svg', nodename);
this.graphic = graphique;
retourner ceci;
},
att: function (hash, val) {
var elem = this.element,
clé,
valeur;
if (typeof hash === 'string') {
if (val === Undefined) {
return elem.getAttribute (hash);
}autre{
elem.setAttribute (hachage, val);
retourner ceci;
}
} autre {
pour (clé dans hash) {
valeur = hash [key];
if (key === chemin) {
valeur && value.join
&& (value = value.join (''));
/ (Nan | | ^ $) /. Test (valeur)
&& (value = 'm 0 0');
}
elem.setAttribute (clé, valeur)
}
}
retourner ceci;
},
CSS: fonction (hash) {
pour (clé var dans hash) {
Isie && key == "Opacité"
? this [0] .style ['filter'] = "alpha (opacity =" + hash [key] * 100+ ")"
: this [0] .Style [key] = hash [key];
}
retourner ceci;
},
on: function (EventName, Handler) {
var self = this;
/*this.element.addeventListener(eventName,function () {
handler.Call (self)
},FAUX);*/
this.element ['on' + eventname] = fonction (e) {
E = E || win.event;
handler.Call (self, e);
}
retourner ceci;
},
APPENDTO: fonction (parent) {
if (parent) {
parent.element
? Parent.Element.ApendChild (this.element)
: parent.ApendChild (this.element)
} autre {
this.graphic.Container.ApendChild (this.element);
}
retourner ceci;
},
addText: fonction (str) {
var elem = this.element;
if (elem.nodename === 'text') {
elem.appendChild (doc.createTExtNode (str + ''));
}
retourner ceci;
},
setOpacity: function (v) {
this.attr ('fill-opacity', v);
retourner ceci;
},
setSize: fonction (v) {
Ce [0] .NodeName === 'Circle'
? this.attr ('r', 4 + (v === 0? 0: 2))
: this.attr ({'TRAD-width': v});
retourner ceci;
},
tofront: function () {
this [0] .parentNode.ApendChild (this [0]);
retourner ceci;
},
show: function () {
this [0] .style.display = 'block';
retourner ceci;
},
masquer: function () {
this [0] .style.display = 'Aucun';
retourner ceci;
},
destroy: function () {
// Détruiser les nœuds ............
var nœud = this [0] || ce;
node.onmouseOver = node.onmouseout = node.onclick = null;
node.parentNode
&& node.parentNode.RemoveChild (node);
retourner ceci;
}
};
// ---------------------------------------------------------------------------------------------------------------
// ---------------------------------------------------------------------------------------------------
// s'il s'agit de VML pour modifier certaines de ces méthodes
if (! hassvg) {
// -----------------------------------------------------------------------------------------------------------------------------
doc.CreatestyleSheet (). Addrule (". Vml", "comportement: URL (# par défaut # vml); affichage: bloc en ligne; position: absolue; gauche: 0px; top: 0px");
! doc.namespaces.vml &&! + "/ v1";
doc.namespaces.add ("vml", "urn: schémas-microsoft-com: vml");
// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
extension (vector.prototype, {
$ c: fonction (graphique, nodename) {
var name = nodename || 'forme';
this.element = this [0] = (name === 'div' || name === 'span')
? doc.createelement (nom)
: doc.createElement ('<vml:' + name + '>');
this.graphic = graphique;
retourner ceci;
},
/ * on: function (eventname, handler) {
var self = this;
this.element.attachevent ("on" + eventname, function () {
handler.Call (self);
});
retourner ceci;
}, * /
addText: fonction (txt) {
Ce [0] .innerHtml = txt || '';
retourner ceci;
},
setSize: fonction (v) {
Ce [0] .Strokeweight = v;
retourner ceci;
},
setOpacity: function (v) {
this.opacity.opacity = v;
retourner ceci;
}
});
}
// ---------------------------------------------------------------------------------------------------
// Catégorie de dessin
// ------------------------------------------------------------
win.smipleChart = function () {
this.init.apply (ceci, arguments);
};
SmileChart.list = [];
SmileChart.timer = null;
SmileChart.lazyload = fonction (id) {
id = id || '0'
Smilechart.list [id]
&& SmipleChart.list [id] .loadMe ();
};
Smilechart.prototype = {
Options: {
graphiques: {
PaddingRight: 20,
rayon: 200,
style: {
Fontfamily: "" Lucida Grande "," Lucida Sans Unicode ", Verdana, Arial, Helvetica, Sans-Serif ',
FontSize: '12px',
Contexte: '#ffffff'
}
},
titre: {
texte : '',
Y: 10,
style: {
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
FontSize: '16px',
Temps de police: «audacieux»
}
},
sous-titre: {
texte: '',
Y: 30,
style: {
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
FontSize: '12px',
Couleur: '# 111'
}
},
yunit: {
texte : '',
style: {
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
FontSize: '12px',
Couleur: '# 111'
},
Linenem: 10
}
},
init: fonction (conteneur, options) {
ClearTimeout (Smiplechart.timer)
var self = this;
this.width = contener.offsetWidth;
this.height = contener.offsetheight;
this.currList = {};
this.uuuid = ++ uuuid;
this.timer = null;
// la principale forme de collecte du groupe de dessin
// {id: {dom: xx, show: true}}
this.mategroup = {};
// Ce qui doit être utilisé lors de la segmentation, c'est savoir lesquels sont cachés car il s'agit de redessiner
this.hidelist = {};
// Le dessin dans SVG doit avoir un SVG TAG VML et utiliser Div
this.Container = hassvg
? new vector (). $ c (1, «svg»)
.attr ({
xmlns: 'http://www.w3.org/2000/svg',
Version: '1.1',
largeur: cette largeur,
hauteur: ce.hheight
})
.css ({FontSize: '12px'})
.APPENDTO (conteneur)
: new vector (). $ c (1, 'div')
.css ({
FontSize: '12px',
largeur: this.width + 'px',
hauteur: ce.Height + 'px'
})
.APPENDTO (conteneur);
this.loading = contener.appendChild (doc.createElement ('img'));
this.loading.setAttribute ('src', 'http: //images.cnblogs.com/cnblogs_com/wtcsy/192373/r_loading.gif');
this.loading.style.position = 'absolue';
this.loading.style.top = contener.offsetheight / 2- this.loading.offsetheight / 2 + 'px';
this.loading.style.left = contener.offsetwidth / 2- this.loading.offsetwidth / 2 + 'px';
var c = extension (true, {}, this.options),
opts = this.opts = extend (true, c, options),
style = extension (opts.charts.style, {
largeur: cette largeur,
hauteur: ce.hheight
});
Smilechart.list [this.uuuid] = this;
SmileChart.timer = setTimeout (function () {
SmileChart.lazyload ();
}, 200);
},
loadMe: function () {
var opts = this.opts,
self = ceci,
type = opts.charts.type;
this.Container = this.Container
.on ('Mouseout', fonction (e) {
var elem = e.relatedtarget || e.Pelement;
if (! contient (ce [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: 'Aucun'}) [0];
// certains paramètres requis lors du calcul de la plaque de dessin
this.getDrawarea ()
.CreateToolTip () // Créez une boîte pour des informations rapides
.Drawtitle () // dessinez le titre
// dessine la plaque
'Line, zone, Pie'.indexof (type)> = 0
&& (opts.charts.panel = 'x');
'Pie, Pies'.indexof (type) <0
&& this.Drawpanel ();
this.DrawleGend (opts.legend.type); // dessiner des barres de blocs de couleur
var type = {
Ligne: «lignée de dessin»,
Zone: «Drawarea»,
Colonnes: «DrawColumns»,
Pie: «Drawpie»,
Pies: «tirages»,
Segment: «tirage du tirage»
} [opts.charts.type];
// commence à dessiner .........
ce [type] ();
// Supprimer le nœud
this.loading.parentNode.RemoveChild (this.loading);
// Débranchez la référence
this.loading = null;
this.Container.style.display = '';
setTimeout (function () {
SmileChart.lazyload ((++ self.uuuid) + '');
}, 10)
},
createElement: function (nodename) {
return new vector (). $ c (this, nodeName);
},
groupe: fonction (nom) {
Renvoie this.CreateElement (hassvg? 'g': 'div'). att ('mark', nom);
},
getdrawarea: function () {
var opts = this.opts,
largeur = this.width,
hauteur = this.height,
title = opts.title,
subtitle = opts.subtitle,
zone = {
// Retirez la largeur du texte de l'échelle sur le côté gauche de l'axe de coordonnées (estimé) 80 est la valeur fixe et seulement 80 est laissé sur le côté gauche de la valeur fixe.
largeur de zone: largeur - 80,
// Retirez la hauteur du texte et les marques sous l'axe
AreaHeight: Hauteur - 40,
// La position x de l'origine sera calculée ci-dessous
startx: 0,
// La position y de l'origine sera calculée ci-dessous
Starty: 0,
// Lorsque vous dessinez un graphique à secteurs avec la coordonnée X du centre, vous devez connaître la position du centre du cercle.
CenterX: 0,
// Lorsque vous dessinez un graphique à secteurs avec la coordonnée Y au centre, vous devez connaître la position du centre du cercle.
CENTERE: 0
};
// Si le titre principal existe, soustrayez la hauteur du titre principal Sinon, soustrayez la hauteur de 10
zone.areaheight - = (title.Text! == '')
? titre.y
: 10;
// Retirez la hauteur du sous-titre
zone.areaheight - = (subtitle.text! == '')
? sous-titre.y
: 10
zone.startx = 80;
zone.starty = hauteur - 40;
// la position du centre du cercle
zone.CenterX = largeur / 2;
zone.Centery = hauteur / 2;
// laisse un peu d'espace à droite
zone.Araveuse - = 20;
// laisse un espacement sur le dessus
zone.Areaheight - = 15;
Opts.Area = Area;
retourner ceci;
},
drawtitle: function () {
var opts = this.opts,
self = ceci,
arr = [opts.title, opts.subtitle, opts.yunit],
// Paramètres de base de la position de 3 coordonnées de titre
config = [
{
x: this.width / 2,
y: opts.title.y
},
{
x: this.width / 2,
y: opts.subtitle.y
},
{
x: opts.yunit.x,
Y: ce.Height / 2 - 20
}
],
tpanel = this.group ('title')
.APPENDTO ();
chaque (arr, fonction (i, title) {
var text = title.Text;
if (text) {
var elem = self.baseraw.span (self, {
'Text-Anchor': 'à gauche',
x: mathmax (config [i] .x - caltextlen (texte, title.style) .w / 2,10),
y: config [i] .y
}, caltextlen (title.text, title.style) .h)
.css (title.style)
.addText (texte)
.APPENDTO (tpanel);
// Si c'est 2, cela signifie que le sous-titre est utilisé pour le mettre verticalement
if (i === 2) {
hassvg
? elem.attr ({transform: 'rotation (270,' + (opts.yunit.x + 10) + ',' + self.height / 2 + ')'})
: (elem.element.style.filter = 'PROGID: dxiagetransform.microsoft.basicImage (rotation = 3)')
}
}
});
retourner ceci;
},
// Dessier les plaques est plus gênante
drawpanel: fonction (type) {
varopts = this.opts,
self = ceci,
zone = opts.Area,
chartSype = opts.charts.type,
isSegment = chartSype === 'segment',
// est le type de plaque horizontale ou verticale
type = opts.charts.panel || 'x';
// plaque inférieure
var drawaWidith = aire.
drawareaheight = aire.areaheight,
// les coordonnées de l'origine
startx = area.startx,
Starty = Area.starty;
var alldata = [],
minvalue = 0,
maxvalue = 10,
// Le nombre de lignes ne peut être que entre 1 et 10
linenum = mathmin (10, mathmax (opts.yunit.linenum, 1)),
personnel;
// combinant toutes les données
chacun (opts.chartdata, fonction (i, o) {
// S'il s'agit d'un graphique à barres, il est résumé pour toutes les données
iSsegment
? chaque (o.data, fonction (j, d) {
alldata [j]
? alldata [j] = alldata [j] + (~~ d)
: allData [j] = ~~ d;
})
: alldata = alldata.concat (o.data)
});
// trier toutes les données pour trouver la valeur maximale et la valeur minimale ci-dessous
allData.sort (fonction (a, b) {return ab});
// terminer la valeur maximale et la valeur minimale
maxValue = allData [allData.length - 1];
chacun (alldata, fonction (i, o) {
if (o! == null) {
minvalue = o;
retourne false;
}
});
// Récipient de plaque principal
VAR PANNEL = this.group ('panneau'). APPENDTO ();
Var Result = xx (minvalue, maxvalue, linenum),
min = résultat.min,
max = résultat.max,
f = résultat.stf;
iSsegment
&& (min = 0);
// signifie que la coordonnée horizontale ou la double coordonnée est dessinée
if (type.tolowercase () === 'x') {
// Intervalle unitaire souterrain
varXPices = drawAreAwidth / opts.xunit.units.length,
// Le point central de l'intervalle unitaire
offset = xpices / 2,
ypices = drawareaheight / linenum;
// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var y = hassvg? 5: 10,
t = 1000,
portée;
chacun (opts.xunit.units, fonction (i, d) {
self.baseraw.path (self, {
Border: 1,
BorderColor: '# C0C0C0',
isfill: faux,
chemin : [
M,
ProcessPoint (startx + (i * xpices)),
ProcessPoint (Starty),
L,
ProcessPoint (startx + (i * xpices)),
ProcessPoint (Starty + 5)
]]
}).
APPENDTO (panneau);
span = self.baseraw.span (self, {{
x: startx + offset + (i * xpices),
y: starty + y,
'Text-Anchor': 'Middle'
})
.css ({
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
Fontsize: '12px'
})
.addText (opts.xunit.units [i])
.APPENDTO (PANNEL) [0];
! hassvg
&& (span.style.left = parseInt (span.style.left) - span.offsetwidth / 2 + 'px');
});
// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
for (i = 0; i <= linenum; i ++) {
self.baseraw.path (self, {
Border: 1,
BorderColor: '# C0C0C0',
isfill: faux,
Chemin: [m, startx, processPoint (starty - (i * yPices)), L, ProcessPoint (startx + drawareAWidth), processPoint (starty - (i * ypices))]]
})
.css ({zindex: -10})
.APPENDTO (panneau);
var span = self.baseraw.span (self, {
X: startx - 15,
y: starty - i * ypices-caltextlen (min + i * f + ''). h / 2,
'Text-Anchor': 'Middle'
})
.css ({
«Font-Family»: «Verdana, Arial, Helvetica, Sans-Serif»,
«Font-Size»: «12px»,
Largeur: «40px»,
Affichage: «bloc»,
Textalign: «Droite»
})
.addText ((min * t + (i * t * f / t) * t) / t + '')
.APPENDTO (PANNEL) [0];
if (! hassvg) {
span.style.top = parseInt (span.style.top) + span.offsetheight / 2 -5 + 'px';
span.style.left = parseInt (span.style.left) -35 + 'px'
}
}
}autre{
// Intervalle unitaire souterrain
VaryPices = DrawAreaHeight / (opts.xunit.units.length),
// Le point central de l'intervalle unitaire
offset = math.round (ypices / 2),
x = hassvg? 25: 70,
y = hassvg? 0: 5,
portée
chacun (opts.xunit.units, fonction (i, d) {
self.baseraw.path (self, {
Border: 1,
BorderColor: '# C0C0C0',
isfill: faux,
chemin : [
M,
ProcessPoint (startx-5),
ProcessPoint (starty-i * ypices),
L,
ProcessPoint (startx),
ProcessPoint (starty-i * ypices),
]]
})
.APPENDTO (panneau);
span = self.baseraw.span (self, {{
x: startx - x,
y: starty -i * ypices-offset-caltextlen (d) .h / 2 + y,
'Text-Anchor': 'Middle'
})
.css ({
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
FontSize: '12px',
Largeur: '60px',
Textalign: «Droite»
})
.addText (d)
.APPENDTO (panneau)
});
var xpices = drawaWiDidth / linenum;
pour (var i = 0; i <= linenum; i ++) {
self.baseraw.path (self, {
Border: 1,
BorderColor: '# C0C0C0',
isfill: faux,
chemin : [
M,
ProcessPoint (startx + (i * xpices)),
ProcessPoint (Starty),
L,
ProcessPoint (startx + (i * xpices)),
ProcessPoint (Starty - Drawareaheight)
]]
}).
APPENDTO (panneau);
self.baseraw.span (self, {
x: startx - caltextlen (min + i * f + ''). W / 2 + i * xpices,
Y: Starty,
'Text-Anchor': «gauche»
})
.css ({
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
Fontsize: '12px'
})
.addText (min + i * f + '')
.APPENDTO (panneau);
}
}
// -----------------------------------------------------------------------------------------------------
// parce que le point de départ n'est probablement pas démarré à partir de 0, donc la valeur de la partie 0 doit être ajoutée au point de départ.
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 point de départ de l'axe
Starty: Point de départ Starty, // Y Axe
xpices: xpices, // largeur de chaque partie de l'axe x
ypices: ypices, // la largeur de chaque partie de l'axe y
Offset: décalage, // x Position de point de centre de branche unique Offset
Jianjuy: jianju * ypices / f,
Jianjux: jianju * xpices / f,
Feed: F // Combien de l'axe y existe-t-il
}
retourner ceci;
},
createTooltip: function () {
// un groupe
this.tipc = this.group ('Tip')
.css ({zindex: 200, hauteur: '20px', largeur: '20px', position: 'absolu'})
.APPENDTO ()
.cacher()
// dessine une chute de trame de cadre
this.tipbox = this.baseraw.rect (this, {arc: 0.22, fill: '# ffff', border: 2, borderColor: '# 606060'})
.APPENDTO (this.tipc)
// parce que G dans SVG peut être directement positionné, mais le rendu de groupe dans VML est très lent, donc la div est modifiée, donc le parent ici n'est pas la même
var p = isie? this.tipbox: this.tipc;
this.tiptxtContainer = this.baseraw.text (this, {fill: '# 000000', x: 5, y: 19, 'text-anchor': 'Left'})
.css ({
Fontfamily: 'Verdana, Arial, Helvetica, Sans-Serif',
FontSize: '12px',
Contexte: '#fff'
})
.APPENDTO (P);
this.tipText = doc.createTextNode ('');
this.tiptxtContainer [0] .APPEndChild (this.tipText);
retourner ceci;
},
showtooltip: function (obj, x, y, data) {
/ * var txt = obj.name + ':' + data,
size = CalTextlen (txt, this.tiptxtContainer [0] .style.csstext),
pos = {x: x - (size.w + 5 * 2) / 2, y: y - 32};
this.tipc
.tofront ()
.montrer();
if (hassvg) {
this.tipc.attr ({transform: 'tradlate (' + pos.x + ',' + pos.y + ')'});
this.tipbox
.attr ({largeur: size.w + 5 * 2, hauteur: size.h + 5 * 2, trait: obj.color || '# 606060'});
}autre{
this.tipc.css ({gauche: pos.x, top: pos.y});
this.tipbox
.css ({largeur: taille.w + 5 * 2, hauteur: size.h + 5 * 2})
this.tipbox [0] .strokeColor = obj.color || '# 000';
}
this.tiptext.nodevalue = txt || ''; * /
ClearTimeout (this.timer);
var txt = obj.name + ':' + data,
self = ceci,
size = CalTextlen (txt, this.tiptxtContainer [0] .style.csstext),
pos = {x: x - (size.w + 5 * 2) / 2, y: y - 32};
if (hassvg) {
self.tipbox
.attr ({largeur: size.w + 5 * 2, hauteur: size.h + 5 * 2, trait: obj.color || '# 606060'});
}autre{
self.tipbox
.css ({largeur: taille.w + 5 * 2, hauteur: 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: 'tradlate (' + pos.x + ',' + pos.y + ')', pos: pos.x + '-' + pos.y})
: self.tipc.attr ({pos: pos.x + '-' + pos.y}). css ({gauche: pos.x, top: pos.y});
this.tipc
.tofront ()
.montrer();
}autre{
var move = fonction (t, b, c, d) {
retour 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 = move (t, ~~ b [0], (~~ c [0]) - (~~ b [0]), d),
y = move (t, ~~ b [1], (~~ c [1]) - (~~ b [1]), d);
hassvg
? self.tipc.attr ({transform: 'tradlate (' + x + ',' + y + ')', pos: x + '-' + y})
: self.tipc.Attr ({pos: x + '-' + y}). css ({gauche: x, top: y});
}autre{
ClearTimeout (self.timer);
}
}, 1);
};
},
Hidetooltip: function () {
this.tipc.hide ();
},
DrawLegend: fonction (type, rederser) {
var self = ceci,
opts = this.opts,
iSline = opts.charts.type === 'Line',
// la taille du bloc de couleur
t_width = 20,
t_height = 20,
// Distance entre les blocs
t_space = 5,
datas = opts.chartdata,
len = datas.length,
css = opts.legend.style,
// Si la longueur maximale est longitudinale, la longueur maximale est requise
maxwidth = 10,
maxheight = 30,
// l'emplacement de cette chose
orig_pos = opts.legend.pos? opts.legend.pos: [2,2],
// montre des fonctions de groupe cachées
handle = fonction (i) {
var g = self.mategroup ['grapt
iSSegment = opts.Charts.type === 'segment';
if (g.show) {
g.chart.hide ();
g.show = false;
hassvg
? this.attr ({fill: '# ccc'})
: this [0] .style.color = '#ccc';
// S'il s'agit d'une image segmentée, cela impliquera de redessiner.
if (isSegment) {
self.hidelist [i] = '';
var Maingroup = self.mategroup;
for (var name in maingroup) {
var parent = Maingroup [name] .chart,
nœuds = parent [0] .childNodes,
len = nœuds.length;
// détruise les choses dessinées sur l'image
pour (var i = len-1; i> = 0; i -) {
vector.prototype.destroy.call (nœuds [i])
}
}
//Repeindre
self.raweging ();
}
}autre{
g.chart.show ();
g.show = true;
hassvg
? this.attr ({fill: '# 000'})
: this [0] .style.color = '# 000'
if (isSegment) {
supprimer self.hidelist [i];
var Maingroup = self.mategroup;
for (var name in maingroup) {
var parent = Maingroup [name] .chart,
nœuds = parent [0] .childNodes,
len = nœuds.length;
pour (var i = len-1; i> = 0; i -) {
vector.prototype.destroy.call (nœuds [i])
}
}
self.raweging ();
}
}
},
arr = [];
type = type || 'latérale';
var legendPanel = self.group ('légende')
.APPENDTO ();
if (type === 'latérale') {
// Si c'est horizontal
var top = orig_pos [1] + 5,
th = hassvg? 0: 3,
Left = orig_pos [0] + 5;
chacun (données, fonction (i, d) {
gauche = i === 0? gauche: t_space + gauche;
// Calculez l'emplacement de toute gauche
// s'il s'agit d'un diagramme linéaire, dessinez le dessin sous la forme d'un diagramme linéaire
if (isLine) {
self.baseraw.path (self, {
Border: 1.5,
BorderColor: D.Color,
isfill: faux,
chemin : [
M,
Left.tofixed (0),
(top + 10) .tofixé (0),
L,
(gauche + 25) .tofixé (0),
(top + 10) .tofixé (0)
]]
})
.APPENDTO (LegendPanel);
self.basedraw [D.DotType || 'cercle'] (self, {
X: gauche + 12,
y: top + 10,
R: 4,
Fillcolor: D.Color
})
.APPENDTO (LegendPanel);
}autre{
self.baseraw.rect (self, {
Arc: 0,1,
Remplissez: D.Color,
Border: 1,
BorderColor: D.Color,
À gauche: à gauche,
en haut: haut,
largeur: t_width + 'px',
hauteur: t_height + 'px'
})
.APPENDTO (LegendPanel)
}
Left = Left + t_width + 2 + t_space;
var w = caltextlen (d.name, css) .w
self.baseraw.span (self, {
'Text-Anchor': 'à gauche',
X: à gauche,
y: top + th
})
.css (extension (css, {curseur: 'pointer'}))
.on ('click', function () {
handle.Call (ceci, i);
})
.AddText (D.Name)
.APPENDTO (LegendPanel);
gauche = gauche + w;
});
this.baseraw.rect (this, {{
Arc: 0,1,
remplir: «aucun»,
Border: 1.5,
BorderColor: '# 666666',
largeur: gauche + t_space- orig_pos [0],
hauteur: maxheight,
gauche: orig_pos [0],
en haut: orig_pos [1]
})
.APPENDTO (LegendPanel);
}autre{
var top = orig_pos [1] + 5,
th = hassvg? 0: 3,
Left = orig_pos [0] + 5;
chacun (données, fonction (i, d) {
top = i === 0? en haut: t_space + top;
self.baseraw.rect (self, {
Arc: 0,1,
Remplissez: D.Color,
Border: 1,
BorderColor: D.Color,
À gauche: à gauche,
en haut: haut,
largeur: t_width + 'px',
hauteur: t_height + 'px'
})
.APPENDTO (LegendPanel);
var h = caltextlen (d.Name, css) .h;
self.baseraw.span (self, {
'Text-Anchor': 'à gauche',
x: gauche + t_width + 2 + t_space,
y: top + th
})
.css (extension (css, {curseur: 'pointer'}))
.AddText (D.Name)
.on ('click', function () {
// S'il s'agit d'un graphique à secteurs multicouches, il ne peut pas être caché
if (opts.charts.type === 'PIES') retourne;
handle.Call (ceci, i);
})
.APPENDTO (LegendPanel);
top = top + h + t_space;
maxWidth = math.max (maxwidth, caltextlen (d.name, css) .w);
});
this.baseraw.rect (this, {{
Arc: 0,1,
remplir: «aucun»,
Border: 1.5,
BorderColor: '# 666666',
Largeur: maxwidth + 22 + 15,
Hauteur: top + t_space-origin_pos [1],
gauche: orig_pos [0],
en haut: orig_pos [1]
})
.APPENDTO (LegendPanel);
}
retourner ceci;
},
drawline: function () {
var self = ceci,
opts = this.opts,
Draw = Opts.Draw;
chacun (opts.chartdata, fonction (i, o) {
var id = 'chart' + i,
group de ligne = self.group (id)
.APPENDTO ();
self.mategroup [id] = {
Graphique: group de ligne,
show: vrai
};
Var Path = [M],
data = o.data,
doubler;
pour (var i = 0, l = data.length; i <l; i ++) {
if (data [i] == null) {
// Si ces données n'existent pas et n'est pas le premier chemin de données, ajoutez M à celui-ci
if (path [path.length - 1]! == m)
Path.push (m);
}autre{
// Si ce n'est pas le premier chemin de données, ajoutez L
i! == 0 && path.push ("l");
// Si le premier est nul et non le premier à retirer le L
if (i> 0 && data [i - 1] == null)
path.pop ();
// Calculez la position de x et y du point
var x = draw.startx + draw.offset + (i * draw.xpices),
y = draw.starty - data [i] * (draw.ypices / draw.feed);
if (isie) {
x = parseInt (x);
y = parseInt (y);
}
path.push (x);
path.push (y);
// dessiner des points
var dotType = o.dottype || 'cercle';
self.basedraw [dotType] (self, {{
x: x,
y: y,
R: 4,
FillColor: O.Color
})
.attr ({data: data [i], pos: x + '-' + (y-5)})
.css ({zindex: 10, curseur: 'pointer'})
.on ('MouseOver', (fonction (o, x, y) {
return function () {
if (self.currList.dot) {
if (self.currList.dot [0] === ce [0])
retour;
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))
/ *. sur ('Mouseout', function () {
this.setSize (0);
line.setSize (1.5);
}) * /
.on ('click', function () {linegroup.tofront ();})
.APPENDTO (GROUP LINE);
}
};
// dessiner des lignes pliées
line = self.baseraw.path (self, {{
Border: 1.5,
BorderColor: O.Color,
isfill: faux,
Chemin: chemin
})
.css ({zindex: 5})
/ *. sur ('MouseOver', function () {
this.setSize (2.5);
})
.on ('muouseout', function () {
this.setSize (1.5);
}) * /
.on ('click', function () {linegroup.tofront ();})
.APPENDTO (GROUP LINE);
});
retourner ceci;
},
drawarea: function () {
var self = ceci,
opts = this.opts,
Draw = Opts.Draw;
chacun (opts.chartdata, fonction (i, o) {
var id = 'chart' + i,
AreaGroup = self.group (id) .appendto ();
self.mategroup [id] = {chart: AreaGroup, show: true};
// il y a 2 chemins, l'un est le chemin de la région et l'autre est le chemin de la ligne
var AreaPath = [m, (draw.startx + draw.offset) .tofixed (0), (draw.starty-draw.jianjuy) .tofixed (0)],
chemin = [m],
data = o.data,
doubler;
pour (var n = 0, l = data.length; n <l; n ++) {
// Si les données sont vides
var len = areaPath.length;
if (data [n] === null) {
// Si le précédent n'est pas m, alors dessinez-le, alors ajoutez m
if (path [path.length - 1]! == m)
Path.push (m);
// Si le premier ou le front est nul, modifiez les coordonnées du point de départ
len === 3
&& (AreaPath [1] = (draw.startx + (n + 1) * draw.xpices + draw.offset) .tofixed (0));
// Si le précédent n'est pas le graphique de la zone d'identifiant final, si les premières données sont nulles, l'opération suivante ne sera pas effectuée
if (AreaPath [len - 1]! == Seal && n! == 0) {
areaPath = AreaPath.concat ([
AreaPath [Len - 2],
(draw.starty-draw.jianjuy) .tofixed (0),
joint
]));
}
}autre{
n! == 0 && path.push (l);
AreaPath.push (L);
// Si les données précédentes sont nulles, supprimez le L précédent
if (n> 0 && data [n - 1] == null) {
path.pop ();
// Si le premier est nul, ne supprimez pas L
n! == 1 && rarePath.pop ();
}
var x = draw.startx + draw.offset + (n * draw.xpices),
y = draw.starty - data [n] * (draw.ypices / draw.feed);
if (isie) {
x = parseInt (x);
y = parseInt (y);
}
path.push (x);
path.push (y);
if (AreaPath [len - 1] === sceau) {
areaPath = AreaPath.concat ([
M,
x,
parseint (draw.starty-draw.jianjuy),
L,
x,
y
]));
}autre{
AreaPath.push (x);
AreaPath.push (y);
}
// Si c'est le dernier point
if (n === l - 1) {
AreaPath.push (x);
AreaPath.push (parseInt (draw.starty-draw.jianjuy));
}
// dessiner des points
self.basedraw [o.dottype || 'cercle'] (self, {
x: x,
y: y,
R: 4,
FillColor: O.Color
})
.attr ({data: data [n], pos: x + '-' + (y-5)})
.on ('MouseOver', (fonction (o, x, y) {
return function () {
if (self.currList.dot) {
if (self.currList.dot [0] === ce [0])
retour;
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))
/ *. sur ('Mouseout', function () {
this.setSize (0);
line.setSize (1.5);
//self.hidetooltip ()
}) * /
.on ('click', function () {AreaGroup.Tofront ();})
.css ({zindex: 10, curseur: 'pointer'})
.APPENDTO (Areagroup);
}
}
AreaPath.push (sceau)
self.baseraw.path (self, {
Border: 0,
isfill: vrai,
fillcolor: o.color,
Opacité: 0,5,
Chemin: AreaPath
})
.css ({zindex: 5})
.APPENDTO (Areagroup);
line = self.baseraw.path (self, {{
Border: 1.5,
BorderColor: O.Color,
isfill: faux,
Chemin: chemin
})
/ *. sur ('MouseOver', function () {
hassvg
? this.attr ({'tram-width': 2.5})
: (ce [0] .Strokeweight = 2,5);
})
.on ('muouseout', function () {
hassvg
? this.attr ({'stroke-largeth': 1.5})
: (ce [0] .Strokeweight = 1,5);
}) * /
.on ('click', function () {AreaGroup.Tofront ();})
.css ({zindex: -1})
.APPENDTO (Areagroup);
});
retourner ceci;
},
drawColumns: function () {
var self = ceci,
opts = this.opts,
draw = opts.raw,
chartdata = opts.chartdata,
datalen = chartData.length,
// l'espacement entre plusieurs colonnes
ColumnSpace = 3,
// somme de tous les intervalles dans une position
colnumnPadding = ColumnSpace * Datalen + ColumnSpace,
// la largeur de chaque colonne
ColumnSize = self.opts.charts.panel === 'x'
? Numéro (((draw.xpices - colnumnpadding) / datalen) .tofixed (0))
: Numéro ((((draw.ypices - colnumnpadding) / datalen) .tofixed (0));
chaque (chartdata, fonction (i, o) {
var data = o.data,
id = 'graphique' + i,
isx = opts.charts.panel === 'x',
colgroup = self.group (id) .appendto (),
// la position de départ de chaque point
start = self.opts.charts.panel === 'x'
? draw.startx + colonnemspace + i * (columnSize + ColumnSpace)
: Draw.Starty + ColumnSpace + I * (ColumnSize + ColumnSpace)
self.mategroup [id] = {grapt: colgroup, show: true};
pour (var j = 0, l = data.length; j <l; j ++) {
if (data [j] === null) continuer;
// Si c'est une plaque latérale
if (isx) {
var x = nombre ((start + j * draw.xpices) .tofixed (0)),
y = nombre ((draw.starty-draw.jianjuy) .tofixed (0)),
height = nombre ((data [j] * (draw.ypices / draw.feed) -draw.jianjuy) .tofixed (0)),
chemin = [
M,
x,
y,
L,
x,
Y -Height,
L,
x + colonnes,
y - hauteur,
L,
x + colonnes,
y,
joint
]]
var pos = [x + ColumnSize / 2, data [j]> 0? y-height: draw.starty-draw.jianjuy];
}autre{
var x = nombre ((draw.startx + draw.jianjux) .tofixed (0)),
width = nombre ((data [j] * ((draw.xpices / draw.feed)) - draw.jianjux) .tofixed (0)),
y = nombre ((start - (j + 1) * draw.ypices) .tofixed (0)),
chemin = [
M,
x,
y,
L,
x + largeur,
y,
L,
x + largeur,
y + colonnes,
L,
x,
y + colonnes,
joint
]]
var pos = [draw.startx + draw.jianjux + largeur / 2, y];
}
self.baseraw.path (self, {
Border: 0,
isfill: vrai,
fillcolor: o.color,
Opacité: 1,
Chemin: chemin
})
.attr ({data: data [j], pos: pos [0] + '-' + pos [1]})
.css ({zindex: 5, curseur: 'pointer'})
.on ('MouseOver', (fonction (d) {
return function () {
this.setopacity (0,85);
var pos = this.attr ('pos'). Split ('-')
self.showtooltip (o, pos [0], pos [1], this.attr ('data'));
}
}) (données [J])
)
.on ('muouseout', function () {
this.setOpacity (1);
})
.APPENDTO (Colgroup);
}
});
retourner ceci;
},
drawpie: function () {
var self = ceci,
opts = this.opts,
zone = opts.Area,
rx = area.centerx,
ry = zone.
Inc = 0,
total = 0,
data = [],
cumulatif = -0,25, // commencer en haut;
circon = 2 * math.pi,
radiu = mathmin (opts.charts.radius, mathmin (aire.
fraction,
half_fraction;
chacun (opts.chartdata, fonction (i, o) {
typeof o.data === 'objet'
? (data.push ((fonction (o) {
var all = 0;
pour (var i in o)
all + = ~~ o [i]
Retourne tout
}) (O.Data)))
: data.push (Mathabs (O.Data))
});
chaque (données, fonction (i, o) {
total = total + o;
});
chaque (données, fonction (i, o) {
var pieGroup = self.group ('grapt' + 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))
retour;
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('+','')});
}autre{
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: «absolu»,
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)),
fraction,
half_cumulative,
half_fraction;
each(chartData,function(i,o){
each(o.data,function(j,d){
data[j]
? data[j] +=mathAbs(d)
: data[j] =mathAbs(d)
});
});
//看有多少个数据来生成来生成内半径
var len = data.length,
innerSpace = radiu / 10;
Rpice = (radiu - innerSpace) / len;
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'))
retour;
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: «absolu»,
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)
retour;
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)
retour;
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,
joint
];
var pos = [x + columnSize/2,y-size];
}autre{
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,
joint
];
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),
joint
];
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),
joint
];
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),
joint
];
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,
'UN',
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'
}autre{
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;
}autre{
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];
}
retour 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
})
}
});
//---------------------------------------------------------------------------------------------------
})(document);
window.onload = function(){
var t = new Date().getTime();
var config = {
charts : {
type : 'line',
radius : 150,
panel : 'x',
style: {
fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font
fontSize: '12px'
}
},
titre: {
text: '线性图表',
y: 10,
style: {
color: 'black',
fontSize: '16px'
}
},
subTitle : {
text: '线性图表副标题',
y: 35,
style: {
color: '#111',
fontSize: '12px'
}
},
légende : {
enable : true,
//type : 'lateral', // lateral 横向或lengthwise 纵向
type : 'lateral',
pos : [10,10],
style:{
fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font
fontSize : '12px',
magin : '0px'
}
},
yUnit : {
text : '线性图表侧标题',
x : 20,
style: {
color : '#111',
fontSize : '12px'
}
},
xUnit : {
units: [
'Janvier',
'Février',
'Mars',
'Avril',
'Peut',
'Juin',
'Juillet',
'Août',
'Septembre',
'Octobre',
'Novembre',
'Décembre'
]]
},
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)
}
</cript>
</docy>
</html>
Autre
The problem of JS floating point accuracy is difficult to solve. . . . . . . . .
I hope you can give me some advice on limited level. . . . . . .