JavaScript verwendet Smiplechart, um einfache Diagramme zu implementieren

Autor：Eve Cole Aktualisierungszeit：2025-06-14 03:16:01

Unterstützen Sie Linear Graph Area Graph Histogramm Kreisdiagramm

Unterstützt mehrere Browser

Gebrauchte SVG VML

Die Codekopie lautet wie folgt:

<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">

<kopf>

<title> smiplechart </title>

.cc {

Höhe: 450px; Breite: 800px; Grenze: 1PX Solid #999; Position: Relativ; Rand: 20px;

}

</style>

</head>

<body>

(Funktion (doc, undefiniert) {

var win = this,,

uUuid = -1,

hassvg = win.svGangle || doc.implementation.hasfeature ("http://www.w3.org/tr/svg11/feature#basicsstructure", "1.1"),

isie = /msie/i.test(navigator.useragent) &&! Win.opera,

Path = hassvg? 'D': 'Path',,

Siegel = 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. $$ = function (id) {

return document.getElementById (id);

};

win.extend = function () {

var target = argumente [0] || {}, i = 1, Länge = Argumente.length, Deep = true, Optionen;

if (typeof target === "boolean") {

Deep = Ziel;

Ziel = Argumente [1] || {};

i = 2;

}

if (typeof target! == "Object" && object.prototype.toString.call (Ziel)!

target = {};

für (; i <länge; i ++) {

if ((Optionen = Argumente [i])! = NULL)

für (var name in Optionen) {

var src = target [name], copy = options [name];

if (Ziel === Kopie)

weitermachen;

if (Deep && copy && typeof copy === "Objekt" &&! copy.nodetype) {

target [name] = argumente.callee (tiefe, src || (copy.length! = null? []: {}), copy);

}

sonst wenn (kopieren! == undefiniert)

Ziel [Name] = Kopie;

}

Ziel zurückgeben;

};

win.each = function (Objekt, Rückruf, args) {

var name, i = 0, Länge = Objekt.Length;

if (args) {

args = array.prototype.slice.call (Argumente) .Slice (2);

if (Länge === undefiniert) {

für (Name im Objekt)

if (callback.apply (Objekt [Name], [Name, Objekt [Name]]. concat (args)) === false)

brechen;

} anders

für (; i <länge; i ++)

if (callback.apply (Objekt [i], [i, Objekt [i]]. concat (args)) === false) //

brechen;

} anders {

if (Länge === undefiniert) {

für (Name im Objekt)

if (callback.call (Objekt [Name], Name, Objekt [Name]) === false)

brechen;

} anders

für (var value = object [0];

I <Länge && callback.call (Wert, ich, Wert)! == false; value = Object [++ i]) {}

}

Objekt zurückgeben;

};

win.contains = function (p, c) {

if (! p ||! c) return false;

if (p === c) RECHT WAHR;

RECHT ISIE

? P.Contains (c)

: p.comParedocumentPosition (c) == 20

? WAHR

: FALSCH;

};

// -----------------------------------------------------------

Funktionsprozesspunkt (x) {

Issie zurückgeben? ~~ x.tofixed (0): ~~ x.tofixed (0) + 0,5;

};

Funktion caltextlen (txt, cssstr) {

var span = doc.createelement ('span');

if (cssstr) {

Typof CSSSTR === 'String' '

? span.style.csSTEXT = CSSSTR

: Extend (Span.Style, CSSSTR);

}anders{

verlängern (span.style, {

Fontsiz: '12px',

Fontfamily: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, Sans-Serif '

});

}

span.innerhtml = txt || '';

span.style.visibility = 'versteckt';

doc.body.appendchild (span);

var width = span.offsetwidth,,

Höhe = span.offseteight;

doc.body.removechild (span);

return {w: width, h: Höhe};

};

Funktionswinkel (R, Mitte, O, Jingdu) {

var hudu = math.pi*2*(o/360),

x = center [0]+ r*math.sin (hudu),

y = center [1]+ -r*math.cos (Hudu);

return [x.tofixed (jingdu || 0), y.tofixed (jingdu || 0)];

}

Funktion xx (a, b, linenum) {

var t = 1000,

stf = ((b*ta*t)/linenum)/t,,

arr = [1,2,2,5,5,10],

c = 1,

// Die Kardinalität der Trennlinie beträgt [1, 2, 2,5, 5, 10]. Dieser Schritt besteht darin, herauszufinden, in welchem Bereich das Intervall gehört

if (stf <arr [0]) {

while (stf <arr [0]) {

C = C*10;

arr [0] = arr [0]/c;

}

jeweils ([1,2,2,5,5,10], Funktion (i, o) {

arr [i] = o/c;

});

} else if (stf> arr [4]) {

while (stf> arr [4]) {

C = C*10;

arr [4] = arr [4]*c;

}

jeweils ([1,2,2,5,5,10], Funktion (i, o) {

arr [i] = o*c;

});

}

// Folgen Sie dem Intervall, um den nächsten im Intervall am nächsten zu finden

jeweils (arr, Funktion (i, o) {

if (stf <= o) {

v = o;

false zurückgeben;

}

});

var bj = (mathabs (a)*t)/(v*t),

ba = 0,

ISZ = BJ! == Parseint (BJ);

Isz

&& a> 0

? ba = -a%v*t

: ba = (mathabs (a)%vv)*t;

a = (a*t+ba)/t;

B = (b*t+(b%v === 0? 0: (vb%v))*t)/t;

// Sehen Sie sich an, wie viele Linien übrig sind und nicht gezeichnet sind

var num = math.max (0, linenum - math.round ((ba)/v));

if (a> = 0) {

// Vergleichsfänger koordinieren

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)

brechen;

}

if (num! = 0) {

while (num! == 0) {

B = (b*t+v*t)/t

num--;

}

}anders{

// Vergleichsfänger koordinieren

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)

brechen;

}

if (num! = 0) {

while (num! == 0) {

a = (a*tv*t)/t

num--;

}

return {min: a, max: b, stf: v};

}

// ---------------------------------------------------------------------------------------------------------------------------------------------------

// Erstellen Sie einige Kreationen von SVG -VML -Elementen und löschen Sie Attributstile == Einige Operationen

win.Vector = function () {};

vector.prototype = {

$ c: Funktion (grafisch, nodhename) {

this.element = this [0] = doc.createelementns ('http://www.w3.org/2000/svg', nodhename);

this.graphic = grafisch;

gib dies zurück;

Attr: Funktion (Hash, Val) {

var elem = this.element,

Schlüssel,

Wert;

if (typeof Hash === 'String') {

if (val === undefiniert) {

return Elem.getAttribute (Hash);

}anders{

Elem.Setattribute (Hash, Val);

gib dies zurück;

}

} anders {

für (Schlüssel in Hash) {

value = Hash [Schlüssel];

if (key === path) {

value && value.join

&& (value = value.join (''));

/(Nan | |^$)/. Test (Wert)

&& (value = 'm 0 0');

}

Elem.Setattribute (Schlüssel, Wert)

}

gib dies zurück;

CSS: Funktion (Hash) {

für (var Schlüssel in Hash) {

Isie && key == "Depazität"

? Dies [0] .Style ['filter'] = "alpha (opacity ="+ Hash [Schlüssel] * 100+ ")"

: this [0] .style [key] = Hash [Schlüssel];

}

gib dies zurück;

on: function (EventName, Handler) {

var self = this;

/* this.element.addeventListener(eventname,Function () {

Handler.Call (Selbst)

},FALSCH);*/

this.element ['on' + eventName] = function (e) {

e = e || win.event;

Handler.Call (self, e);

}

gib dies zurück;

appendTo: function (übergeordnet) {

if (übergeordnet) {

Elternschaft

? Parent.element.appendchild (this.element)

: parent.appendchild (this.element)

} anders {

this.graphic.container.Appendchild (this.element);

}

gib dies zurück;

addText: function (str) {

var elem = this.element;

if (Elem.nodename === 'text') {

Elem.AppendChild (doc.CreateTextNode (str+''));

}

gib dies zurück;

Setopazität: Funktion (v) {

this.attr ('Fill-Opacity', v);

gib dies zurück;

setSize: function (v) {

Dies [0] .Nodename === 'Kreis'

? this.attr ('r', 4+(v === 0? 0: 2))

: this.attr ({'stroke-width': v});

gib dies zurück;

tofront: function () {

this [0] .Parentnode.AppendChild (this [0]);

gib dies zurück;

Show: function () {

this [0] .Style.Display = 'Block';

gib dies zurück;

ausblenden: function () {

this [0] .Style.Display = 'None';

gib dies zurück;

zerstören: function () {

// Knoten zerstören ............

var node = this [0] || Das;

node.onmouseover = node.onmouseout = node.onclick = null;

node.parentnode

&& node.parentnode.removechild (node);

gib dies zurück;

}

};

// ---------------------------------------------------------------------------------------------------------------------------------------------------

// ---------------------------------------------------------------------------------------

// Wenn es VML ist, einige dieser Methoden zu ändern

if (! hassvg) {

// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

doc.CreatestyLesHeet (). adRule (". VML", "Verhalten: URL (#Standard#vml); Anzeige: Inline-Block; Position: Absolut; links: 0px; obere: 0px");

! doc.namePaces.vml &&!+"/v1";

doc.namePaces.add ("VML", "Urn: Schemas-Microsoft-Com: VML");

erweitern (vector.Prototype, {

$ c: Funktion (grafisch, nodhename) {

var name = nodeName || 'Form';

this.element = this [0] = (name === 'div' || name === 'span'))

? doc.createelement (Name)

: doc.createelement ('<vml:'+name+'>');

this.graphic = grafisch;

gib dies zurück;

/*on: function (eventName, Handler) {

var self = this;

this.element.attachEvent ("on" + Ereignisname, function () {

Handler.Call (Selbst);

});

gib dies zurück;

},*/

addText: function (txt) {

this [0] .Nerhtml = txt || '';

gib dies zurück;

setSize: function (v) {

dieses [0] .strokegewicht = v;

gib dies zurück;

Setopazität: Funktion (v) {

this.opacity.opacity = v;

gib dies zurück;

}

});

}

// ---------------------------------------------------------------------------------------

// Zeichnungskategorie

win.smiplechart = function () {

this.init.apply (this, Argumente);

};

Smilechart.List = [];

smilechart.timer = null;

smilechart.lazyload = function (id) {

id = id || '0' '

Smilechart.List [ID]

&& smiplechart.list [id] .loadme ();

};

smilechart.prototype = {

Optionen: {

Diagramme: {

Padding: 20,,

Radius: 200,

Stil: {

Fontfamilie: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, Sans-Serif ',

Fontsize: '12px',

Hintergrund: '#ffffff'

}

Titel: {

Text: '',

Y: 10,

Stil: {

Schriftfamilie: 'Verdana, Arial, Helvetica, Sans-Serif',

fontsize: '16px',

Schriftgewicht: 'mutig'

}

Untertitel: {{

Text: '',

Y: 30,

Stil: {

Schriftfamilie: 'Verdana, Arial, Helvetica, Sans-Serif',

Fontsize: '12px',

Farbe: '#111'

}

yunit: {

Text: '',

Stil: {

Schriftfamilie: 'Verdana, Arial, Helvetica, Sans-Serif',

Fontsize: '12px',

Farbe: '#111'

Leinenum: 10

}

Init: Funktion (Container, Optionen) {

Clearimeout (Smiplechart.Timer)

var self = this;

this.width = container.offsetwidth;

this.height = container.offseteight;

this.currlist = {};

this.uuuid = ++ uUuid;

this.timer = null;

// Die Hauptsammlung der Zeichnungsgruppe

// {id: {dom: xx, show: true}}

this.maingroup = {};

// Was bei der Segmentierung verwendet werden soll, bedeutet zu wissen, welche versteckt sind, weil es um neu gezogen wird

this.hidelist = {};

// Die Zeichnung in SVG muss ein SVG -Tag -VML haben und Div verwenden

this.container = hassvg

? New Vector (). $ C (1, 'SVG')

.Attr ({{

xmlns: 'http://www.w3.org/2000/svg',,

Version: '1.1',

Breite: this.width,

Höhe: this.height

})

.css ({fontsize: '12px'})

.Appendto (Container)

: New Vector (). $ C (1, 'Div')

.css ({{

Fontsize: '12px',

Breite: this.width +'px',

Höhe: this.height+'px'

})

.Appendto (Container);

this.loading = container.AppendChild (doc.createelement ('img'));

this.loading.setattribute ('src', 'http: //images.cnblogs.com/cnblogs_com/wtcsy/192373/r_loading.gif');

this.loading.style.position = 'absolut';

this.loading.style.top = container.offseteight/2- this.loading.offseteight/2+'px';

this.loading.style.left = container.Offsetwidth/2- this.loading.offsetwidth/2+'px';

var c = extend (true, {}, this.options),

opts = this.opts = erweitern (true, c, optionen),

style = extend (optts.charts.style, {

Breite: this.width,

Höhe: this.height

});

Smilechart.List [this.uuuid] = this;

smilechart.timer = setTimeout (function () {

smilechart.lazyload ();

}, 200);

LoadMe: function () {

var opts = this.opts,

self = this,

type = optts.charts.type;

this.container = this.container

.on ('Mausout', Funktion (e) {

var elem = E. E. TOELEMENATION;

if (! enthält (this [0], Elem)) {

self.hidetooltip ();

self.currlist.dot

&& self.currlist.dot.setsize (0);

self.currlist.line

&& self.currlist.line.setsize (1.5);

self.currlist = {};

}

})

.css ({display: 'keine'}) [0];

// Einige Parameter erforderlich bei der Berechnung der Zeichenplatte

this.getDrawarea ()

.CreateTooltip () // Erstellen Sie ein Feld für Eingabeaufforderungsinformationen

.Drawtitle () // den Titel zeichnen

// Zeichne die Platte

'Linie, Fläche, Pie'.Indexof (Typ)> = 0

&& (optts.charts.panel = 'x');

'Pie, Pies'.indexof (Typ) <0

&& this.drawpanel ();

this.drawlegend (opts.legend.type); // Farbblockbalken zeichnen

var type = {

Zeile: 'Drawline',

Bereich: 'DrawArea',

Spalten: 'DrawColumns',

Kuchen: 'Drawpie',

Kuchen: 'Drawpies',

Segment: 'DrawSegment'

} [optts.charts.type];

// Zeichnen .........

Dieser [Typ] ();

// Knoten löschen

this.loading.parentnode.removechild (this.loading);

// Die Referenz trennen

this.loading = null;

this.container.style.display = '';

setTimeout (function () {

smilechart.lazyload ((++ self.uuuid)+'');

}, 10)

createLement: function (nodeName) {

return New Vector (). $ C (this, nodeName);

Gruppe: Funktion (Name) {

return this.createelement (hassvg? 'g': 'div'). attr ('mark', name);

GetDrawarea: function () {

var opts = this.opts,

width = this.width,

Höhe = this.height,

title = optts.title,

Untertitel = opts.subtitle,

Bereich = {

// Entfernen Sie die Skala -Textbreite auf der linken Seite der Koordinatenachse (geschätzt) 80 ist der feste Wert und nur 80 sind auf der linken Seite des festen Werts gelassen.

Bereichsbreite: Breite - 80,

// Entfernen Sie die Höhe des Textes und Markierungen unter der Achse

AreaHeight: Höhe - 40,

// Die x -Position des Ursprungs wird unten berechnet

startx: 0,

// Die y -Position des Ursprungs wird unten berechnet

Starty: 0,

// Wenn Sie ein Kreisdiagramm mit der X -Koordinate des Zentrums zeichnen, müssen Sie die Position der Mitte des Kreises kennen.

Centerx: 0,

// Wenn Sie ein Kreisdiagramm mit der Y -Koordinate in der Mitte zeichnen, müssen Sie die Position der Mitte des Kreises kennen.

Zentrum: 0

};

// Wenn der Haupttitel vorhanden ist, subtrahieren Sie die Höhe des Haupttitels ansonsten die Höhe von 10

Area.

? title.y

: 10;

// Entfernen Sie die Untertitelhöhe

Area.

? Untertitel.y

: 10

Bereich.startx = 80;

Bereich.Starty = Höhe - 40;

// die Position der Mitte des Kreises

Bereich.Centerx = Breite / 2;

Bereich.Centery = Höhe / 2;

// lass etwas Platz auf der rechten Seite

Area.AreAwidth -= 20;

// hinterlasse etwas Abstand oben

Bereich.Areaheight -= 15;

optts.Area = Bereich;

gib dies zurück;

DrawTitle: function () {

var opts = this.opts,

self = this,

arr = [optts.title, opts.subtitle, opts.yunit],

// grundlegende Parameter der Position von 3 Titelkoordinaten

config = [

{

x: this.width / 2,,

Y: opts.title.y

{

x: this.width / 2,,

Y: opts.subtitle.y

{

X: opts.yunit.x,

y: this.height / 2 - 20

}

tpanel = this.group ('title')

.Appendto ();

jeweils (arr, function (i, title) {

var text = title.text;

if (text) {

var elem = self.basedraw.span (self, {

"Text-Anchor": "Links",,

x: mathmax (config [i] .x - caltextlen (text, title.style) .w/2,10),

Y: config [i] .y

}, caltextlen (title.text, title.style) .h)

.css (title.style)

.addText (Text)

.Appendto (tpanel);

// Wenn es 2 ist, bedeutet dies, dass der Untertitel es vertikal ausdrücken wird

if (i === 2) {

Hassvg

? elem.attr ({transformation: 'rotate (270,'+(opts.yunit.x+10)+','+self.height / 2+')'})

}

});

gib dies zurück;

// Zeichnen von Tellern ist problematischer

Drawpanel: Funktion (Typ) {

varopts = this.opts,

self = this,

Bereich = optts.ara,,

Chartstype = opts.charts.type,

ISSEGENT = CHARTESTYPE === 'Segment',

// ist die Art der horizontalen oder vertikalen Platte

Typ = opts.charts.panel || 'X';

// Bodenplatte

var drawAreawidth = aa.AreeAwidth,

DrawAreAheight = Area.Areaheight,

// die Koordinaten des Ursprungs

startx = area.startx,

starty = aa.starty;

var alldata = [],

minvalue = 0,,

MaxValue = 10,

// Die Anzahl der Linien kann nur zwischen 1 und 10 liegen

Leinenum = MathMin (10, mathmax (opts.yunit.linenum, 1)),

Personal;

// alle Daten kombinieren

jeweils (opts.chartData, Funktion (i, o) {

// Wenn es sich um ein Balkendiagramm handelt, wird es für alle Daten zusammengefasst

IsSegment

? jeweils (O.Data, Funktion (j, d) {

Alldata [J]

? Alldata [j] = Alldata [j] + (~~ D)

: Alldata [j] = ~~ D;

})

: Alldata = Alldata.Concat (O.Data)

});

// Sortieren Sie alle Daten, um den Maximalwert und den Mindestwert unten zu finden

Alldata.sort (Funktion (a, b) {return ab});

// Beenden Sie den Maximalwert und den Mindestwert

maxValue = alldata [alldata.length - 1];

jeweils (Alldata, Funktion (i, o) {

if (o! == null) {

minvalue = o;

false zurückgeben;

}

});

// Hauptplattenbehälter

var panel = this.group ('panel'). appendTo ();

var result = xx (minvalue, maxValue, linenum),

min = result.min,,

max = result.max,

f = result.stf;

IsSegment

&& (min = 0);

// bedeutet, dass die horizontale Koordinate oder Doppelkoordinate gezogen wird

if (type.tolowerCase () === 'x') {

// Untergrundeinheit Intervall

varxpices = DrawAreaWidth / opts.xunit.units.length,

// Der Mittelpunkt des Einheitsintervalls

offset = xpices / 2,

ypices = DrawAreaheightheight / Linenum;

var y = hassvg? 5: 10,

t = 1000,

Spanne;

jeweils (opts.xunit.units, function (i, d) {

self.basedraw.path (self, {

Grenze: 1,,

BorderColor: '#C0C0C0',

isFill: falsch,

Weg : [

processPoint (startx + (i * xpices)),

ProcessPoint (Starty),

processPoint (startx + (i*xpices)),

ProcessPoint (Starty + 5)

]

}).

appendTo (Panel);

span = self.basedraw.span (self, {

x: startx + offset + (i * xpices),

Y: Starty+Y,

'Text-Anchor': 'Middle' '

})

.css ({{

Schriftfamilie: 'Verdana, Arial, Helvetica, Sans-Serif',

Fontsize: '12px'

})

.addText (opts.xunit.units [i])

.Appendto (Panel) [0];

! Hassvg

&& (span.style.left = parseInt (span.style.left) - span.offsetwidth/2+'px');

});

für (i = 0; i <= linenum; i ++) {

self.basedraw.path (self, {

Grenze: 1,,

BorderColor: '#C0C0C0',

isFill: falsch,

Pfad: [m, startx, processPoint (starty - (i * ypices)), l, processPoint (startx + drawAreaWidth), ProcessPoint (Starty - (i * ypices))]

})

.css ({Zindex: -10})

.Appendto (Panel);

var span = self.basedraw.span (self, {

X: Startx - 15,

y: starty - i * ypices -kaltextlen (min+i * f+''). h/2,,

'Text-Anchor': 'Middle' '

})

.css ({{

'Schriftfamilie': 'Verdana, Arial, Helvetica, Sans-Serif',

'Schriftgröße': '12px',,

Breite: '40px',

Anzeige: 'Block',

Textalign: 'Recht'

})

.AddText ((min*t+(i*t*f/t)*t)/t+'')

.Appendto (Panel) [0];

if (! hassvg) {

span.style.top = parseInt (span.style.top) + span.offseteight/2 -5 + 'px';

span.style.left = parseInt (span.style.left) -35+'px'

}

}anders{

// Untergrundeinheit Intervall

Variationen = DrawAreAheight / (opts.xunit.units.length),

// Der Mittelpunkt des Einheitsintervalls

offset = math.round (ypices / 2),

x = hassvg? 25: 70,

y = hassvg? 0: 5,

Spanne

jeweils (opts.xunit.units, function (i, d) {

self.basedraw.path (self, {

Grenze: 1,,

BorderColor: '#C0C0C0',

isFill: falsch,

Weg : [

ProcessPoint (startx-5),

processPoint (starty-i * ypices),

ProcessPoint (startx),

processPoint (starty-i * ypices),

]

})

.Appendto (Panel);

span = self.basedraw.span (self, {

x: startx - x,

y: starty -i * ypices-offset-kaltextlen (d) .h/2 + y,

'Text-Anchor': 'Middle' '

})

.css ({{

Schriftfamilie: 'Verdana, Arial, Helvetica, Sans-Serif',

Fontsize: '12px',

Breite: '60px',

Textalign: 'Recht'

})

.addText (d)

.Appendto (Panel)

});

var xpices = DrawAreaWidth / Linenum;

für (var i = 0; i <= linenum; i ++) {

self.basedraw.path (self, {

Grenze: 1,,

BorderColor: '#C0C0C0',

isFill: falsch,

Weg : [

processPoint (startx + (i * xpices)),

ProcessPoint (Starty),

processPoint (startx + (i*xpices)),

ProcessPoint (Starty - DrawAreAheight)

]

}).

appendTo (Panel);

self.basedraw.span (self, {

x: startx - caltextlen (min+i * f+''). w/2+i * xpices,

Y: Starty,

'Text-Anchor': 'links'

})

.css ({{

Schriftfamilie: 'Verdana, Arial, Helvetica, Sans-Serif',

Fontsize: '12px'

})

.addText (min+i*f+'')

.Appendto (Panel);

}

// ---------------------------------------------------------------------------------------------------------------------

// Da der Startpunkt wahrscheinlich nicht von 0 gestartet wird, muss der Wert des Teils 0 am Startpunkt hinzugefügt werden.

var jianju = 0;

if (min> 0) jianju = min;

if (max <0) jianju = max;

startx = optts.charts.panel === 'x'? startx: startx-xpices*(min/f);

starty = optts.charts.panel === 'x'? Starty + ypices*(min/f): Starty;

opts.draw = {

Startx: Startx, // X -Achsen -Startpunkt

Starty: Starty, // Y -Achsen -Startpunkt

Xpices: Xpices, // Breite jedes Teils der x -Achse

Ypices: Ypices, // die Breite jedes Teils der Y -Achse

Offset: Offset, // x Single Branch Center Punktpositionsposition Offset

Jianjuy: Jianju*ypices/f,

Jianjux: Jianju*xpices/f,

Feed: f // Wie viele pro y Achse gibt es

}

gib dies zurück;

CreateToolTip: function () {

// eine Gruppe

this.tipc = this.group ('Tipp')

.css ({Zindex: 200, Höhe: '20px', Breite: '20px', Position: 'Absolute'})

.Appendto ()

.verstecken()

// zeichne einen rahmenbasierten Raw

this.tipbox = this.basedraw.rect (this, {arc: 0.22, fill: '#ffff', Grenze: 2, BorderColor: '#606060'})

.Appendto (this.tipc)

// Weil G in SVG direkt positioniert werden kann, aber die Gruppe in VML ist sehr langsam, so dass die DIV geändert wird, sodass der Elternteil hier nicht das gleiche ist wie der Fremde

var p = isie? this.tipBox: this.tipc;

this.tiptxtContainer = this.basedraw.text (this, {fill: '#000000', x: 5, y: 19, 'textanchor': 'links'})

.css ({{

Schriftfamilie: 'Verdana, Arial, Helvetica, Sans-Serif',

Fontsize: '12px',

Hintergrund: '#fff'

})

.Appendto (p);

this.tiptext = doc.CreateTextNode ('');

this.tiptxtContainer [0] .AppendChild (this.tipText);

gib dies zurück;

showtooltip: function (obj, x, y, data) {

/*var txt = obj.name + ':' + Daten,

size = caltextlen (txt, this.tiptxtContainer [0] .Style.csStext),

pos = {x: x - (size.w + 5 * 2)/2, y: y - 32};

this.tipc

.tofront ()

.zeigen();

if (hassvg) {

this.tipc.attr ({transform: 'translate ('+pos.x+','+pos.y+')'});

Diese.Tipbox

.Attr ({Breite: Größe.W + 5 * 2, Höhe: Größe.H + 5 * 2, Schlaganfall: obj.color || '#606060'});

}anders{

this.tipc.css ({links: pos.x, oben: pos.y});

Diese.Tipbox

.css ({Breite: Größe.W + 5 * 2, Höhe: Größe.H + 5 * 2})

this.tipbox [0] .strokecolor = obj.color || '#000';

}

this.tiptext.nodeValue = txt || '';*/

Clearimeout (this.timer);

var txt = obj.name + ':' + Daten,

self = this,

size = caltextlen (txt, this.tiptxtContainer [0] .Style.csStext),

pos = {x: x - (size.w + 5 * 2)/2, y: y - 32};

if (hassvg) {

self.tipbox

.Attr ({Breite: Größe.W + 5 * 2, Höhe: Größe.H + 5 * 2, Schlaganfall: obj.color || '#606060'});

}anders{

self.tipbox

.css ({Breite: Größe.W + 5 * 2, Höhe: Größe.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: 'translate ('+pos.x+','+pos.y+')', pos: pos.x+'-'+pos.y})

: self.tipc.attr ({pos: pos.x+'-'+pos.y}). CSS ({links: pos.x, ober: pos.y});

this.tipc

.tofront ()

.zeigen();

}anders{

var move = function (t, b, c, d) {

return c*(t/= d)*t + b;

t = 0,

b = self.tipc.attr ('pos'). split ('-'),

c = [pos.x, pos.y],

d = 5;

this.timer = setInterval (function () {

if (t <d) {

t ++;

var x = move (t, ~~ b [0], (~~ c [0])-(~~ b [0]), d),

y = move (t, ~~ b [1], (~~ c [1])-(~~ b [1]), d);

Hassvg

? self.tipc.attr ({transform: 'translate ('+x+','+y+')', pos: x+'-'+y})

: self.tipc.attr ({pos: x+'-'+y}). CSS ({links: x, ober: y});

}anders{

Clearimeout (self.timer);

}

}, 1);

};

Hidetooltip: function () {

this.tipc.hide ();

DrawleGend: Funktion (Typ, neu zeichnen) {

var self = this,,

opts = this.opts,

isline = optts.charts.type === 'Zeile',

// die Größe des Farbblocks

t_width = 20,

t_Height = 20,

// Abstand zwischen den Blöcken

t_space = 5,

datas = optts.chartData,

len = datas.length,

CSS = opts.legend.style,

// Wenn die maximale Länge in Längsrichtung ist, ist die maximale Länge erforderlich

Maxwidth = 10,

MaxHeight = 30,

// der Ort dieser Sache

orig_pos = opts.legend.pos? opts.legend.pos: [2,2],

// versteckte Gruppenfunktionen zeigen

Handle = Funktion (i) {

var g = self.maingroup ['chart'+i],

ISSEGENT = opts.charts.type === 'Segment';

if (g.show) {

g.chart.hide ();

g.show = false;

Hassvg

? this.attr ({fill: '#ccc'})

: this [0] .style.color = '#ccc';

// Wenn es sich um ein segmentiertes Bild handelt, wird es neu gezogen.

if (isSegment) {

self.hidelist [i] = '';

var mAingroup = self.maingroup;

für (var name in Maingroup) {

var parent = maingroup [name] .chart,

Knoten = Eltern [0] .Cildnodes,

len = nodes.length;

// Zerstöre die auf dem Bild gezeichneten Dinge

für (var i = len-1; i> = 0; i-) {

vector.prototype.destroy.call (Knoten [i])

}

// neu streichen

self.drawSegment ();

}

}anders{

g.chart.show ();

g.show = true;

Hassvg

? this.attr ({fill: '#000'})

: this [0] .style.color = '#000'

if (isSegment) {

Selbsthidelist [i] löschen;

var mAingroup = self.maingroup;

für (var name in Maingroup) {

var parent = maingroup [name] .chart,

Knoten = Eltern [0] .Cildnodes,

len = nodes.length;

für (var i = len-1; i> = 0; i-) {

vector.prototype.destroy.call (Knoten [i])

}

self.drawSegment ();

}

arr = [];

Typ = Typ || 'lateral';

var legendpanel = self.group ('legend')

.Appendto ();

if (type === 'lateral') {

// Wenn es horizontal ist

var top = orig_pos [1] + 5,

th = hassvg? 0: 3,

links = orig_pos [0] + 5;

jeweils (Daten, Funktion (i, d) {

links = i === 0? links: t_space+links;

// Berechnen Sie die Position aller linken

// Wenn es sich um ein lineares Diagramm handelt, zeichnen Sie die Zeichnung in Form eines linearen Diagramms

if (isline) {

self.basedraw.path (self, {

Grenze: 1.5,

BorderColor: D.Color,

isFill: falsch,

Weg : [

links.Tofixed (0),,

(Top+10) .Tofixed (0),,

(links+25) .Tofixed (0),,

(Top+10) .Tofixed (0)

]

})

.Appendto (Legendpanel);

self.basedraw [d.dottype || 'Circle'] (Selbst, {

x: links+12,

Y: Top+10,,

R: 4,

FILLCOLOR: D.Color

})

.Appendto (Legendpanel);

}anders{

self.basedraw.rect (self, {

Bogen: 0.1,

Füllung: D.Color,

Grenze: 1,,

BorderColor: D.Color,

links: links,

Top: Top,

Breite: t_width+'px',

Höhe: T_Height+'PX'

})

.Appendto (Legendpanel)

}

links = links + t_width + 2 + t_space;

var w = caltextlen (D.Name, CSS) .W. W.

self.basedraw.span (self, {

"Text-Anchor": "Links",,

x: links,

Y: Top+Th

})

.CSS (Extend (CSS, {Cursor: 'Pointer'}))

.on ('click', function () {

Handle.Call (this, i);

})

.addText (D.Name)

.Appendto (Legendpanel);

links = links + w;

});

this.basedraw.rect (this, {

Bogen: 0.1,

füllen: 'keine',

Grenze: 1.5,

BorderColor: '#666666',

Breite: links+ t_space- Orig_pos [0],

Höhe: MaxHeight,

Links: Orig_Pos [0],

Oben: Orig_Pos [1]

})

.Appendto (Legendpanel);

}anders{

var top = orig_pos [1] + 5,

th = hassvg? 0: 3,

links = orig_pos [0] + 5;

jeweils (Daten, Funktion (i, d) {

TOP = i === 0? Oben: T_space + Top;

self.basedraw.rect (self, {

Bogen: 0.1,

Füllung: D.Color,

Grenze: 1,,

BorderColor: D.Color,

links: links,

Top: Top,

Breite: t_width+'px',

Höhe: T_Height+'PX'

})

.Appendto (Legendpanel);

var h = caltextlen (D.Name, CSS) .H;

self.basedraw.span (self, {

"Text-Anchor": "Links",,

x: links+t_width+2+t_space,

Y: Top+Th

})

.CSS (Extend (CSS, {Cursor: 'Pointer'}))

.addText (D.Name)

.on ('click', function () {

// Wenn es sich um ein mehrschichtiges Kreisdiagramm handelt, kann es nicht versteckt werden

if (opts.charts.type === 'pies') return;

Handle.Call (this, i);

})

.Appendto (Legendpanel);

top = top + h + t_space;

maxwidth = math.max (MaxWidth, Caltextlen (D.Name, CSS) .W);

});

this.basedraw.rect (this, {

Bogen: 0.1,

füllen: 'keine',

Grenze: 1.5,

BorderColor: '#666666',

Breite: Maxwidth+22+15,

Höhe: Top+T_space-Orig_Pos [1],

Links: Orig_Pos [0],

Oben: Orig_Pos [1]

})

.Appendto (Legendpanel);

}

gib dies zurück;

Drawline: function () {

var self = this,,

opts = this.opts,

zeichnen = optts.draw;

jeweils (opts.chartData, Funktion (i, o) {

var id = 'chart'+i,

lineGroup = self.group (id)

.Appendto ();

self.maingroup [id] = {

Diagramm: Linegroup,

Show: wahr

};

var path = [m],

Data = O.Data,

Linie;

für (var i = 0, l = data.length; i <l; i ++) {

if (Daten [i] == null) {

// Wenn diese Daten nicht vorhanden sind und nicht der erste Datenpfad sind, fügen Sie M hinzu m hinzu

if (Pfad [Path.Length - 1]! == m)

path.push (m);

}anders{

// Wenn es nicht der erste Datenpfad ist, fügen Sie L hinzu

i! == 0 && path.push ("l");

// Wenn der erste null ist und nicht der erste, der das L entfernen

if (i> 0 && data [i - 1] == null)

path.pop ();

// Berechnen Sie die Position von x und y des Punktes

var x = draw.startx + draw.offset + (i * draw.xpices),

y = draw.starty - Daten [i] * (Draw.ypices / Draw.Feed);

if (isie) {

x = parsesint (x);

y = parseInt (y);

}

path.push (x);

path.push (y);

// Punkte zeichnen

var dottype = o.dottype || 'circle';

self.basedraw [dottype] (self, {

x: x,

y: y,

R: 4,

FILLCOLOR: O.Color

})

.Attr ({Daten: Daten [i], pos: x+'-'+(y-5)})

.css ({Zindex: 10, Cursor: 'Zeiger'})

.on ('mouseover', (Funktion (o, x, y) {

return function () {

if (self.currlist.dot) {

if (self.currlist.dot [0] === this [0])

zurückkehren;

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 ('Daten'));

self.currlist.dot = this;

self.currlist.line = line;

}

}) (o, x, y))

/*. on ('mausout', function () {

this.setSize (0);

line.setSize (1.5);

})*/

.on ('click', function () {lineGroup.tofront ();})

.Appendto (Linegroup);

}

};

// gefaltete Linien zeichnen

line = self.basedraw.path (self, {

Grenze: 1.5,

BorderColor: O.Color,

isFill: falsch,

Pfad: Pfad

})

.css ({Zindex: 5})

/*. on ('mouseover', function () {

this.setsize (2.5);

})

.on ('mausout', function () {

this.setSize (1.5);

})*/

.on ('click', function () {lineGroup.tofront ();})

.Appendto (Linegroup);

});

gib dies zurück;

DrawArea: function () {

var self = this,,

opts = this.opts,

zeichnen = optts.draw;

jeweils (opts.chartData, Funktion (i, o) {

var id = 'chart' + i,

AreaGroup = self.group (id) .AppendTo ();

self.maingroup [id] = {chart: areaGeGroup, show: true};

// Es gibt 2 Pfade, einer ist der Weg des Region und der andere der Weg der Linie

var AreaPath = [m, (Draw.startx + draw.offset) .Tofixed (0), (Draw.starty-draw.jianjuy) .tofixed (0)],,

Pfad = [m],

Data = O.Data,

Linie;

für (var n = 0, l = data.length; n <l; n ++) {

// Wenn die Daten leer sind

var len = AreaPath.length;

if (data [n] === null) {

// Wenn der vorherige nicht m ist, zeichne es erneut, also füge m hinzu m

if (Pfad [Path.Length - 1]! == m)

path.push (m);

// Wenn die erste oder die Vorderseite null sind, ändern Sie die Startpunktkoordinaten

Len === 3

&& (AreaPath [1] = (Draw.Startx +(n +1)*draw.xpices +draw.offset) .tofixed (0));

// Wenn der vorherige Diagramm nicht die Endkennung ist, wird der folgende Vorgang nicht durchgeführt, wenn die ersten Daten null sind

if (AreaPath [Len - 1]! == Seal && n! == 0) {

AreaPath = AreaPath.concat ([[

AreaPath [Len - 2],

(Draw.starty-draw.jianjuy) .Tofixed (0),

Siegel

]);

}

}anders{

n! == 0 && path.push (l);

AreaPath.push (l);

// Wenn die vorherigen Daten null sind, entfernen Sie das vorherige L

if (n> 0 && data [n - 1] == null) {

path.pop ();

// Wenn der erste null ist, löschen Sie nicht l

N! == 1 && AreaPath.pop ();

}

var x = draw.startx + draw.offset + (n * draw.xpices),

y = draw.starty - Daten [n] * (Draw.ypices / Draw.Feed);

if (isie) {

x = parsesint (x);

y = parseInt (y);

}

path.push (x);

path.push (y);

if (AreaPath [Len - 1] === Seal) {

AreaPath = AreaPath.concat ([[

Parseint (Draw.starty-Draw.jianjuy),

]);

}anders{

AreaPath.push (x);

AreaPath.push (y);

}

// Wenn es der letzte Punkt ist

if (n === l - 1) {

AreaPath.push (x);

AreaPath.push (Parseint (Draw.starty-draw.jianjuy));

}

// Punkte zeichnen

self.basedraw [o.dottype || 'Circle'] (Selbst, {

x: x,

y: y,

R: 4,

FILLCOLOR: O.Color

})

.Attr ({Daten: Daten [n], pos: x+'-'+(y-5)})

.on ('mouseover', (Funktion (o, x, y) {

return function () {

if (self.currlist.dot) {

if (self.currlist.dot [0] === this [0])

zurückkehren;

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 ('Daten'));

self.currlist.dot = this;

self.currlist.line = line;

}

}) (o, x, y))

/*. on ('mausout', function () {

this.setSize (0);

line.setSize (1.5);

//self.hidetooltip ()

})*/

.on ('click', function () {AreaGroup.tofront ();})

.css ({Zindex: 10, Cursor: 'Zeiger'})

.Appendto (AreaGroup);

}

AreaPath.Push (Siegel)

self.basedraw.path (self, {

Grenze: 0,

isFill: wahr,

FILLCOLOR: O.Color,

Deckkraft: 0,5,

Pfad: AreaPath

})

.css ({Zindex: 5})

.Appendto (AreaGroup);

line = self.basedraw.path (self, {

Grenze: 1.5,

BorderColor: O.Color,

isFill: falsch,

Pfad: Pfad

})

/*. on ('mouseover', function () {

Hassvg

? this.attr ({'Strich-Width': 2.5})

: (this [0] .strokegewicht = 2,5);

})

.on ('mausout', function () {

Hassvg

? this.attr ({'Strich-Width': 1.5})

: (this [0] .strokegewicht = 1,5);

})*/

.on ('click', function () {AreaGroup.tofront ();})

.css ({Zindex: -1})

.Appendto (AreaGroup);

});

gib dies zurück;

DrawColumns: function () {

var self = this,,

opts = this.opts,

zeichnen = optts.draw,

ChartData = optts.chartdata,

datalen = chartData.length,

// Der Abstand zwischen mehreren Spalten

Spaltenspace = 3,

// Summe aller Intervalle in einer Position

columnpadding = columnspace * datalen + columnspace,

// die Breite jeder Spalte

columnSize = self.opts.charts.panel === 'x'

? Nummer (((drain.xpices - columnpadding) / datalen) .tofixed (0)))

: Number ((((drain.ypices - columnpadding) / datalen) .tofixed (0));

jeweils (ChartData, Funktion (i, o) {

var data = o.data,

id = 'chart' + i,

isx = optts.charts.panel === 'x',

colgroup = self.group (id) .AppendTo (),

// die Ausgangsposition jedes Punktes

start = self.opts.charts.panel === 'x'

? zeichnen

: Draw.Starty + ColumnSpace + I*(Spaltengröße + Spaltenspace)

self.maingroup [id] = {chart: colGroup, show: true};

für (var j = 0, l = data.length; j <l; j ++) {

if (Daten [j] === null) fortsetzen;

// Wenn es sich um eine seitliche Teller handelt

if (isx) {

var x = nummer ((start + j *draw.xpices) .tofixed (0)),

y = number ((draw.starty-draw.jianjuy) .tofixed (0)),

Höhe = Nummer ((Daten [j] * (Draw.ypices / Draw.feed) -Draw.jianjuy) .tofixed (0)),

Pfad = [

y -hoch,

x + columnse,

y - Höhe,

x + columnse,

Siegel

];

var pos = [x+columnSize/2, data [j]> 0? y-hohe: draw.starty-draw.jianjuy];

}anders{

var x = nummer ((draw.startx+draw.jianjux) .tofixed (0)),

width = number ((data [j]*((draw.xpices / draw.feed))-Draw.jianjux) .Tofixed (0)),,

y = number ((start - (j+1) *draw.ypices) .tofixed (0)),

Pfad = [

x+Breite,

x + Breite,

y + columnse,

y+ columnse,

Siegel

];

var pos = [draw.startX+draw.jianjuX+width/2,y];

}

self.baseDraw.path(self,{

border : 0,

isfill : true,

fillColor : o.color,

opacity : 1,

path : path

})

.attr({data:data[j],pos:pos[0]+'-'+pos[1]})

.css({zIndex:5,cursor:'pointer'})

.on('mouseover',(function(d){

return function () {

this.setOpacity(0.85);

var pos= this.attr('pos').split('-')

self.showTooltip(o,pos[0],pos[1],this.attr('data'));

}

})(data[j])

)

.on('mouseout',function(){

this.setOpacity(1);

})

.appendTo(colGroup);

}

});

return this;

drawPie : function(){

var self = this,

opts = this.opts,

area = opts.area,

rx = area.centerX,

ry = area.centerY,

inc = 0,

total = 0,

data = [],

cumulative = -0.25, // start at top;

circ = 2 * Math.PI,

radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2)),

Fraktion,

half_fraction;

each(opts.chartData,function(i,o){

typeof o.data ==='object'

? (data.push((function(o){

var all =0;

for(var i in o)

all+=~~o[i]

return all

})(o.data)))

:data.push(mathAbs(o.data))

});

each(data,function(i,o){

total = total + o;

});

each(data,function(i,o){

var pieGroup = self.group('chart'+i).appendTo(),

s = inc/total*360,

e = (inc + o)/total*360,

name = opts.chartData[i].name,

size = calTextLen(name),

dot = angle(radiu,[rx,ry],s+(es)/2,2),

x = rx + (dot[0]-rx)/2 - size.w/2,

y = ry + (dot[1]-ry)/2 - size.h/2,

len = Math.sqrt((x-rx)*(x-rx)+(y-ry)*(y-ry)),

moveDisplacement = ((x-rx)*8/len)+','+((y-ry)*8/len);

inc = inc + o;

var value = Number(o);

fraction = total ? value / total : 0;

half_fraction = total ? (value / 2) / total : 0;

var start = cumulative * circ;

half_cumulative = cumulative + half_fraction;

cumulative += fraction;

var end = cumulative * circ;

self.baseDraw.pie(self,{

config : opts.chartData[i],

s : start,

e : end,

r : radiu,

innerR : 0

})

.css({zIndex:5,cursor:'pointer'})

.attr({move:moveDisplacement,pos:dot[0]+'-'+dot[1]})

.on('mouseover',function(){

this.setOpacity(0.85);

var pos = this.attr('pos').split('-');

self.showTooltip(opts.chartData[i],pos[0],pos[1],((es)/360*100).toFixed(0)+'%')

})

.on('mouseout',function(e){

var elem = e.toElement || e.relatedTarget;

//如果碰到里面的文本或者是提示框不消失

if(!elem||contains(this[0].parentNode,elem)||contains(self.tipC[0],elem))

zurückkehren;

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('+','')});

}anders{

var s= m.split(',');

hasSVG

? this.attr({

transform: 'translate('+m+')'

})

: this.css({

left : s[0]+'px',

top : s[1]+'px'

})

this.attr({move:m+'+'});

}

})

.appendTo(pieGroup);

self.mainGroup['chart'+i] = {

chart : pieGroup,

show : true

};

self.baseDraw.span(self,{

x : x,

y : y,

fill : '#fff',

'text-anchor':'left'

})

.css({

fontFamily : 'Verdana,Arial,Helvetica,sans-serif',

fontSize : '12px',

position : 'absolute',

color : '#fff',

cursor : 'pointer',

zIndex : 10

})

.addText(name)

.appendTo(pieGroup);

});

drawPies : function(){

var self = this,

opts = this.opts,

area = opts.area,

rx = area.centerX,

ry = area.centerY,

total = 0,

data = [],

chartData = opts.chartData,

cumulative = -0.25, // start at top;

circ = 2 * Math.PI,

radiu = mathMin(opts.charts.radius,mathMin(area.areaWidth/2,area.areaHeight/2)),

Fraktion,

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'))

zurückkehren;

this.setOpacity(1);

})

.appendTo(piesGroup);

self.baseDraw.span(self,{

x : x,

y : y,

fill : '#fff',

'text-anchor':'left'

})

.attr({m : i+'-'+j})

.css({

fontFamily : 'Verdana,Arial,Helvetica,sans-serif',

fontSize : '12px',

position : 'absolute',

color : '#fff',

cursor : 'pointer',

zIndex : 10

})

.addText(name)

.appendTo(piesGroup);

});

drawSegment : function(){

var self = this,

opts = this.opts,

draw = opts.draw,

chartData = opts.chartData,

typeIsX = opts.charts.panel==='x',

columnPad = 5,

prev = [],

columnSize = ~~(typeIsX?draw.xPices:draw.yPices) - columnPad * 2;

each(chartData,function(i,c){

if(i in self.hideList)

zurückkehren;

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)

zurückkehren;

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,

Siegel

];

var pos = [x + columnSize/2,y-size];

}anders{

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,

Siegel

];

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

Siegel

];

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

Siegel

];

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

Siegel

];

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,

'A',

longArc,

1,,

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'

}anders{

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;

}anders{

attr.strokeWeight = config.border||1 ;

}

attr.strokeColor = config.borderColor || "#C0C0C0";

attr.filled = config.isfill?'t':'f';

attr.filled==='t'

&&(attr.fillcolor=config.fillColor||"#C0C0C0");

attr.coordsize = width+','+height;

attr.path = config.path;

var elem = o.createElement()

.attr(attr)

.css(css);

if(config.opacity){

var fill = o.createElement('fill')

.attr({

type : 'fill',

color : config.fillColor||"#C0C0C0",

opacity : config.opacity

})

.appendTo(elem);

//那这个对象的一个属性引用设置透明的元素以后会用到

elem.opacity = fill[0];

}

return elem;

circle : function(o,config){

var width = o.width,

height = o.height,

attr = {

strokeWeight : 1,

coordsize : width+','+height,

filled : 't'

css ={

width : width+'px',

height : height+'px'

}

x = config.x,

y = config.y,

r = config.r;

attr.strokeColor=attr.fillcolor = config.fillColor

attr.path =[

'wa', // clockwisearcto

x - r, // left

y - r, // top

x + r, // right

y + r, // bottom

x + r, // start x

y, // start y

x + r, // end x

y, // end y

'e' // close

];

return o.createElement()

.attr(attr)

.css(css)

pie : function(o,config){

////config,s,e,r,index

var opts = o.opts,

area = opts.area,

r = config.r,

rx = area.centerX,

ry = area.centerY,

innerR= config.innerR||0,

sDot = angle(r,[rx,ry],s,2),

eDot = angle(r,[rx,ry],e,2),

color = config.config.color,

s = config.s,

e = config.e,

e = e - s == 2 * Math.PI ? e - 0.001 : e,

cosStart = mathCos(s),

sinStart = mathSin(s),

cosEnd = mathCos(e),

sinEnd = mathSin(e),

path = [

'wa', // clockwisearcto

(rx - r).toFixed(0), // left

(ry - r).toFixed(0), // top

(rx + r).toFixed(0), // right

(ry + r).toFixed(0), // bottom

(rx + r * cosStart).toFixed(0), // start x

(ry + r * sinStart).toFixed(0), // start y

(rx + r * cosEnd).toFixed(0), // end x

(ry + r * sinEnd).toFixed(0), // end y

'at', // clockwisearcto

(rx - innerR).toFixed(0), // left

(ry - innerR).toFixed(0), // top

(rx + innerR).toFixed(0), // right

(ry + innerR).toFixed(0), // bottom

(rx + innerR * cosEnd).toFixed(0), // start x

(ry + innerR * sinEnd).toFixed(0), // start y

(rx + innerR * cosStart).toFixed(0), // end x

(ry + innerR * sinStart).toFixed(0), // end y

'x', // finish path

'e' // close

];

return o.baseDraw.path(o,{

border : 1,

border : '#fff',

isfill : true,

fillColor : color,

opacity : 1,

path : path

})

}

});

//---------------------------------------------------------------------------------------------------

})(dokumentieren);

window.onload = function(){

var t = new Date().getTime();

var config = {

charts : {

type : 'line',

radius : 150,

panel : 'x',

Stil: {

fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font

fontSize: '12px'

}

title : {

text: '线性图表',

y: 10,

Stil: {

Farbe: Schwarz',

fontSize: '16px'

}

subTitle : {

text: '线性图表副标题',

y: 35,

Stil: {

color: '#111',

fontSize: '12px'

}

legend : {

enable : true,

//type : 'lateral', // lateral 横向或lengthwise 纵向

type : 'lateral',

pos : [10,10],

Stil:{

fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font

fontSize : '12px',

magin : '0px'

}

yUnit : {

text : '线性图表侧标题',

x : 20,

Stil: {

color : '#111',

fontSize : '12px'

}

xUnit : {

units: [

'Januar',

'Februar',

'Marsch',

'April',

'Mai',

'Juni',

'Juli',

'August',

'September',

'Oktober',

'November',

'Dezember'

]

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)

}

</script>

</body>

</html>

Andere

The problem of JS floating point accuracy is difficult to solve. . . . . . . . .

I hope you can give me some advice on limited level. . . . . . .