JavaScript menggunakan smiplechart untuk mengimplementasikan grafik sederhana

Penulis：Eve Cole Waktu Pembaruan：2025-06-14 03:16:01

Dukung grafik grafik linear grafik grafik histogram pai

Mendukung banyak browser

Menggunakan SVG VML

Salinan kode adalah sebagai berikut:

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

<head>

<title> smiplechart </title>

.cc {

Tinggi: 450px; Lebar: 800px; Perbatasan: 1px Solid #999; Posisi: kerabat; margin: 20px;

}

</tyle>

</head>

<body>

(function (doc, tidak terdefinisi) {

var win = ini,

uuuid = -1,

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

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

path = hassvg? 'd': 'path',

seal = hassvg? 'z': 'e',

Matematika = Matematika,

Mathround = Math.round,

Mathfloor = Math.floor,

MathCeil = Math.ceil,

Mathmax = Math.max,

Mathmin = Math.min,

mathab = math.abs,

Mathcos = Math.cos,

Mathsin = Math.sin,

M = 'm',

L = 'l';

menang. $$ = function (id) {

return document.getElementById (id);

};

win.extend = function () {

var target = argumen [0] || {}, i = 1, panjang = argumen.length, deep = true, opsi;

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

Deep = Target;

target = argumen [1] || {};

i = 2;

}

if (typeOf target! == "objek" && object.prototype.toString.call (target)! = "[fungsi objek]")

target = {};

untuk (; i <panjang; i ++) {

if ((options = argumen [i])! = null)

untuk (nama var di opsi) {

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

if (target === salin)

melanjutkan;

if (deep && copy && typeof copy === "objek" &&! copy.nodetype) {

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

}

lain jika (salin! == tidak ditentukan)

target [name] = copy;

}

target pengembalian;

};

win.each = function (objek, callback, args) {

nama var, i = 0, panjang = objek.length;

if (args) {

args = array.prototype.slice.call (argumen) .slice (2);

if (length === tidak terdefinisi) {

untuk (nama dalam objek)

if (callback.apply (objek [name], [name, objek [name]]. concat (args)) === false)

merusak;

} kalau tidak

untuk (; i <panjang; i ++)

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

merusak;

} kalau tidak {

if (length === tidak terdefinisi) {

untuk (nama dalam objek)

if (callback.call (objek [nama], name, objek [nama]) === false)

merusak;

} kalau tidak

untuk (var value = objek [0];

i <length && callback.call (value, i, value)! == false; value = objek [++ i]) {}

}

objek pengembalian;

};

win.contains = function (p, c) {

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

if (p === c) return true;

Kembalikan ISIE

? P. Contains (c)

: p.comparedocumentposition (c) == 20

? BENAR

: PALSU;

};

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

function processpoint (x) {

Kembalikan ISIE? ~~ x.tofixed (0): ~~ x.tofixed (0) + 0.5;

};

fungsi caltextlen (txt, cssstr) {

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

if (cssstr) {

typeof cssstr === 'string'

? span.style.csstext = cssstr

: extend (span.style, cssstr);

}kalau tidak{

Extension (span.style, {

Fontsiz: '12px',

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

});

}

span.innerhtml = txt || '';

span.style.visibility = 'tersembunyi';

doc.body.appendchild (span);

var width = span.offsetwidth,

tinggi = span.offsetheight;

doc.body.removechild (span);

return {w: width, h: height};

};

sudut fungsi (r, tengah, o, jingdu) {

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

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

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

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

}

fungsi xx (a, b, linenum) {

var t = 1000,

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

ARR = [1,2,2.5,5,10],

C = 1,

// Kardinalitas garis pemisah adalah [1, 2, 2.5, 5, 10] Langkah ini adalah untuk mencari tahu rentang interval mana yang termasuk dalam

if (stf <arr [0]) {

while (stf <arr [0]) {

C = C*10;

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

}

masing -masing ([1,2,2.5,5,10], fungsi (i, o) {

arr [i] = o/c;

});

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

while (stf> arr [4]) {

C = C*10;

ARR [4] = ARR [4]*C;

}

masing -masing ([1,2,2.5,5,10], fungsi (i, o) {

arr [i] = o*c;

});

}

// Ikuti interval untuk menemukan yang terdekat dalam interval

masing -masing (arr, function (i, o) {

if (stf <= o) {

v = o;

mengembalikan false;

}

});

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

ba = 0,

isz = bj! == parseInt (bj);

Isz

&& a> 0

? ba = -a%v*t

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

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

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

// Lihatlah berapa banyak garis yang tersisa dan tidak ditarik

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

if (a> = 0) {

// Koordinat Integer Perbandingan

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)

merusak;

}

if (num! = 0) {

while (num! == 0) {

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

num--;

}

}kalau tidak{

// Koordinat Integer Perbandingan

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)

merusak;

}

if (num! = 0) {

while (num! == 0) {

a = (a*tv*t)/t

num--;

}

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

}

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

// Buat beberapa kreasi elemen SVG VML dan hapus gaya atribut == Beberapa operasi

win.vector = function () {};

vector.prototype = {

$ c: function (grafik, nodename) {

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

this.graphic = grafik;

kembalikan ini;

attr: function (hash, val) {

var elem = this.element,

kunci,

nilai;

if (typeof hash === 'string') {

if (val === tidak terdefinisi) {

return elem.getAttribute (hash);

}kalau tidak{

elem.setAttribute (hash, val);

kembalikan ini;

}

} kalau tidak {

untuk (kunci dalam hash) {

nilai = hash [key];

if (key === path) {

value && value.join

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

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

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

}

elem.setAttribute (kunci, nilai)

}

kembalikan ini;

css: function (hash) {

untuk (tombol var dalam hash) {

isie && key == "opacity"

? Ini [0] .Style ['filter'] = "alpha (opacity ="+ hash [key] * 100+ ")"

: ini [0] .STYLE [KEY] = HASH [KEY];

}

kembalikan ini;

on: function (eventName, handler) {

var self = ini;

/*this.element.addeventListener(eventName.function () {

handler.call (self)

},PALSU);*/

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

E = E || win.event;

handler.call (self, e);

}

kembalikan ini;

appendto: function (indent) {

if (indent) {

Parent.element

? Parent.element.AppendChild (this.element)

: Parent.AppendChild (This.element)

} kalau tidak {

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

}

kembalikan ini;

AddText: function (str) {

var elem = this.element;

if (elem.nodename === 'teks') {

elem.appendchild (doc.createTextNode (str+''));

}

kembalikan ini;

setopacity: function (v) {

this.attr ('isi-opacity', v);

kembalikan ini;

setsize: function (v) {

ini [0] .nodename === 'Circle'

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

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

kembalikan ini;

Tofront: function () {

ini [0] .parentnode.AppendChild (ini [0]);

kembalikan ini;

Tampilkan: function () {

ini [0] .style.display = 'block';

kembalikan ini;

hide: function () {

ini [0] .style.display = 'none';

kembalikan ini;

hancurkan: function () {

// Hancurkan node ............

var node = ini [0] || ini;

node.onmouseover = node.onmouseout = node.onClick = null;

node.parentnode

&& node.parentnode.removechild (node);

kembalikan ini;

}

};

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

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

// Jika VML untuk memodifikasi beberapa metode ini

if (! hassvg) {

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

doc.createstylesheet (). addrule (". vml", "perilaku: url (#default#vml); display: inline-block; posisi: absolute; kiri: 0px; atas: 0px");

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

doc.namespaces.add ("vml", "guci: schemas-microsoft-com: vml");

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

Extens (vector.prototype, {

$ c: function (grafik, nodename) {

nama var = nodename || 'membentuk';

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

? doc.createelement (nama)

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

this.graphic = grafik;

kembalikan ini;

/*on: function (eventName, handler) {

var self = ini;

this.element.attachevent ("on" + eventName, function () {

handler.call (self);

});

kembalikan ini;

},*/

AddText: function (txt) {

ini [0] .innerHtml = txt || '';

kembalikan ini;

setsize: function (v) {

ini [0] .strokeWeight = v;

kembalikan ini;

setopacity: function (v) {

this.opacity.opacity = v;

kembalikan ini;

}

});

}

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

// Kategori Menggambar

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

win.smiplechart = function () {

this.init.apply (ini, argumen);

};

smilechart.list = [];

smilechart.timer = null;

smilechart.lazyload = function (id) {

id = id || '0'

smilechart.list [id]

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

};

smilechart.prototype = {

Opsi: {

Bagan: {

Paddingright: 20,

Radius: 200,

gaya: {

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

FontSize: '12px',

Latar Belakang: '#FFFFFF'

}

judul: {

Teks: '',

Y: 10,

gaya: {

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

FontSize: '16px',

Kelas Font: 'Bold'

}

Subtitle: {

Teks: '',

Y: 30,

gaya: {

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

FontSize: '12px',

Warna: '#111'

}

yunit: {

Teks: '',

gaya: {

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

FontSize: '12px',

Warna: '#111'

Linenum: 10

}

init: function (wadah, opsi) {

ClearTimeout (Smiplechart.timer)

var self = ini;

this.width = container.offsetWidth;

this.height = container.offsetHeight;

this.currlist = {};

this.uuuid = ++ uuuid;

this.timer = null;

// Bentuk koleksi utama grup gambar

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

this.maingroup = {};

// Apa yang harus digunakan saat segmentasi adalah untuk mengetahui mana yang tersembunyi karena melibatkan menggambar ulang

this.hidelist = {};

// Gambar di SVG harus memiliki tag svg vml dan menggunakan div

this.container = hassvg

? vektor baru (). $ C (1, 'svg')

.attr ({

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

Versi: '1.1',

Lebar: This.width,

Tinggi: this.height

})

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

.Appendto (wadah)

: vektor baru (). $ C (1, 'Div')

.css ({

FontSize: '12px',

Lebar: this.width +'px',

Tinggi: this.height+'px'

})

.Appendto (wadah);

this.loading = container.appendChild (doc.createElement ('img'));

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

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

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

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

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

opts = this.opts = extend (true, c, opsi),

style = stagar (opts.charts.style, {

Lebar: This.width,

Tinggi: this.height

});

smilechart.list [this.uuuid] = this;

smilechart.timer = setTimeout (function () {

smilechart.lazyload ();

}, 200);

loadMe: function () {

var opts = this.opts,

self = ini,

type = opts.charts.type;

this.container = this.container

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

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

if (! mengandung (ini [0], elem)) {

self.hidetooltip ();

self.currlist.dot

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

self.currlist.line

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

self.currlist = {};

}

})

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

// Beberapa parameter yang diperlukan saat menghitung pelat gambar

this.getDrawarea ()

.createToolTip () // Buat kotak untuk informasi yang cepat

.drawtitle () // gambar judulnya

// Gambarlah piring

'Line, Area, pie'.indexof (type)> = 0

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

'Pie, pies'.indexof (tipe) <0

&& this.drawpanel ();

this.drawlegend (opts.legend.type); // Gambar bilah blok warna

var type = {

Baris: 'Drawline',

Area: 'Drawarea',

Kolom: 'DrawColumns',

PIE: 'Drawpie',

Pai: 'Drawpies',

Segmen: 'Drawsegment'

} [opts.charts.type];

// Mulai menggambar .........

ini [tipe] ();

// Hapus simpul

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

// Lepaskan referensi

this.loading = null;

this.container.style.display = '';

setTimeout (function () {

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

}, 10)

createElement: function (nodename) {

mengembalikan vektor baru (). $ C (ini, nodename);

grup: function (name) {

kembalikan ini.

getDraRea: function () {

var opts = this.opts,

lebar = this.width,

tinggi = this.height,

title = opts.title,

subtitle = opts.subtitle,

area = {

// Lepaskan lebar teks skala di sisi kiri sumbu koordinat (diperkirakan) 80 adalah nilai tetap dan hanya 80 yang tersisa ke sisi kiri dari nilai tetap.

AreaWidth: Lebar - 80,

// Lepaskan ketinggian teks dan tanda di bawah sumbu

AreaHeight: Tinggi - 40,

// Posisi x asal akan dihitung di bawah ini

startx: 0,

// Posisi Y dari asal akan dihitung di bawah ini

Mulai: 0,

// Saat menggambar diagram lingkaran dengan koordinat x pusat, Anda perlu mengetahui posisi tengah lingkaran.

Centerx: 0,

// Saat menggambar diagram lingkaran dengan koordinat Y di tengah, Anda perlu mengetahui posisi tengah lingkaran.

Centery: 0

};

// Jika judul utama ada, kurangi ketinggian judul utama jika tidak kurangi ketinggian 10

Area.areAheight -= (title.text! == '')

? title.y

: 10;

// Lepaskan ketinggian subtitle

Area.areAheight -= (subtitle.text! == '')

? subtitle.y

: 10

Area.Startx = 80;

Area.Starty = Tinggi - 40;

// Posisi pusat lingkaran

Area.Centerx = Lebar / 2;

Area.Cedery = Tinggi / 2;

// tinggalkan ruang di sebelah kanan

Area.areawidth -= 20;

// tinggalkan jarak di atas

Area.areAheight -= 15;

opts.area = area;

kembalikan ini;

drawtitle: function () {

var opts = this.opts,

self = ini,

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

// Parameter dasar dari posisi 3 koordinat judul

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

.Appendto ();

masing -masing (arr, function (i, judul) {

var text = title.text;

if (text) {

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

'Text-Anchor': 'Left',

X: MathMax (config [i] .x - caltextlen (teks, title.style) .w/2,10),

Y: config [i] .y

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

.css (title.style)

.addtext (teks)

.Appendto (tpanel);

// Jika 2, itu berarti bahwa subtitle digunakan untuk meletakkannya secara vertikal

if (i === 2) {

hassvg

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

: (elem.element.style.filter = 'progid: dximagetransform.microsoft.basicimage (rotasi = 3)')

}

});

kembalikan ini;

// piring gambar lebih merepotkan

drawpanel: function (type) {

varopts = this.opts,

self = ini,

area = opts.area,

chartStype = opts.charts.type,

issegment = chartStype === 'segmen',

// adalah jenis pelat horizontal atau vertikal

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

// pelat bawah

var drawareawidth = Area.areawidth,

drawareAheight = Area.AreaHeight,

// Koordinat asal

startx = Area.startx,

starty = Area.starty;

var alldata = [],

MinValue = 0,

MaxValue = 10,

// Jumlah baris hanya bisa antara 1 dan 10

linenum = mathmin (10, mathmax (opts.yunit.linenum, 1)),

staf;

// Menggabungkan semua data

masing -masing (opts.chartdata, function (i, o) {

// Jika itu adalah bagan batang, disimpulkan untuk semua data

Issegment

? masing -masing (o.data, fungsi (j, d) {

alldata [j]

? alldata [j] = allData [j] + (~~ d)

: alldata [j] = ~~ d;

})

: allData = allData.concat (O.Data)

});

// Urutkan semua data untuk menemukan nilai maksimum dan nilai minimum di bawah ini

allData.sort (function (a, b) {return ab});

// Selesaikan nilai maksimum dan nilai minimum

maxValue = allData [allData.length - 1];

masing -masing (alldata, function (i, o) {

if (o! == null) {

minvalue = o;

mengembalikan false;

}

});

// wadah pelat utama

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

var hasil = xx (minvalue, maxvalue, linenum),

min = result.min,

max = result.max,

f = result.stf;

Issegment

&& (min = 0);

// berarti koordinat horizontal atau koordinat ganda ditarik

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

// Interval unit bawah tanah

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

// Titik pusat interval unit

Offset = xpices / 2,

ypices = drawareAheight / linenum;

var y = hassvg? 5: 10,

t = 1000,

menjangkau;

masing -masing (opts.xunit.units, function (i, d) {

self.basedraw.path (self, {

Perbatasan: 1,

BorderColor: '#C0C0C0',

isfill: false,

jalur : [

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,

'Teks-anchor': 'tengah'

})

.css ({

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

FontSize: '12px'

})

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

.Appendto (panel) [0];

! Hassvg

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

});

untuk (i = 0; i <= linenum; i ++) {

self.basedraw.path (self, {

Perbatasan: 1,

BorderColor: '#C0C0C0',

isfill: false,

Path: [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 -caltextlen (min+i * f+''). H/2,

'Teks-anchor': 'tengah'

})

.css ({

'Font-Family': 'Verdana, Arial, Helvetica, Sans-Serif',

'font-size': '12px',

Lebar: '40px',

Tampilan: 'Blok',

TextAlign: 'Benar'

})

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

.Appendto (panel) [0];

if (! hassvg) {

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

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

}

}kalau tidak{

// Interval unit bawah tanah

varypices = drawareAheight / (opts.xunit.units.length),

// Titik pusat interval unit

Offset = Math.round (ypices / 2),

x = hassvg? 25: 70,

y = hassvg? 0: 5,

menjangkau

masing -masing (opts.xunit.units, function (i, d) {

self.basedraw.path (self, {

Perbatasan: 1,

BorderColor: '#C0C0C0',

isfill: false,

jalur : [

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-caltextlen (d) .h/2 + y,

'Teks-anchor': 'tengah'

})

.css ({

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

FontSize: '12px',

Lebar: '60px',

TextAlign: 'Benar'

})

.addtext (d)

.Appendto (panel)

});

var xpices = drawareawidth / linenum;

untuk (var i = 0; i <= linenum; i ++) {

self.basedraw.path (self, {

Perbatasan: 1,

BorderColor: '#C0C0C0',

isfill: false,

jalur : [

ProcessPoint (startx + (i * xpices)),

ProcessPoint (Starty),

ProcessPoint (startx + (i*xpices)),

ProcessPoint (Starty - DrawarieHeight)

]

}).

appendto (panel);

self.basedraw.span (self, {

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

Y: Starty,

'Text-Anchor': 'Left'

})

.css ({

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

FontSize: '12px'

})

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

.Appendto (panel);

}

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

// Karena titik awal kemungkinan tidak dimulai dari 0, sehingga nilai bagian 0 harus ditambahkan pada titik awal.

var jianju = 0;

if (min> 0) jianju = min;

if (maks <0) jianju = maks;

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 titik awal sumbu

starty: starty, // y titik awal sumbu

xpices: xpices, // Lebar setiap bagian dari sumbu x

ypices: ypices, // lebar setiap bagian sumbu y

Offset: offset, // x Offset posisi titik pusat cabang tunggal

JIANJUY: JIIANJU*YPICES/F,

Jianjux: jianju*xpices/f,

Umpan: f // Berapa banyak sumbu per y yang ada

}

kembalikan ini;

createToolTip: function () {

// grup

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

.css ({zindex: 200, tinggi: '20px', lebar: '20px', posisi: 'absolute'})

.Appendto ()

.bersembunyi()

// Gambar bingkai berbasis

this.tipbox = this.basedraw.rect (this, {arc: 0.22, isi: '#ffff', border: 2, bordercolor: '#606060'})

.Appendto (this.tipc)

// Karena g di SVG dapat diposisikan langsung, tetapi rendering kelompok dalam VML sangat lambat, jadi div diubah, jadi orang tua di sini tidak sama dengan orang asing

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

this.TiptxtContainer = this.basedraw.text (this, {fill: '#000000', x: 5, y: 19, 'text-anchor': 'left'}))

.css ({

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

FontSize: '12px',

Latar belakang: '#fff'

})

.Appendto (p);

this.TipText = doc.createTextNode ('');

this.TiptxtContainer [0] .AppendChild (this.TipText);

kembalikan ini;

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

.menunjukkan();

if (hassvg) {

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

this.tipbox

.attr ({lebar: size.w + 5 * 2, tinggi: size.h + 5 * 2, stroke: obj.color || '#606060'});

}kalau tidak{

this.tipc.css ({kiri: pos.x, atas: pos.y});

this.tipbox

.css ({width: size.w + 5 * 2, tinggi: size.h + 5 * 2})

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

}

this.Tiptext.nodevalue = txt || '';*//

ClearTimeout (this.timer);

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

self = ini,

size = calTextLen (txt, this.TiptxtContainer [0] .style.csstext),

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

if (hassvg) {

self.tipbox

.attr ({lebar: size.w + 5 * 2, tinggi: size.h + 5 * 2, stroke: obj.color || '#606060'});

}kalau tidak{

self.tipbox

.css ({width: size.w + 5 * 2, tinggi: 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: 'translate ('+pos.x+','+pos.y+')', pos: pos.x+'-'+pos.y})

: self.tipc.attr ({pos: pos.x+'-'+pos.y}). css ({kiri: pos.x, atas: pos.y});

this.tipc

.tofront ()

.menunjukkan();

}kalau tidak{

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 ({kiri: x, atas: y});

}kalau tidak{

ClearTimeout (self.timer);

}

}, 1);

};

hidetooltip: function () {

this.tipc.hide ();

Drawlegend: function (type, redraw) {

var self = ini,

opts = this.opts,

isline = opts.charts.type === 'line',

// Ukuran blok warna

t_width = 20,

t_height = 20,

// Jarak antara blok

t_space = 5,

data = opts.chartdata,

len = data.length,

css = opts.legend.style,

// Jika panjang maksimum longitudinal, panjang maksimum diperlukan

MaxWidth = 10,

maxheight = 30,

// Lokasi benda ini

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

// Tampilkan fungsi grup tersembunyi

handle = function (i) {

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

issegment = opts.charts.type === 'segmen';

if (g.show) {

g.chart.hide ();

g.show = false;

hassvg

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

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

// Jika itu adalah gambar tersegmentasi, itu akan melibatkan penggambaran ulang.

if (issegment) {

self.hidelist [i] = '';

var maingroup = self.maingroup;

untuk (nama var di maingroup) {

var parent = maingroup [name] .chart,

node = induk [0] .Childnodes,

len = node.length;

// Hancurkan hal -hal yang digambar pada gambar

untuk (var i = len-1; i> = 0; i-) {

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

}

// mengecat ulang

self.drawsegment ();

}

}kalau tidak{

g.chart.show ();

g.show = true;

hassvg

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

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

if (issegment) {

hapus self.hidelist [i];

var maingroup = self.maingroup;

untuk (nama var di maingroup) {

var parent = maingroup [name] .chart,

node = induk [0] .Childnodes,

len = node.length;

untuk (var i = len-1; i> = 0; i-) {

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

}

self.drawsegment ();

}

arr = [];

type = type || 'lateral';

var legendpanel = self.group ('legenda')

.Appendto ();

if (type === 'lateral') {

// Jika horizontal

var top = orig_pos [1] + 5,

TH = hassvg? 0: 3,

kiri = orig_pos [0] + 5;

masing -masing (data, fungsi (i, d) {

Kiri = i === 0? Kiri: T_SPACE+Kiri;

// Hitung lokasi semua yang tersisa

// Jika itu adalah diagram linier, gambar gambar dalam bentuk diagram linier

if (isline) {

self.basedraw.path (self, {

Perbatasan: 1.5,

BorderColor: D.Color,

isfill: false,

jalur : [

left.tofixed (0),

(top+10) .tofixed (0),

(kiri+25) .tofixed (0),

(Top+10) .tofixed (0)

]

})

.Appendto (Legendpanel);

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

X: Kiri+12,

Y: TOP+10,

R: 4,

FillColor: D.Color

})

.Appendto (Legendpanel);

}kalau tidak{

self.basedraw.rect (self, {

Arc: 0.1,

Isi: D.Color,

Perbatasan: 1,

BorderColor: D.Color,

Kiri: Kiri,

Atas: Atas,

Lebar: t_width+'px',

Tinggi: t_height+'px'

})

.Appendto (Legendpanel)

}

kiri = kiri + t_width + 2 + t_space;

var w = caltextlen (d.name, css) .w

self.basedraw.span (self, {

'Text-Anchor': 'Left',

X: Kiri,

Y: TOP+TH

})

.css (extend (css, {kursor: 'pointer'}))

.on ('klik', function () {

handle.call (ini, i);

})

.addtext (d.name)

.Appendto (Legendpanel);

kiri = kiri + w;

});

this.basedraw.rect (ini, {

Arc: 0.1,

Isi: 'tidak ada',

Perbatasan: 1.5,

BorderColor: '#666666',

Lebar: kiri+ t_space- orig_pos [0],

Tinggi: Maxheight,

Kiri: orig_pos [0],

Atas: orig_pos [1]

})

.Appendto (Legendpanel);

}kalau tidak{

var top = orig_pos [1] + 5,

TH = hassvg? 0: 3,

kiri = orig_pos [0] + 5;

masing -masing (data, fungsi (i, d) {

top = i === 0? TOP: T_SPACE + TOP;

self.basedraw.rect (self, {

Arc: 0.1,

Isi: D.Color,

Perbatasan: 1,

BorderColor: D.Color,

Kiri: Kiri,

Atas: Atas,

Lebar: t_width+'px',

Tinggi: t_height+'px'

})

.Appendto (Legendpanel);

var h = caltextlen (d.name, css) .h;

self.basedraw.span (self, {

'Text-Anchor': 'Left',

x: kiri+t_width+2+t_space,

Y: TOP+TH

})

.css (extend (css, {kursor: 'pointer'}))

.addtext (d.name)

.on ('klik', function () {

// Jika itu adalah diagram lingkaran multi-lapisan, itu tidak bisa disembunyikan

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

handle.call (ini, i);

})

.Appendto (Legendpanel);

atas = atas + h + t_space;

maxwidth = math.max (maxwidth, caltextlen (d.name, css) .w);

});

this.basedraw.rect (ini, {

Arc: 0.1,

Isi: 'tidak ada',

Perbatasan: 1.5,

BorderColor: '#666666',

Lebar: Maxwidth+22+15,

Tinggi: TOP+T_SPACE-ORIG_POS [1],

Kiri: orig_pos [0],

Atas: orig_pos [1]

})

.Appendto (Legendpanel);

}

kembalikan ini;

Drawline: function () {

var self = ini,

opts = this.opts,

draw = opts.draw;

masing -masing (opts.chartdata, function (i, o) {

var id = 'chart'+i,

lineGroup = self.group (id)

.Appendto ();

self.maingroup [id] = {

Bagan: LineGroup,

Tunjukkan: Benar

};

var path = [m],

Data = O.Data,

garis;

untuk (var i = 0, l = data.length; i <l; i ++) {

if (data [i] == null) {

// Jika data ini tidak ada dan bukan jalur data pertama, tambahkan m ke dalamnya

if (path [path.length - 1]! == m)

path.push (m);

}kalau tidak{

// Jika bukan jalur data pertama, tambahkan l

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

// Jika yang pertama adalah nol dan bukan yang pertama untuk menghapus l

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

path.pop ();

// Hitung posisi x dan y titik

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

// menggambar poin

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

self.basedraw [dottype] (self, {

x: x,

Y y,

R: 4,

FillColor: O.Color

})

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

.css ({zindex: 10, kursor: 'pointer'})

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

return function () {

if (self.currlist.dot) {

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

kembali;

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 = ini;

self.currlist.line = line;

}

}) (o, x, y))

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

this.setsize (0);

line.setsize (1.5);

})*/

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

.Appendto (LineGroup);

}

};

// Gambarlah garis terlipat

line = self.basedraw.path (self, {

Perbatasan: 1.5,

BorderColor: O.Color,

isfill: false,

Path: Path

})

.css ({Zindex: 5})

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

this.setsize (2.5);

})

.on ('mouseout', function () {

this.setsize (1.5);

})*/

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

.Appendto (LineGroup);

});

kembalikan ini;

drawarea: function () {

var self = ini,

opts = this.opts,

draw = opts.draw;

masing -masing (opts.chartdata, function (i, o) {

var id = 'chart' + i,

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

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

// Ada 2 jalur, satu adalah jalur wilayah dan yang lainnya adalah jalur garis

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

jalur = [m],

Data = O.Data,

garis;

untuk (var n = 0, l = data.length; n <l; n ++) {

// Jika data kosong

var len = AreaPath.length;

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

// jika yang sebelumnya bukan m, lalu gambar lagi jadi tambahkan m

if (path [path.length - 1]! == m)

path.push (m);

// Jika yang pertama atau bagian depan nol, ubah koordinat titik awal

len === 3

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

// Jika yang sebelumnya bukan grafik area pengidentifikasi akhir, jika data pertama adalah nol, operasi berikut tidak akan dilakukan

if (AreaPath [len - 1]! == seal && n! == 0) {

AreaPath = AreaPath.concat ([[

AreaPath [len - 2],

(draw.starty-draw.jianjuy) .tofixed (0),

segel

]);

}

}kalau tidak{

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

AreaPath.Push (L);

// Jika data sebelumnya nol, hapus l sebelumnya

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

path.pop ();

// Jika yang pertama adalah nol, jangan hapus l

n! == 1 && AreaPath.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] === segel) {

AreaPath = AreaPath.concat ([[

Parseint (draw.starty-draw.jianjuy),

]);

}kalau tidak{

AreaPath.Push (x);

AreaPath.Push (Y);

}

// Jika itu adalah poin terakhir

if (n === l - 1) {

AreaPath.Push (x);

AreaPath.Push (ParseInt (Draw.Starty-draw.jianjuy));

}

// menggambar poin

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

x: x,

Y y,

R: 4,

FillColor: O.Color

})

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

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

return function () {

if (self.currlist.dot) {

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

kembali;

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 = ini;

self.currlist.line = line;

}

}) (o, x, y))

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

this.setsize (0);

line.setsize (1.5);

//self.hidetooltip ()

})*/

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

.css ({zindex: 10, kursor: 'pointer'})

.Appendto (AreaGroup);

}

AreaPath.Push (segel)

self.basedraw.path (self, {

Perbatasan: 0,

ISFILL: Benar,

FillColor: O.Color,

Opacity: 0,5,

Jalur: AreaPath

})

.css ({Zindex: 5})

.Appendto (AreaGroup);

line = self.basedraw.path (self, {

Perbatasan: 1.5,

BorderColor: O.Color,

isfill: false,

Path: Path

})

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

hassvg

? this.attr ({'stroke-lebar': 2.5})

: (ini [0] .strokeWeight = 2.5);

})

.on ('mouseout', function () {

hassvg

? this.attr ({'stroke-lebar': 1.5})

: (ini [0] .StrokeWeight = 1.5);

})*/

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

.css ({zindex: -1})

.Appendto (AreaGroup);

});

kembalikan ini;

DrawColumns: function () {

var self = ini,

opts = this.opts,

draw = opts.draw,

chartData = opts.chartdata,

datalen = chartData.length,

// jarak antara beberapa kolom

Columnspace = 3,

// jumlah semua interval dalam suatu posisi

ColumnPadding = Columnspace * Datalen + Columnspace,

// Lebar setiap kolom

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

? Nomor (((draw.xpices - columnpadding) / datalen) .tofixed (0))

: Number ((((draw.ypices - columnPadding) / datalen) .tofixed (0));

masing -masing (chartData, function (i, o) {

var data = o.data,

id = 'chart' + i,

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

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

// Posisi awal setiap titik

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

? Draw.Startx + Columnspace + i*(ColumnSize + Columnspace)

: draw.starty + ColumnSpace + i*(ColumnSize + Columnspace)

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

untuk (var j = 0, l = data.length; j <l; j ++) {

if (data [j] === null) Lanjutkan;

// Jika itu piring menyamping

if (isx) {

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

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

tinggi = angka ((data [j] * (draw.ypices / draw.feed) -draw.jianjuy) .tofixed (0)),

jalur = [

y -height,

x + columnSize,

y - height,

x + columnSize,

segel

];

var pos = [x+columnSize/2,data[j]>0?y-height:draw.startY-draw.jianjuY];

}kalau tidak{

var x = Number((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)),

path = [

x+ width,

y ,

x + width,

y + columnSize,

y+ columnSize,

segel

];

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

pecahan,

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

kembali;

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

}kalau tidak{

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

pecahan,

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

kembali;

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)

kembali;

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)

kembali;

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,

segel

];

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

}kalau tidak{

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,

segel

];

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

segel

];

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

segel

];

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

segel

];

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,

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'

}kalau tidak{

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;

}kalau tidak{

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

})

}

});

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

})(dokumen);

window.onload = function(){

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

var config = {

charts : {

type : 'line',

radius : 150,

panel : 'x',

gaya: {

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

fontSize: '12px'

}

judul: {

text: '线性图表',

y: 10,

gaya: {

color: 'black',

fontSize: '16px'

}

subTitle : {

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

y: 35,

gaya: {

color: '#111',

fontSize: '12px'

}

legenda : {

enable : true,

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

type : 'lateral',

pos : [10,10],

gaya:{

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

fontSize : '12px',

magin : '0px'

}

yUnit : {

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

x : 20,

gaya: {

color : '#111',

fontSize : '12px'

}

xUnit : {

units: [

'Januari',

'Februari',

'Berbaris',

'April',

'Mungkin',

'Juni',

'Juli',

'Agustus',

'September',

'Oktober',

'November',

'Desember'

]

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>

Lainnya

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

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