JavaScript ใช้ SmipleChart เพื่อใช้แผนภูมิง่ายๆ

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-06-14 03:16:01

รองรับแผนภูมิกราฟกราฟกราฟเชิงเส้น

รองรับเบราว์เซอร์หลายตัว

ใช้ SVG VML

การคัดลอกรหัสมีดังนี้:

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

<head>

<title> SmipleChart </title>

.cc {

ความสูง: 450px; ความกว้าง: 800px; ชายแดน: 1px Solid #999; ตำแหน่ง: ญาติ; มาร์จิ้น: 20px;

</style>

</head>

<body>

(ฟังก์ชั่น (เอกสารที่ไม่ได้กำหนด) {

var win = สิ่งนี้

UUUID = -1,

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

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

PATH = HASSVG? 'D': 'PATH'

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

คณิตศาสตร์ = คณิตศาสตร์

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

ชนะ. $$ = ฟังก์ชั่น (id) {

ส่งคืน document.getElementById (id);

win.extend = function () {

var target = อาร์กิวเมนต์ [0] || {}, i = 1, length = arguments.length, deep = true, ตัวเลือก;

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

ลึก = เป้าหมาย;

target = อาร์กิวเมนต์ [1] || -

i = 2;

if (typeof target! == "Object" && Object.prototype.toString.call (เป้าหมาย)! = "[ฟังก์ชันวัตถุ]")

target = {};

สำหรับ (; i <length; i ++) {

if ((ตัวเลือก = อาร์กิวเมนต์ [i])! = null)

สำหรับ (ชื่อ var ในตัวเลือก) {

var src = เป้าหมาย [ชื่อ], copy = ตัวเลือก [ชื่อ];

if (target === สำเนา)

ดำเนินการต่อ;

if (deep && copy && typeof copy === "Object" &&! copy.nodeType) {

เป้าหมาย [ชื่อ] = arguments.callee (ลึก, src || (copy.length! = null? []: {}), คัดลอก);

อื่นถ้า (คัดลอก! == ไม่ได้กำหนด)

เป้าหมาย [ชื่อ] = คัดลอก;

เป้าหมายกลับ;

win.each = function (วัตถุ, callback, args) {

ชื่อ var, i = 0, length = object.length;

ถ้า (args) {

args = array.prototype.slice.call (อาร์กิวเมนต์) .slice (2);

ถ้า (ความยาว === ไม่ได้กำหนด) {

สำหรับ (ชื่อในวัตถุ)

if (callback.apply (วัตถุ [ชื่อ], [ชื่อ, วัตถุ [ชื่อ]]. concat (args)) === false)

หยุดพัก;

} อื่น

สำหรับ (; i <length; i ++)

ถ้า (callback.apply (object [i], [i, object [i]]. concat (args)) === false) //

หยุดพัก;

} อื่น {

ถ้า (ความยาว === ไม่ได้กำหนด) {

สำหรับ (ชื่อในวัตถุ)

if (callback.call (วัตถุ [ชื่อ], ชื่อ, วัตถุ [ชื่อ]) === เท็จ)

หยุดพัก;

} อื่น

สำหรับ (var value = object [0];

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

วัตถุกลับ;

win.contains = function (p, c) {

ถ้า (! p ||! c) ส่งคืนเท็จ;

ถ้า (p === c) ส่งคืนจริง;

return isie

- P.Contains (C)

: P.CompareCumentPosition (C) == 20

- จริง

: เท็จ;

ฟังก์ชัน ProcessPoint (x) {

return isie? ~~ x.tofixed (0): ~~ x.tofixed (0) + 0.5;

ฟังก์ชั่น caltextlen (txt, cssstr) {

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

ถ้า (CSSSTR) {

typeof cssstr === 'สตริง'

- span.style.csstext = cssstr

: ขยาย (span.style, cssstr);

}อื่น{

ขยาย (span.style, {

Fontsiz: '12px'

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

span.innerhtml = txt || -

span.style.visibility = 'ซ่อน';

doc.body.appendchild (ช่วง);

var width = span.offsetWidth

ความสูง = Span.offSetheight;

doc.body.removechild (ช่วง);

return {w: ความกว้าง, h: ความสูง};

มุมฟังก์ชั่น (r, center, 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)];

ฟังก์ชั่น xx (a, b, ลินิน) {

var t = 1,000

stf = ((b*ta*t)/ลินิน)/t,

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

C = 1,

// cardinality ของเส้นหารคือ [1, 2, 2.5, 5, 10] ขั้นตอนนี้คือการค้นหาว่าช่วงเวลาใดเป็นของ

ถ้า (stf <arr [0]) {

ในขณะที่ (stf <arr [0]) {

C = C*10;

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

แต่ละ ([1,2,2.5,5,10], ฟังก์ชั่น (i, o) {

arr [i] = o/c;

} อื่นถ้า (stf> arr [4]) {

ในขณะที่ (stf> arr [4]) {

C = C*10;

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

แต่ละ ([1,2,2.5,5,10], ฟังก์ชั่น (i, o) {

arr [i] = o*c;

// ทำตามช่วงเวลาเพื่อค้นหาสิ่งที่ใกล้เคียงที่สุดในช่วงเวลา

แต่ละ (arr, function (i, o) {

ถ้า (stf <= o) {

v = o;

กลับเท็จ;

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;

// ดูว่าเหลือกี่บรรทัดและไม่วาด

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

ถ้า (a> = 0) {

// ประสานงานการเปรียบเทียบจำนวนเต็ม

ถ้า (a! = 0 && num! = 0 && a%10! == 0) {

ในขณะที่ (a! = 0 && num! = 0) {

a = (a*tv*t)/t;

num--;

if ((a*tv*num*t)/10,000> 0 && a%10 === 0)

หยุดพัก;

ถ้า (num! = 0) {

ในขณะที่ (num! == 0) {

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

num--;

}อื่น{

// ประสานงานการเปรียบเทียบจำนวนเต็ม

if (b <0 && num! = 0) {

ในขณะที่ (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)

หยุดพัก;

ถ้า (num! = 0) {

ในขณะที่ (num! == 0) {

a = (a*tv*t)/t

num--;

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

// สร้างการสร้างสรรค์ขององค์ประกอบ SVG VML และลบสไตล์แอตทริบิวต์ == การดำเนินการบางอย่าง

win.vector = function () {};

vector.prototype = {

$ C: ฟังก์ชั่น (กราฟิก, nodeName) {

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

this.graphic = กราฟิก;

คืนสิ่งนี้;

attr: ฟังก์ชั่น (แฮช, วาล) {

var elem = this.element

สำคัญ,

ค่า;

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

if (val === ไม่ได้กำหนด) {

return elem.getAttribute (แฮช);

}อื่น{

elem.setAttribute (แฮช, วาล);

คืนสิ่งนี้;

} อื่น {

สำหรับ (คีย์ในแฮช) {

value = hash [key];

if (key === เส้นทาง) {

value && value.oin

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

/(NAN | |^$)/. การทดสอบ (ค่า)

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

elem.setAttribute (คีย์, ค่า)

คืนสิ่งนี้;

CSS: ฟังก์ชั่น (แฮช) {

สำหรับ (คีย์ var ในแฮช) {

isie && key == "ความทึบ"

- [0] .style ['filter'] = "alpha (opacity ="+ แฮช [คีย์] * 100+ ")"

: สิ่งนี้ [0] .style [key] = hash [key];

คืนสิ่งนี้;

ON: FUNCTION (EventName, Handler) {

var self = this;

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

handler.call (ตัวเอง)

},เท็จ);*/

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

E = E || win.event;

handler.call (ตัวเอง, e);

คืนสิ่งนี้;

ภาคผนวก: ฟังก์ชั่น (พาเรนต์) {

ถ้า (ผู้ปกครอง) {

parent.element

- parent.element.appendchild (this.element)

: parent.appendchild (this.element)

} อื่น {

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

คืนสิ่งนี้;

addText: function (str) {

var elem = this.element;

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

elem.AppendChild (doc.createtextNode (str+''));

คืนสิ่งนี้;

SetOpacity: function (v) {

this.attr ('การเติมเต็ม', v);

คืนสิ่งนี้;

setsize: function (v) {

สิ่งนี้ [0] .nodename === 'Circle'

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

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

คืนสิ่งนี้;

Tofront: function () {

[0] .parentNode.AppendChild (นี้ [0]);

คืนสิ่งนี้;

แสดง: function () {

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

คืนสิ่งนี้;

ซ่อน: ฟังก์ชั่น () {

[0] .style.display = 'ไม่มี';

คืนสิ่งนี้;

ทำลาย: ฟังก์ชั่น () {

// ทำลายโหนด ............

var node = this [0] || นี้;

node.onMouseOver = node.onMouseOut = node.onclick = null;

Node.parentNode

&& node.parentNode.removeChild (โหนด);

คืนสิ่งนี้;

// ถ้าเป็น VML ในการแก้ไขวิธีการเหล่านี้

ถ้า (! hassvg) {

doc.createstylesheet (). addrule (". vml", "พฤติกรรม: url (#default#vml); แสดง: inline-block; ตำแหน่ง: Absolute; ซ้าย: 0px; top: 0px");

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

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

ขยาย (vector.prototype, {

$ C: ฟังก์ชั่น (กราฟิก, nodeName) {

ชื่อ var = nodeName || 'รูปร่าง';

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

- doc.createElement (ชื่อ)

: doc.createElement ('<vml:'+ชื่อ+'>');

this.graphic = กราฟิก;

คืนสิ่งนี้;

/*on: function (eventname, handler) {

var self = this;

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

handler.call (ตัวเอง);

คืนสิ่งนี้;

addText: function (txt) {

สิ่งนี้ [0] .innerhtml = txt || -

คืนสิ่งนี้;

setsize: function (v) {

[0] .strokeweight = V;

คืนสิ่งนี้;

SetOpacity: function (v) {

this.Opacity.Opacity = V;

คืนสิ่งนี้;

// การวาดหมวดหมู่

win.smiplechart = function () {

this.init.apply (ข้อโต้แย้งนี้);

smilechart.list = [];

smilechart.timer = null;

smilechart.lazyload = function (id) {

id = id || '0'

smilechart.list [id]

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

smilechart.prototype = {

ตัวเลือก: {

แผนภูมิ: {

Paddingright: 20,

รัศมี: 200,

สไตล์: {

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

Fontsize: '12px'

ความเป็นมา: '#ffffff'

ชื่อ: {

ข้อความ : '',

y: 10,

สไตล์: {

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

Fontsize: '16px',

Fontweight: 'Bold'

คำบรรยาย: {

ข้อความ: '',

y: 30,

สไตล์: {

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

Fontsize: '12px'

สี: '#111'

Yunit: {

ข้อความ : '',

สไตล์: {

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

Fontsize: '12px'

สี: '#111'

ผ้าลินิน: 10

init: ฟังก์ชั่น (คอนเทนเนอร์ตัวเลือก) {

ClearTimeOut (smiplechart.timer)

var self = this;

this.width = container.offsetWidth;

this.height = container.offSetheight;

this.currlist = {};

this.uuuid = ++ uuuid;

this.timer = null;

// รูปแบบคอลเลกชันหลักของกลุ่มวาด

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

this.maingRoup = {};

// สิ่งที่ควรใช้เมื่อการแบ่งส่วนคือการรู้ว่าอันไหนถูกซ่อนไว้เพราะมันเกี่ยวข้องกับการวาดใหม่

this.hidelist = {};

// การวาดภาพใน SVG ต้องมีแท็ก SVG VML และใช้ div

this.container = hassvg

- เวกเตอร์ใหม่ (). $ C (1, 'SVG')

.attr ({

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

เวอร์ชัน: '1.1',

ความกว้าง: this.width,

ความสูง: นี่คือความสูง

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

.appendto (คอนเทนเนอร์)

: เวกเตอร์ใหม่ (). $ c (1, 'div')

.CSS ({

Fontsize: '12px'

ความกว้าง: this.width +'px'

ความสูง: this.height+'px'

.appendto (คอนเทนเนอร์);

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 = ขยาย (true, {}, this.options),

opts = this.opts = ขยาย (จริง, c, ตัวเลือก),

style = Extend (opts.charts.style, {

ความกว้าง: this.width,

ความสูง: นี่คือความสูง

smilechart.list [this.uuuid] = this;

smilechart.timer = settimeout (function () {

smilechart.lazyload ();

}, 200);

loadMe: function () {

var opts = this.opts

ตัวเอง = สิ่งนี้

type = opts.charts.type;

this.container = this.container

.on ('Mouseout', ฟังก์ชั่น (e) {

var elem = E.RelatedTarget || e.toelement;

ถ้า (! มี (นี้ [0], elem)) {

self.hidetooltip ();

self.currlist.dot

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

self.currlist.lies

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

self.currlist = {};

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

// พารามิเตอร์บางอย่างที่ต้องการเมื่อคำนวณแผ่นวาดภาพ

this.getDrawArea ()

.CreateToolTip () // สร้างกล่องสำหรับข้อมูลแจ้ง

.drawtitle () // วาดชื่อ

// วาดจาน

'Line, พื้นที่, Pie'.indexof (type)> = 0

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

'Pie, Pies'.indexof (ประเภท) <0

&& this.drawpanel ();

this.drawlegend (opts.legend.type); // วาดแถบบล็อกสี

var type = {

บรรทัด: 'drawline',

พื้นที่: 'drawarea',

คอลัมน์: 'DrawColumns'

พาย: 'drawpie',

พาย: 'drawpies',

เซ็กเมนต์: 'drawsegment'

} [opts.charts.type];

// เริ่มวาด .........

[ประเภท] ();

// ลบโหนด

this.loading.parentNode.removeChild (this.loading);

// ถอดข้อมูลอ้างอิง

this.loading = null;

this.container.style.display = '';

settimeout (function () {

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

}, 10)

CreateElement: function (nodeName) {

ส่งคืนเวกเตอร์ใหม่ (). $ c (นี่, nodename);

กลุ่ม: ฟังก์ชั่น (ชื่อ) {

ส่งคืนสิ่งนี้ createElement (hassvg? 'g': 'div'). attr ('mark', ชื่อ);

getDrawarea: function () {

var opts = this.opts

ความกว้าง = this.width

ความสูง = นี่คือความสูง

title = opts.title

คำบรรยาย = opts.subtitle

พื้นที่ = {

// ลบความกว้างของข้อความสเกลที่ด้านซ้ายของแกนพิกัด (ประมาณ) 80 เป็นค่าคงที่และมีเพียง 80 เท่านั้นที่เหลืออยู่ทางด้านซ้ายของค่าคงที่

Areawidth: ความกว้าง - 80,

// ลบความสูงของข้อความและเครื่องหมายใต้แกน

Areaheight: ความสูง - 40,

// ตำแหน่ง x ของต้นกำเนิดจะคำนวณด้านล่าง

startx: 0,

// ตำแหน่ง y ของต้นกำเนิดจะคำนวณด้านล่าง

starty: 0,

// เมื่อวาดแผนภูมิวงกลมด้วยพิกัด X ของศูนย์คุณต้องรู้ตำแหน่งของศูนย์กลางของวงกลม

centerx: 0,

// เมื่อวาดแผนภูมิวงกลมที่มีพิกัด Y ตรงกลางคุณต้องรู้ตำแหน่งของศูนย์กลางของวงกลม

ร้อยปี: 0

// ถ้าชื่อหลักมีอยู่ให้ลบความสูงของชื่อหลักมิฉะนั้นจะลบความสูงของ 10

พื้นที่.

- title.y

: 10;

// ลบความสูงคำบรรยาย

พื้นที่.

- subtitle.y

: 10

พื้นที่ startx = 80;

พื้นที่. Starty = ความสูง - 40;

// ตำแหน่งของศูนย์กลางของวงกลม

พื้นที่ centerx = ความกว้าง / 2;

พื้นที่ศูนย์ = ความสูง / 2;

// เว้นว่างไว้ทางด้านขวา

Area.areWidth -= 20;

// ทิ้งระยะห่างไว้ด้านบน

Area.areHeight -= 15;

opts.area = พื้นที่;

คืนสิ่งนี้;

drawtitle: function () {

var opts = this.opts

ตัวเอง = สิ่งนี้

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

// พารามิเตอร์พื้นฐานของตำแหน่ง 3 ชื่อพิกัด

config = [

x: this.width / 2,

y: opts.title.y

x: this.width / 2,

y: opts.subtitle.y

x: opts.yunit.x,

Y: นี่คือความสูง / 2 - 20

tpanel = this.group ('title')

.appendto ();

แต่ละ (arr, function (i, title) {

var text = title.text;

ถ้า (ข้อความ) {

var elem = self.basedraw.span (ตัวเอง, {

'text-anchor': 'ซ้าย',

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 (ข้อความ)

.appendto (tpanel);

// ถ้าเป็น 2 หมายความว่าคำบรรยายจะใช้ในการวางในแนวตั้ง

ถ้า (i === 2) {

HASSVG

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

: (elem.element.style.filter = 'progid: dximagetransform.microsoft.basicimage (การหมุน = 3)')

คืนสิ่งนี้;

// แผ่นวาดภาพเป็นปัญหามากขึ้น

DrawPanel: ฟังก์ชั่น (ประเภท) {

varopts = this.opts

ตัวเอง = สิ่งนี้

พื้นที่ = opts.area

ChartSpe = opts.charts.type

iSsegment = ChartSpe === 'เซ็กเมนต์'

// เป็นประเภทของแผ่นแนวนอนหรือแนวตั้ง

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

// แผ่นด้านล่าง

var drawareawidth = area.arewidth,

drawareaheight = area.areheheight,

// พิกัดของแหล่งกำเนิด

startx = area.startx

starty = area.starty;

var alldata = []

minvalue = 0,

MaxValue = 10,

// จำนวนบรรทัดสามารถอยู่ระหว่าง 1 ถึง 10 เท่านั้น

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

พนักงาน;

// การรวมข้อมูลทั้งหมด

แต่ละ (opts.chartdata, function (i, o) {

// ถ้าเป็นแผนภูมิแท่งจะมีการสรุปข้อมูลทั้งหมดสำหรับข้อมูลทั้งหมด

ความไม่ถูกต้อง

- แต่ละ (O.Data, function (j, d) {

ALLDATA [J]

- Alldata [j] = Alldata [J] + (~~ d)

: Alldata [j] = ~~ d;

: Alldata = Alldata.concat (O.Data)

// เรียงลำดับข้อมูลทั้งหมดเพื่อค้นหาค่าสูงสุดและค่าต่ำสุดด้านล่าง

Alldata.sort (ฟังก์ชั่น (a, b) {return ab});

// เสร็จสิ้นค่าสูงสุดและค่าต่ำสุด

MaxValue = Alldata [Alldata.length - 1];

แต่ละ (allldata, function (i, o) {

ถ้า (o! == null) {

minvalue = o;

กลับเท็จ;

// คอนเทนเนอร์แผ่นหลัก

var panel = this.group ('panel'). ภาคผนวก ();

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

min = result.min

max = result.max

f = result.stf;

ความไม่ถูกต้อง

&& (min = 0);

// หมายความว่าพิกัดแนวนอนหรือพิกัดสองชั้นถูกวาด

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

// ช่วงเวลาหน่วยใต้ดิน

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

// จุดศูนย์กลางของช่วงเวลาหน่วย

Offset = XPices / 2,

ypices = drawareaheight / linenum;

var y = hassvg? 5: 10

t = 1,000

ช่วง;

แต่ละ (opts.xunit.units, ฟังก์ชั่น (i, d) {

self.basedraw.path (ตัวเอง, {

ชายแดน: 1,

BorderColor: '#C0C0C0'

Isfill: เท็จ

เส้นทาง : [

ProcessPoint (startx + (i * xpices)),

ProcessPoint (starty),,

ProcessPoint (startx + (i*xpices)),

ProcessPoint (starty + 5)

ภาคผนวก (แผง);

span = self.basedraw.span (ตัวเอง, {

X: StartX + Offset + (i * xpices),

y: starty+y,

'text-anchor': 'Middle'

.CSS ({

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

Fontsize: '12px'

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

.appendto (แผง) [0];

! hassvg

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

สำหรับ (i = 0; i <= linenum; i ++) {

self.basedraw.path (ตัวเอง, {

ชายแดน: 1,

BorderColor: '#C0C0C0'

Isfill: เท็จ

PATH: [M, StartX, ProcessPoint (Starty - (i * ypices)), L, ProcessPoint (startx + drawArewidth), processPoint (starty - (i * ypices))]]]

.css ({zindex: -10})

.appendto (แผง);

var span = self.basedraw.span (ตัวเอง, {

x: startx - 15,

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

'text-anchor': 'Middle'

.CSS ({

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

'Font-Size': '12px',

ความกว้าง: '40px',

แสดง: 'บล็อก',

Textalign: 'ถูกต้อง'

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

.appendto (แผง) [0];

ถ้า (! hassvg) {

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

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

}อื่น{

// ช่วงเวลาหน่วยใต้ดิน

dararePices = drawareaheHeight / (opts.xunit.units.length)

// จุดศูนย์กลางของช่วงเวลาหน่วย

Offset = math.round (ypices / 2)

x = hassvg? 25: 70

y = hassvg? 0: 5,

ช่วง

แต่ละ (opts.xunit.units, ฟังก์ชั่น (i, d) {

self.basedraw.path (ตัวเอง, {

ชายแดน: 1,

BorderColor: '#C0C0C0'

Isfill: เท็จ

เส้นทาง : [

ProcessPoint (startx-5)

ProcessPoint (starty-i * ypices),

ProcessPoint (startx)

ProcessPoint (starty-i * ypices),

.appendto (แผง);

span = self.basedraw.span (ตัวเอง, {

x: startx - x,

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

'text-anchor': 'Middle'

.CSS ({

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

Fontsize: '12px'

ความกว้าง: '60px',

Textalign: 'ถูกต้อง'

.AddText (D)

.appendto (แผง)

var xpices = drawareawidth / linenum;

สำหรับ (var i = 0; i <= linenum; i ++) {

self.basedraw.path (ตัวเอง, {

ชายแดน: 1,

BorderColor: '#C0C0C0'

Isfill: เท็จ

เส้นทาง : [

ProcessPoint (startx + (i * xpices)),

ProcessPoint (starty),,

ProcessPoint (startx + (i*xpices)),

ProcessPoint (Starty - DrawareAheight)

ภาคผนวก (แผง);

self.basedraw.span (ตัวเอง {

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

y: starty,

'text-anchor': 'ซ้าย'

.CSS ({

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

Fontsize: '12px'

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

.appendto (แผง);

// เนื่องจากจุดเริ่มต้นไม่น่าจะเริ่มต้นจาก 0 ดังนั้นค่าของส่วน 0 จะต้องเพิ่มที่จุดเริ่มต้น

var Jianju = 0;

ถ้า (ขั้นต่ำ> 0) Jianju = min;

ถ้า (สูงสุด <0) Jianju = สูงสุด;

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 จุดเริ่มต้นแกน

starty: starty, // y จุดเริ่มต้น

xpices: xpices, // ความกว้างของแต่ละส่วนของแกน x

ypices: ypices, // ความกว้างของแต่ละส่วนของแกน y

ออฟเซ็ต: ออฟเซ็ต, // x ตำแหน่งจุดกึ่งกลางสาขาเดียวชดเชยตำแหน่ง

Jianjuy: Jianju*ypices/f,

Jianjux: Jianju*xpices/f,

ฟีด: F // มีกี่แกนต่อปี

คืนสิ่งนี้;

createToolTip: function () {

// กลุ่ม

this.tipc = this.group ('เคล็ดลับ')

.CSS ({zindex: 200, ความสูง: '20px', ความกว้าง: '20px', ตำแหน่ง: 'สัมบูรณ์'})

.appendto ()

.ซ่อน()

// วาดเฟรมที่ใช้

this.tipbox = this.basedraw.rect (นี่, {arc: 0.22, เติม: '#ffff', ชายแดน: 2, BorderColor: '#606060'})

.Appendto (this.tipc)

// เนื่องจาก G ใน SVG สามารถวางตำแหน่งโดยตรงได้ แต่การแสดงผลกลุ่มใน VML นั้นช้ามากดังนั้น DIV จึงเปลี่ยนไปดังนั้นผู้ปกครองที่นี่จึงไม่เหมือนกับต่างประเทศ

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

this.tiptContainer = this.basedraw.text (นี่, {เติม: '#000000', x: 5, y: 19, 'text-anchor': 'ซ้าย'})

.CSS ({

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

Fontsize: '12px'

ความเป็นมา: '#FFF'

.appendto (p);

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

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

คืนสิ่งนี้;

showtooltip: ฟังก์ชั่น (obj, x, y, data) {

/*var txt = obj.name + ':' + ข้อมูล

size = caltextlen (txt, this.tiptcontainer [0] .style.csstext)

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

this.tipc

.tofront ()

.แสดง();

ถ้า (hassvg) {

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

this.tipbox

.attr ({width: size.w + 5 * 2, ความสูง: size.h + 5 * 2, stroke: obj.color || '#606060'});

}อื่น{

this.tipc.css ({ซ้าย: pos.x, top: pos.y});

this.tipbox

.CSS ({width: size.w + 5 * 2, ความสูง: size.h + 5 * 2})

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

this.tiptext.nodevalue = txt || -

ClearTimeout (this.timer);

var txt = obj.name + ':' + ข้อมูล

ตัวเอง = สิ่งนี้

size = caltextlen (txt, this.tiptcontainer [0] .style.csstext)

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

ถ้า (hassvg) {

self.tipbox

.attr ({width: size.w + 5 * 2, ความสูง: size.h + 5 * 2, stroke: obj.color || '#606060'});

}อื่น{

self.tipbox

.CSS ({width: size.w + 5 * 2, ความสูง: size.h + 5 * 2})

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

this.tiptext.nodevalue = txt || -

if (this.tipc [0] .style.display === 'ไม่มี') {

HASSVG

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

: self.tipc.attr ({pos: pos.x+'-'+pos.y}). css ({ซ้าย: pos.x, top: pos.y});

this.tipc

.tofront ()

.แสดง();

}อื่น{

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

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

t = 0,

b = self.tipc.attr ('pos'). แยก ('-')

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

d = 5;

this.timer = setInterval (function () {

ถ้า (t <d) {

t ++;

var x = ย้าย (t, ~~ b [0], (~~ c [0])-(~~ b [0]), d),

y = ย้าย (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 ({ซ้าย: x, top: y});

}อื่น{

ClearTimeOut (self.timer);

}, 1);

hidetoolTip: function () {

this.tipc.hide ();

drawlegend: ฟังก์ชั่น (ประเภท, redraw) {

var self = this,

opts = this.opts,

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

// ขนาดของบล็อกสี

t_width = 20,

t_height = 20,

// ระยะห่างระหว่างบล็อก

t_space = 5,

datas = opts.chartData

len = data.length,

css = opts.legend.style

// หากความยาวสูงสุดเป็นระยะยาวจำเป็นต้องใช้ความยาวสูงสุด

MaxWidth = 10,

MaxHeight = 30,

// ที่ตั้งของสิ่งนี้

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

// แสดงฟังก์ชั่นกลุ่มที่ซ่อนอยู่

handle = function (i) {

var g = self.maingroup ['แผนภูมิ'+i]

iSsegment = opts.charts.type === 'เซ็กเมนต์';

ถ้า (G.Show) {

g.chart.hide ();

G.SHOW = FALSE;

HASSVG

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

: สิ่งนี้ [0] .style.color = '#ccc';

// ถ้าเป็นภาพที่แบ่งส่วนมันจะเกี่ยวข้องกับการวาดใหม่

ถ้า (iSsegment) {

self.hidelist [i] = '';

var maingroup = self.maingroup;

สำหรับ (ชื่อ var ใน maingroup) {

var parent = maingRoup [ชื่อ]. chart,

โหนด = ผู้ปกครอง [0] .childnodes

len = nodes.length;

// ทำลายสิ่งที่วาดบนภาพ

สำหรับ (var i = len-1; i> = 0; i-) {

vector.prototype.destroy.call (โหนด [i])

// ทาสีใหม่

self.drawsegment ();

}อื่น{

g.chart.show ();

G.Show = true;

HASSVG

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

: สิ่งนี้ [0] .style.color = '#000'

ถ้า (iSsegment) {

ลบ self.hidelist [i];

var maingroup = self.maingroup;

สำหรับ (ชื่อ var ใน maingroup) {

var parent = maingRoup [ชื่อ]. chart,

โหนด = ผู้ปกครอง [0] .childnodes

len = nodes.length;

สำหรับ (var i = len-1; i> = 0; i-) {

vector.prototype.destroy.call (โหนด [i])

self.drawsegment ();

arr = [];

type = type || 'lateral';

var legendPanel = self.group ('ตำนาน')

.appendto ();

if (type === 'ด้านข้าง') {

// ถ้าเป็นแนวนอน

var top = orig_pos [1] + 5

th = hassvg? 0: 3

ซ้าย = orig_pos [0] + 5;

แต่ละ (ข้อมูล, ฟังก์ชัน (i, d) {

ซ้าย = i === 0? ซ้าย: t_space+ซ้าย;

// คำนวณตำแหน่งของซ้ายทั้งหมด

// ถ้ามันเป็นแผนภาพเชิงเส้นให้วาดภาพวาดในรูปแบบของไดอะแกรมเชิงเส้น

ถ้า (ISLINE) {

self.basedraw.path (ตัวเอง, {

ชายแดน: 1.5,

BorderColor: D.Color

Isfill: เท็จ

เส้นทาง : [

left.tofixed (0)

(Top+10) .tofixed (0)

(ซ้าย+25) .tofixed (0)

(Top+10) .tofixed (0)

.appendto (LegendPanel);

self.basedraw [d.dottype || 'Circle'] (ตัวเอง, {

x: ซ้าย+12

Y: Top+10,

r: 4,

FillColor: D.Color

.appendto (LegendPanel);

}อื่น{

self.basedraw.rect (ตัวเอง {

อาร์ค: 0.1

เติม: D.Color,

ชายแดน: 1,

BorderColor: D.Color

ซ้าย: ซ้าย,

ด้านบน: ด้านบน,

ความกว้าง: t_width+'px'

ความสูง: t_height+'px'

.Appendto (LegendPanel)

ซ้าย = ซ้าย + t_width + 2 + t_space;

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

self.basedraw.span (ตัวเอง {

'text-anchor': 'ซ้าย',

x: ซ้าย,

y: top+th

.CSS (ขยาย (CSS, {เคอร์เซอร์: 'ตัวชี้'})))

.on ('คลิก', function () {

handle.call (นี่, i);

.AddText (D.Name)

.appendto (LegendPanel);

ซ้าย = ซ้าย + W;

this.basedraw.rect (นี่ {

อาร์ค: 0.1

เติม: 'ไม่มี',

ชายแดน: 1.5,

BorderColor: '#666666'

ความกว้าง: ซ้าย+ t_space- orig_pos [0]

ความสูง: MaxHeight,

ซ้าย: orig_pos [0],

ด้านบน: orig_pos [1]

.appendto (LegendPanel);

}อื่น{

var top = orig_pos [1] + 5

th = hassvg? 0: 3

ซ้าย = orig_pos [0] + 5;

แต่ละ (ข้อมูล, ฟังก์ชัน (i, d) {

top = i === 0? ด้านบน: T_SPACE + TOP;

self.basedraw.rect (ตัวเอง {

อาร์ค: 0.1

เติม: D.Color,

ชายแดน: 1,

BorderColor: D.Color

ซ้าย: ซ้าย,

ด้านบน: ด้านบน,

ความกว้าง: t_width+'px'

ความสูง: t_height+'px'

.appendto (LegendPanel);

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

self.basedraw.span (ตัวเอง {

'text-anchor': 'ซ้าย',

x: ซ้าย+t_width+2+t_space

y: top+th

.CSS (ขยาย (CSS, {เคอร์เซอร์: 'ตัวชี้'})))

.AddText (D.Name)

.on ('คลิก', function () {

// ถ้าเป็นแผนภูมิพายหลายชั้นมันไม่สามารถซ่อนได้

if (opts.charts.type === 'พาย') ผลตอบแทน;

handle.call (นี่, i);

.appendto (LegendPanel);

top = top + h + t_space;

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

this.basedraw.rect (นี่ {

อาร์ค: 0.1

เติม: 'ไม่มี',

ชายแดน: 1.5,

BorderColor: '#666666'

ความกว้าง: MaxWidth+22+15

ความสูง: top+t_space-orig_pos [1]

ซ้าย: orig_pos [0],

ด้านบน: orig_pos [1]

.appendto (LegendPanel);

คืนสิ่งนี้;

drawline: function () {

var self = this,

opts = this.opts,

draw = opts.draw;

แต่ละ (opts.chartdata, function (i, o) {

var id = 'แผนภูมิ'+i,

lineGroup = self.group (id)

.appendto ();

self.maingroup [id] = {

แผนภูมิ: LineGroup,

แสดง: จริง

var path = [m]

data = O.Data

เส้น;

สำหรับ (var i = 0, l = data.length; i <l; i ++) {

if (data [i] == null) {

// หากข้อมูลนี้ไม่มีอยู่และไม่ใช่เส้นทางข้อมูลแรกให้เพิ่ม m ลงไป

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

path.push (m);

}อื่น{

// ถ้าไม่ใช่เส้นทางข้อมูลแรกให้เพิ่ม l

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

// ถ้าคนแรกเป็นโมฆะและไม่ใช่คนแรกที่จะลบ l

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

path.pop ();

// คำนวณตำแหน่งของ x และ y ของจุด

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

y = draw.starty - data [i] * (draw.ypices / draw.feed);

ถ้า (isie) {

x = parseint (x);

y = parseint (y);

path.push (x);

path.push (y);

// วาดจุด

var dotType = O.DotType || 'Circle';

self.basedraw [dottype] (ตัวเอง, {

x: x,

y: y,

r: 4,

FillColor: O.Color

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

.css ({zindex: 10, เคอร์เซอร์: 'ตัวชี้'})

.on ('Mouseover', (ฟังก์ชั่น (o, x, y) {

return function () {

if (self.currlist.dot) {

if (self.currlist.dot [0] === สิ่งนี้ [0])

กลับ;

self.currlist.dot.setsize (0);

self.currlist.line.setsize (1.5);

this.setsize (2);

line.setsize (2.5);

var pos = this.attr ('pos'). แยก ('-');

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

self.currlist.dot = this;

self.currlist.line = line;

}) (o, x, y))

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

this.setsize (0);

line.setsize (1.5);

.on ('คลิก', function () {linegroup.tofront ();})

.appendto (กลุ่ม linegroup);

// วาดเส้นพับ

line = self.basedraw.path (ตัวเอง, {

ชายแดน: 1.5,

BorderColor: O.Color,

Isfill: เท็จ

เส้นทาง: เส้นทาง

.css ({zindex: 5})

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

this.setsize (2.5);

.on ('Mouseout', function () {

this.setsize (1.5);

.on ('คลิก', function () {linegroup.tofront ();})

.appendto (กลุ่ม linegroup);

คืนสิ่งนี้;

drawarea: function () {

var self = this,

opts = this.opts,

draw = opts.draw;

แต่ละ (opts.chartdata, function (i, o) {

var id = 'แผนภูมิ' + i,

Areagroup = self.group (id) .appendto ();

self.maingroup [id] = {แผนภูมิ: areagroup, show: true};

// มี 2 เส้นทางหนึ่งเส้นทางคือเส้นทางของภูมิภาคและอีกเส้นทางหนึ่งคือเส้นทางของเส้น

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

PATH = [M]

data = O.Data

เส้น;

สำหรับ (var n = 0, l = data.length; n <l; n ++) {

// ถ้าข้อมูลว่างเปล่า

var len = AreaPath.length;

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

// ถ้าก่อนหน้านี้ไม่ใช่ m ให้วาดอีกครั้งดังนั้นเพิ่ม m

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

path.push (m);

// ถ้าส่วนแรกหรือด้านหน้าเป็นโมฆะให้แก้ไขพิกัดจุดเริ่มต้น

Len === 3

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

// หากก่อนหน้านี้ไม่ใช่กราฟพื้นที่ตัวระบุปลาย

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

AreaPath = AreaPath.concat ([

Areapath [Len - 2]

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

ผนึก

}อื่น{

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

AreaPath.push (L);

// หากข้อมูลก่อนหน้านี้เป็นโมฆะให้ลบ l ก่อนหน้า

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

path.pop ();

// ถ้าคนแรกเป็นโมฆะอย่าลบ l

n! == 1 && areappath.pop ();

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

y = draw.starty - ข้อมูล [n] * (draw.ypices / draw.feed);

ถ้า (isie) {

x = parseint (x);

y = parseint (y);

path.push (x);

path.push (y);

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

AreaPath = AreaPath.concat ([

parseint (draw.starty-draw.jianjuy),

}อื่น{

AreaPath.push (x);

AreaPath.push (y);

// ถ้าเป็นจุดสุดท้าย

ถ้า (n === l - 1) {

AreaPath.push (x);

AreaPath.push (ParseInt (draw.starty-draw.jianjuy));

// วาดจุด

self.basedraw [O.Dottype || 'Circle'] (ตัวเอง, {

x: x,

y: y,

r: 4,

FillColor: O.Color

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

.on ('Mouseover', (ฟังก์ชั่น (o, x, y) {

return function () {

if (self.currlist.dot) {

if (self.currlist.dot [0] === สิ่งนี้ [0])

กลับ;

self.currlist.dot.setsize (0);

self.currlist.line.setsize (1.5);

this.setsize (2);

line.setsize (2.5);

var pos = this.attr ('pos'). แยก ('-');

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

self.currlist.dot = this;

self.currlist.line = line;

}) (o, x, y))

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

this.setsize (0);

line.setsize (1.5);

//self.hidetooltip ()

.on ('คลิก', function () {areagroup.tofront ();})

.css ({zindex: 10, เคอร์เซอร์: 'ตัวชี้'})

.appendto (Areagroup);

AreaPath.push (ซีล)

self.basedraw.path (ตัวเอง, {

ชายแดน: 0,

Isfill: จริง

FillColor: O.Color,

ความทึบ: 0.5,

เส้นทาง: AreaPath

.css ({zindex: 5})

.appendto (Areagroup);

line = self.basedraw.path (ตัวเอง, {

ชายแดน: 1.5,

BorderColor: O.Color,

Isfill: เท็จ

เส้นทาง: เส้นทาง

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

HASSVG

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

: (นี่ [0] .strokeweight = 2.5);

.on ('Mouseout', function () {

HASSVG

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

: (นี่ [0] .strokeweight = 1.5);

.on ('คลิก', function () {areagroup.tofront ();})

.css ({zindex: -1})

.appendto (Areagroup);

คืนสิ่งนี้;

DrawColumns: function () {

var self = this,

opts = this.opts,

draw = opts.draw

ChartData = Opts.ChartData

datalen = chartdata.length,

// ระยะห่างระหว่างหลายคอลัมน์

คอลัมน์สเปซ = 3

// ผลรวมของทุกช่วงเวลาในตำแหน่ง

columnPadding = columnspace * datalen + columnspace

// ความกว้างของแต่ละคอลัมน์

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

- หมายเลข (((draw.xpices - columnpadding) / datalen) .tofixed (0))

: หมายเลข ((((draw.ypices - columnpadding) / datalen) .tofixed (0));

แต่ละ (chartdata, function (i, o) {

var data = o.data,

id = 'แผนภูมิ' + i,

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

colgroup = self.group (id) .appendto ()

// ตำแหน่งเริ่มต้นของแต่ละจุด

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

- draw.startx + columnspace + i*(columnsize + columnspace)

: draw.starty + columnspace + i*(columnsize + columnspace)

self.maingroup [id] = {แผนภูมิ: colgroup, show: true};

สำหรับ (var j = 0, l = data.length; j <l; j ++) {

if (data [j] === null) ดำเนินการต่อ;

// ถ้าเป็นจานด้านข้าง

ถ้า (isx) {

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

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

ความสูง = จำนวน ((ข้อมูล [j] * (draw.ypices / draw.feed) -draw.jianjuy) .tofixed (0)),

เส้นทาง = [

y -height,

x + คอลัมน์ขนาด

y - ความสูง

x + คอลัมน์ขนาด

ผนึก

var pos = [x+คอลัมน์/2, ข้อมูล [j]> 0? y-height: draw.starty-draw.jianjuy];

}อื่น{

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

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

y = number ((เริ่ม - (j+1) *draw.ypices) .tofixed (0)),

เส้นทาง = [

x+ความกว้าง

x + ความกว้าง

y + คอลัมน์ขนาด

y+ คอลัมน์ขนาด

ผนึก

var pos = [draw.startx+draw.jianjux+ความกว้าง/2, y];

self.basedraw.path (ตัวเอง, {

ชายแดน: 0,

Isfill: จริง

FillColor: O.Color,

ความทึบ: 1,

เส้นทาง: เส้นทาง

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

.css ({zindex: 5, เคอร์เซอร์: 'ตัวชี้'})

.on ('Mouseover', (ฟังก์ชั่น (d) {

return function () {

สิ่งนี้ setOpacity (0.85);

var pos = this.attr ('pos'). แยก ('-')

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

}) (ข้อมูล [j])

.on ('Mouseout', function () {

นี่คือความสามารถ (1);

.appendto (Colgroup);

คืนสิ่งนี้;

drawpie: function () {

var self = this,

opts = this.opts,

พื้นที่ = opts.area

rx = areame.centerx

ry = พื้นที่ศูนย์กลาง

inc = 0,

ทั้งหมด = 0,

data = [],

cumulative = -0.25, // เริ่มต้นที่ด้านบน;

circ = 2 * math.pi

radiu = mathmin (opts.charts.radius, mathmin (พื้นที่.

เศษส่วน

half_fraction;

แต่ละ (opts.chartdata, function (i, o) {

Typeof O.Data === 'Object'

- (data.push ((ฟังก์ชั่น (o) {

var ทั้งหมด = 0;

สำหรับ (var i ใน o)

ทั้งหมด+= ~~ o [i]

คืนทั้งหมด

}) (O.Data))))

: data.push (Mathabs (O.Data)))

แต่ละ (ข้อมูล, ฟังก์ชัน (i, o) {

ทั้งหมด = ทั้งหมด + o;

แต่ละ (ข้อมูล, ฟังก์ชัน (i, o) {

var piegroup = self.group ('แผนภูมิ'+i) .appendto ()

S = Inc/Total*360

e = (inc + o)/ทั้งหมด*360

name = opts.chartData [i] .name,

size = caltextlen (ชื่อ)

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

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

inc = inc + o;

ค่า var = number (o);

ส่วน = ทั้งหมด? มูลค่า / ทั้งหมด: 0;

half_fraction = ทั้งหมด? (ค่า / 2) / ทั้งหมด: 0;

var start = cumulative * circ;

half_cumulative = สะสม + half_fraction;

สะสม += เศษส่วน;

var end = cumulative * circ;

self.basedraw.pie (ตัวเอง, {

config: opts.chartdata [i],

S: เริ่มต้น

E: จบ

r: radiu,

innerr: 0

.css ({zindex: 5, เคอร์เซอร์: 'ตัวชี้'})

.ATTR ({Move: MovingIsplacement, POS: dot [0]+'-'+dot [1]})

.on ('Mouseover', function () {

สิ่งนี้ setOpacity (0.85);

var pos = this.attr ('pos'). แยก ('-');

self.showtooltip (opts.chartdata [i], pos [0], pos [1], ((es)/360*100) .tofixed (0)+'%')

.on ('Mouseout', ฟังก์ชั่น (e) {

var elem = e.toelement || E.RelatedTarget;

// ถ้าคุณพบข้อความภายในหรือกล่องพรอมต์จะไม่หายไป

if (! elem || มี (นี้ [0] .parentNode, elem) || มี (self.tipc [0], elem)))

กลับ;

self.hidetooltip ();

นี่คือความสามารถ (1);

.on ('คลิก', function () {

var m = this.attr ('ย้าย')

if (m.indexof ('+')> 0) {

HASSVG

- this.attr ({

แปลง: 'แปล (0,0)'

: this.css ({

ซ้าย: '0px',

ด้านบน: '0px'

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

}อื่น{

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

HASSVG

- this.attr ({

แปลง: 'แปล ('+m+')'

: this.css ({

ซ้าย: s [0]+'px'

ด้านบน: s [1]+'px'

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

.appendto (piegroup);

self.maingroup ['แผนภูมิ'+i] = {

แผนภูมิ: PieGroup,

แสดง: จริง

self.basedraw.span (ตัวเอง {

x: x,

y: y,

เติม: '#FFFF',

'text-anchor': 'ซ้าย'

.CSS ({

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

Fontsize: '12px'

ตำแหน่ง: 'สัมบูรณ์',

สี: '#FFF',

เคอร์เซอร์: 'ตัวชี้',

Zindex: 10

.AddText (ชื่อ)

.appendto (piegroup);

drawpies: function () {

var self = this,

opts = this.opts,

พื้นที่ = opts.area

rx = areame.centerx

ry = พื้นที่ศูนย์กลาง

ทั้งหมด = 0,

data = [],

ChartData = Opts.ChartData

cumulative = -0.25, // start at top;

circ = 2 * Math.PI,

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

fraction,

half_cumulative,

half_fraction;

each(chartData,function(i,o){

each(o.data,function(j,d){

data[j]

- data[j] +=mathAbs(d)

: data[j] =mathAbs(d)

//看有多少个数据来生成来生成内半径

var len = data.length,

innerSpace = radiu / 10;

Rpice = (radiu - innerSpace) / len;

each(data,function(i,d){

var inc = 0;

if(d===0) return;

each(chartData,function(j,o){

if(~~o.data[i]===0)return;

var outR = radiu - Rpice * i,

innerR = radiu - Rpice * (i + 1),

value = ~~o.data[i],

fraction = value / d;

half_fraction = (value/2)/d ,

start = cumulative * circ,

s = inc/d*360,

e = (inc + value)/d*360,

id = 'chart'+j,

piesGroup = self.mainGroup[id]?self.mainGroup[id].chart:self.group(id).appendTo();

!self.mainGroup[id]

&&(self.mainGroup[id] = {chart:piesGroup,show:true});

inc = inc + value;

varname = o.name,

size = calTextLen(name),

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

showDot = angle(radiu- Rpice * i,[rx,ry],s+(es)/2,2),

px = dot[0]>rx?1:-1,

py = dot[1]>ry?1:-1;

var x = rx + px*innerSpace + ((dot[0]-rx-px*innerSpace)/len)*(len-i-1)+((dot[0]-rx-px*innerSpace)/len)/2- size.w/2,

y = ry + py*innerSpace +((dot[1]-ry-py*innerSpace)/len)*(len-i-1)+((dot[1]-ry-py*innerSpace)/len)/2- size.h/2;

half_cumulative = cumulative + half_fraction,

cumulative += fraction,

end = cumulative * circ;

self.baseDraw.pie(self,{

config : o,

s : start,

e : end,

r : outR,

innerR : innerR

.attr({m : i+'-'+j,data:((es)/360*100).toFixed(0)+'%',pos:showDot[0]+'-'+showDot[1]})

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

.on('mouseover',function(){

this.setOpacity(0.85);

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

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

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

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

if(!elem||elem.getAttribute('m')===this[0].getAttribute('m'))

กลับ;

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

ตำแหน่ง: 'สัมบูรณ์',

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)

กลับ;

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)

กลับ;

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,

ผนึก

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

}อื่น{

var start = draw.startY - columnPad,

x = ~~(draw.startX+(prev[j]?prev[j]:0)).toFixed(0) ,

y = ~~(start- j*draw.yPices).toFixed(0),

size = ~~(d*draw.xPices / draw.feed ).toFixed(0),

path = [

x + size,

y ,

x + size,

y - columnSize,

x ,

y - columnSize,

ผนึก

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

ผนึก

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

ผนึก

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

ผนึก

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'

}อื่น{

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;

}อื่น{

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

กลับ 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

})(เอกสาร);

window.onload = function(){

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

var config = {

charts : {

type : 'line',

radius : 150,

panel : 'x',

สไตล์: {

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

fontSize: '12px'

ชื่อ: {

text: '线性图表',

y: 10,

สไตล์: {

color: 'black',

fontSize: '16px'

subTitle : {

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

y: 35,

สไตล์: {

color: '#111',

fontSize: '12px'

ตำนาน : {

enable : true,

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

type : 'lateral',

pos : [10,10],

สไตล์:{

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

fontSize : '12px',

magin : '0px'

yUnit : {

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

x : 20,

สไตล์: {

color : '#111',

fontSize : '12px'

xUnit : {

units: [

'มกราคม',

'กุมภาพันธ์',

'มีนาคม',

'เมษายน',

'อาจ',

'มิถุนายน',

'กรกฎาคม',

'สิงหาคม',

'กันยายน',

'ตุลาคม',

'พฤศจิกายน',

'ธันวาคม'

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>

อื่น

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

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