JavaScript utilise SmipleChart pour implémenter des graphiques simples

Auteur：Eve Cole Date de mise à jour：2025-06-14 03:16:01

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">

<adal>

<Title> SmipleChart </Title>

.cc {

hauteur: 450px; Largeur: 800px; Border: 1px solide # 999; Position: relative; marge: 20px;

}

</ style>

</ head>

<body>

(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,

// 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 : [

ProcessPoint (startx + (i * xpices)),

ProcessPoint (Starty),

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 : [

ProcessPoint (startx-5),

ProcessPoint (starty-i * ypices),

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 : [

ProcessPoint (startx + (i * xpices)),

ProcessPoint (Starty),

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 : [

Left.tofixed (0),

(top + 10) .tofixé (0),

(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 ([

parseint (draw.starty-draw.jianjuy),

]));

}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 = [

Y -Height,

x + colonnes,

y - hauteur,

x + colonnes,

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 = [

x + largeur,

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 = [

y - size,

x + columnSize,

y - size,

x + columnSize,

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 = [

x + size,

y ,

x + size,

y - columnSize,

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 = [

(x-len).toFixed(0),

(y-len).toFixed(0),

(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 = [

x.toFixed(0),

(y-1.33*r).toFixed(0),

(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 = [

x.toFixed(0),

(yr).toFixed(0),

(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 = [

rx + r * cosStart,

ry + r * sinStart,

'UN',

longArc,

rx + r * cosEnd,

ry + r * sinEnd,

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]

}, {

color: '#AA4643',

dotType : 'triangle',

data: [-44,12,78,-100,13,4,-56,-34]

}, {

color: '#89A54E',

dotType : 'diamond',

data: [null,78,83,null,22,-78,2,44,78]

}, {

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]

}, {

color: '#AA4643',

data: [44,12,78,100,13,44,56,34]

}, {

color: '#89A54E',

data: [null,101,83,null,22,78,88,44,78]

}, {

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]

}, {

color: '#AA4643',

data: [-0.22,0.82,0.55,1.32,0.33,0.95,null,1,0.65,null,0.78]

}, {

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]

}, {

color: '#AA4643',

data: [45,33,33,411]

}, {

color: '#89A54E',

data: [55,null,75,233]

}, {

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]

}, {

color: '#AA4643',

data: [845,666,100,null,666,677,56,88,633,55,555]

}, {

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. . . . . . .