دعم الرسم البياني الرسم البياني الرسم البياني الخطي الرسم البياني الفطيرة
يدعم متصفحات متعددة
تستخدم SVG VML
نسخة الكود كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> smiplechart </title>
<type type = "text/css">
.نسخة{
الارتفاع: 450 بكسل ؛ العرض: 800 بكسل ؛ الحدود: 1 بكسل Solid #999 ؛ الموقف: قريب الهامش: 20 بكسل ؛
}
</style>
</head>
<body>
<div id = 't'> </viv>
<div id = 't1'> </viv>
<div id = 'line'> </viv>
<div id = 'area'> </viv>
<div id = 'Zhu'> </viv>
<div id = 'zhu1' style = "الارتفاع: 600px ؛"> </div>
<div id = 'segmentx'> </viv>
<div id = 'segmenty'> </viv>
<div id = 'pie'> </viv>
<div id = 'pies'> </viv>
<div id = 'vv' style = 'الارتفاع: 300px ؛ العرض: 520px ؛ '> </div>
<script type = "text/javaScript">
(وظيفة (DOC ، غير محدد) {
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' ؛
Win. $$ = function (id) {
return document.getElementById (id) ؛
} ؛
win.Extend = function () {
var target = mations [0] || {} ، i = 1 ، length = edation.length ، deep = true ، Options ؛
if (typeof target === "Boolean") {
عميق = الهدف ؛
الهدف = الوسائط [1] || {} ؛
أنا = 2 ؛
}
if (typeof target! == "object" && object.prototype.toString.call (target)! = "[comfort function]")
الهدف = {} ؛
لـ (؛ i <length ؛ i ++) {
if ((خيارات = الوسائط [i])! = null)
لـ (var name in Options) {
var src = target [name] ، copy = Options [name] ؛
إذا (الهدف === نسخة)
يكمل؛
if (deep && copy && typeof copy === "object" &&! copy.nodeType) {
Target [name] = enduments.callee (deep ، src || (copy.length! = null؟ []: {}) ، copy) ؛
}
آخر إذا (نسخة! == غير محددة)
الهدف [الاسم] = نسخة ؛
}
}
الهدف الإرجاع ؛
} ؛
win.each = دالة (كائن ، رد الاتصال ، args) {
var name ، i = 0 ، length = object.length ؛
إذا (args) {
args = array.prototype.slice.call (الحجج) .slice (2) ؛
إذا (الطول === غير محدد) {
ل (الاسم في كائن)
if (callback.apply (Object [name] ، [name ، Object [name]]. concat (args)) === false)
استراحة؛
} آخر
لـ (؛ i <length ؛ i ++)
if (callback.apply (object [i] ، [i ، object [i]]. concat (args)) === false) //
استراحة؛
} آخر {
إذا (الطول === غير محدد) {
ل (الاسم في كائن)
if (callback.call (Object [name] ، name ، Object [name]) === false)
استراحة؛
} آخر
لـ (var value = object [0] ؛
i <length && callback.call (القيمة ، i ، القيمة)! == false ؛ value = object [++ i]) {}
}
كائن إرجاع ؛
} ؛
win.contains = function (p ، c) {
if (! p ||! c) return false ؛
إذا (p === c) العودة صحيح ؛
العودة إيسي
؟ P.Contains (ج)
: P.ComparedocumentPosition (C) == 20
؟ حقيقي
: خطأ شنيع؛
} ؛
// -----------------------------------------------------------
وظيفة ProcessPoint (x) {
العودة إيسي؟ ~~ x.tofixed (0): ~~ x.tofixed (0) + 0.5 ؛
} ؛
وظيفة caltextlen (txt ، cssstr) {
var span = doc.createElement ('span') ؛
إذا (CSSSTR) {
typeof cssstr === 'String'
؟ 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 = 'Hidden' ؛
doc.body.appendchild (span) ؛
var width = span.offsetwidth ،
الارتفاع = span.offsetheight ؛
doc.body.removechild (span) ؛
إرجاع {W: العرض ، H: الارتفاع} ؛
} ؛
زاوية الوظيفة (R ، المركز ، O ، Jingdu) {
var hudu = math.pi*2*(O/360) ،
x = المركز [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 = 1000 ،
stf = ((b*ta*t)/الكتان)/t ،
arr = [1،2،2.5،5،10] ،
ج = 1 ،
الخامس ؛
.
if (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 ، وظيفة (i ، o) {
if (stf <= o) {
v = o ؛
العودة كاذبة
}
}) ؛
var bj = (Mathabs (a)*t)/(v*t) ،
با = 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)) ؛
if (a> = 0) {
// تنسيق عدد صحيح المقارنة
if (a! = 0 && num! = 0 && a ٪ 10! == 0) {
بينما (a! = 0 && num! = 0) {
a = (a*tv*t)/t ؛
num- ؛
if ((A*TV*num*t)/10000> 0 && a ٪ 10 === 0)
استراحة؛
}
}
if (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)
استراحة؛
}
}
if (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: Function (Graphic ، Nodename) {
this.element = this [0] = doc.CreateElementNs ('http://www.w3.org/2000/svg' ، nodename) ؛
this.graphic = الرسم ؛
إرجاع هذا ؛
} ،
attr: function (hash ، val) {
var elem = this.element ،
مفتاح،
قيمة؛
if (typeof hash === 'string') {
if (val === undefined) {
إرجاع elem.getattribute (hash) ؛
}آخر{
elem.setattribute (hash ، val) ؛
إرجاع هذا ؛
}
} آخر {
لـ (المفتاح في التجزئة) {
القيمة = hash [مفتاح] ؛
if (key === path) {
القيمة && value.join
&& (value = value.join ('')) ؛
/(نان | |^$)/. اختبار (قيمة)
&& (value = 'm 0 0') ؛
}
elem.setattribute (المفتاح ، القيمة)
}
}
إرجاع هذا ؛
} ،
CSS: وظيفة (التجزئة) {
لـ (VAR Key in Hash) {
isie && key == "العتامة"
؟ هذا [0]
: هذا [0] .style [key] = hash [key] ؛
}
إرجاع هذا ؛
} ،
ON: Function (eventName ، Handler) {
var self = this ؛
/* this.element.addeventListener(eventName،function () {
معالج. كول (الذات)
}،خطأ شنيع)؛*/
this.element ['on' + eventName] = function (e) {
e = e || وين.
Handler.Call (Self ، E) ؛
}
إرجاع هذا ؛
} ،
AppendTo: Function (Parent) {
إذا (الوالد) {
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 ('تعبئة opitive' ، v) ؛
إرجاع هذا ؛
} ،
SetSize: Function (V) {
هذا [0] .NODENAME === 'الدائرة'
؟ this.attr ('r' ، 4+(v === 0؟ 0: 2))
: this.attr ({'Stroke-Width': v}) ؛
إرجاع هذا ؛
} ،
tofront: function () {
هذا [0] .ParentNode.AppendChild (هذا [0]) ؛
إرجاع هذا ؛
} ،
عرض: وظيفة () {
هذا [0] .style.display = 'block' ؛
إرجاع هذا ؛
} ،
إخفاء: وظيفة () {
هذا [0] .style.display = 'none' ؛
إرجاع هذا ؛
} ،
تدمير: وظيفة () {
// تدمير العقد ............
var node = this [0] || هذا؛
node.onmouseover = node.onmouseout = node.onclick = null ؛
Node.ParentNode
&& node.parentnode.removechild (node) ؛
إرجاع هذا ؛
}
} ؛
// -------------------------------------------------------------------------------------------------------------
// -------------------------------------------------------------------------------------------------
// إذا كان VML لتعديل بعض هذه الطرق
إذا (! hassvg) {
// -------------------------------------------------------------------------------------------------------------------------
Doc.CreatesTylesheet (). addrule (".
! doc.namespaces.vml &&!+"/v1" ؛
doc.namespaces.add ("vml" ، "urn: schemas-microsoft-com: vml") ؛
.
تمديد (vector.prototype ، {
$ C: Function (Graphic ، Nodename) {
var name = nodeName || 'شكل'؛
this.element = this [0] = (name === 'div' || name === 'span')
؟ Doc.CreateElement (الاسم)
: Doc.CreateElement ('<vml:'+name+'>') ؛
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]. وزن الضرب = 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" ،
الحجم: '12px' ،
الخلفية: '#ffffff'
}
} ،
عنوان: {
نص : ''،
Y: 10 ،
أسلوب: {
Fontfamily: 'Verdana ، arial ، helvetica ، sans-serif' ،
الحجم: '16px' ،
Fontweight: 'Bold'
}
} ،
الترجمة: {
نص: ''،
Y: 30 ،
أسلوب: {
Fontfamily: 'Verdana ، arial ، helvetica ، sans-serif' ،
الحجم: '12px' ،
اللون: '#111'
}
} ،
يونيت: {
نص : ''،
أسلوب: {
Fontfamily: 'Verdana ، arial ، helvetica ، sans-serif' ،
الحجم: '12px' ،
اللون: '#111'
} ،
الكتان: 10
}
} ،
init: وظيفة (حاوية ، خيارات) {
ClearTimeout (smiplechart.timer)
var self = this ؛
this.width = Container.OffSetWidth ؛
هذا.
this.currlist = {} ؛
this.uuuid = ++ uuuid ؛
this.timer = null ؛
// شكل المجموعة الرئيسية لمجموعة الرسم
// {id: {dom: xx ، show: true}}
this.maingroup = {} ؛
// ما يجب استخدامه عند التجزئة هو معرفة أي منها مخفي لأنه ينطوي على إعادة رسم
this.hidelist = {} ؛
// يجب أن يحتوي الرسم في SVG على SVG Tag VML واستخدام Div
this.container = hassvg
؟ New Vector (). $ C (1 ، 'SVG')
.attr ({
xmlns: 'http://www.w3.org/2000/svg' ،
الإصدار: '1.1' ،
العرض: هذا.
الارتفاع: هذا
})
.css ({fontsize: '12px'})
.appendto (حاوية)
: New Vector (). $ C (1 ، 'Div')
.CSS ({
الحجم: '12px' ،
العرض: this.width +'px' ،
الارتفاع: this.hight+'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 = 'aboRALUTE' ؛
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 = تمديد (صواب ، {} ، this.options) ،
opts = this.opts = تمديد (صواب ، ج ، خيارات) ،
style = تمديد (opts.charts.style ، {
العرض: هذا.
الارتفاع: هذا
}) ؛
smilechart.list [this.uuuid] = this ؛
smilechart.timer = setTimeout (function () {
smilechart.lazyload () ؛
} ، 200) ؛
} ،
loadme: function () {
var opts = this.opts ،
الذات = هذا ،
اكتب = opts.charts.type ؛
this.container = this.container
.on ('mouseout' ، وظيفة (e) {
var elem = e.ReledTarget || E.ToElement ؛
if (! يحتوي على (هذا [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] ؛
// بعض المعلمات المطلوبة عند حساب لوحة الرسم
this.getdrawarea ()
.createtooltip () // قم بإنشاء مربع للحصول على معلومات موجهة
.drawtitle () // ارسم العنوان
// ارسم اللوحة
'الخط ، المنطقة ، pie'.indexof (type)> = 0
&& (opts.charts.panel = 'x') ؛
'Pie ، Pies'.indexof (type) <0
&& this.drawpanel () ؛
this.drawLegend (opts.legend.type) ؛ // ارسم قضبان كتلة الألوان
var type = {
السطر: 'Drawline' ،
المنطقة: 'Drawarea' ،
الأعمدة: 'DrawColumns' ،
فطيرة: 'Drawpie' ،
فطائر: 'Drawpies' ،
المقطع: 'Drawsegress'
} [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) {
إرجاع New Vector (). $ C (هذا ، nodename) ؛
} ،
المجموعة: الوظيفة (الاسم) {
إرجاع هذا.
} ،
getDrawarea: function () {
var opts = this.opts ،
العرض = this.width ،
الارتفاع = this.hight ،
العنوان = opts.title ،
العنوان الفرعي = opts.subtitle ،
المنطقة = {
// قم بإزالة عرض نص المقياس على الجانب الأيسر من محور الإحداثيات (المقدرة) 80 هو القيمة الثابتة ويترك 80 فقط إلى الجانب الأيسر من القيمة الثابتة.
عرض المنطقة: العرض - 80 ،
// قم بإزالة ارتفاع النص والعلامات تحت المحور
AreaHeight: الارتفاع - 40 ،
// سيتم حساب الموضع x للأصل أدناه
startx: 0 ،
// سيتم حساب موضع y الأصل أدناه
Starty: 0 ،
// عند رسم مخطط فطيرة مع إحداثيات X للمركز ، تحتاج إلى معرفة موضع مركز الدائرة.
CenterX: 0 ،
// عند رسم مخطط فطيرة مع إحداثي Y في الوسط ، تحتاج إلى معرفة موضع مركز الدائرة.
مركزية: 0
} ؛
// إذا كان العنوان الرئيسي موجودًا ، فقم بطرح ارتفاع العنوان الرئيسي بخلاف ذلك ، قم بطرح ارتفاع 10
area.areaheight -= (title.text! == '')
؟ title.y
: 10 ؛
// قم بإزالة ارتفاع الترجمة
area.areaheight -= (subtitle.text! == '')
؟ الترجمة
: 10
area.startx = 80 ؛
area.starty = الارتفاع - 40 ؛
// موقف مركز الدائرة
area.centerx = العرض / 2 ؛
area.centery = الارتفاع / 2 ؛
// اترك بعض المساحة على اليمين
area.areawidth -= 20 ؛
// اترك بعض التباعد في الأعلى
area.areaheight -= 15 ؛
Opts.area = المنطقة ؛
إرجاع هذا ؛
} ،
DrawTitle: function () {
var opts = this.opts ،
الذات = هذا ،
arr = [opts.title ، opts.subtitle ، opts.yunit] ،
// المعلمات الأساسية لموقف 3 إحداثيات العنوان
التكوين = [
{
X: This.width / 2 ،
y: opts.title.y
} ،
{
X: This.width / 2 ،
y: opts.subtitle.y
} ،
{
X: OPTS.YUNIT.X ،
y: this.hight / 2 - 20
}
]
tpanel = this.group ('title')
.appendto () ؛
كل (arr ، وظيفة (i ، العنوان) {
var text = title.text ؛
إذا (النص) {
var elem = self.basedraw.span (self ، {
'text-anchor': 'Left' ،
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: dimizageTransform.microsoft.basicimage (الدوران = 3)')
}
}
}) ؛
إرجاع هذا ؛
} ،
// لوحات الرسم أكثر إزعاجًا
DrawPanel: function (type) {
varopts = this.opts ،
الذات = هذا ،
المنطقة = Opts.area ،
chartStype = opts.charts.type ،
IsSegment = chartStype === 'Segment' ،
// هو نوع اللوحة الأفقية أو اللوحة العمودية
اكتب = opts.charts.panel || 'x' ؛
// اللوحة السفلية
var drawareawidth = area.areawidth ،
dravareaheight = area.areaheight ،
// إحداثيات الأصل
startx = area.startx ،
starty = area.starty ؛
var alldata = [] ،
minvalue = 0 ،
maxvalue = 10 ،
// يمكن أن يكون عدد الخطوط فقط بين 1 و 10
الكتان = Mathmin (10 ، Mathmax (Opts.yunit.linenum ، 1)) ،
طاقم عمل؛
// الجمع بين جميع البيانات
كل (opts.chartdata ، وظيفة (i ، o) {
// إذا كان مخطط شريط ، فسيتم تلخيصه لجميع البيانات
issegment
؟ كل (O.Data ، وظيفة (J ، D) {
Alldata [J]
؟ alldata [j] = alldata [j] + (~~ d)
: alldata [j] = ~~ d ؛
})
: alldata = alldata.concat (O.Data)
}) ؛
// فرز جميع البيانات للعثور على الحد الأقصى للقيمة والحد الأدنى للقيمة أدناه
alldata.sort (function (a ، b) {return ab}) ؛
// الانتهاء من القيمة القصوى والحد الأدنى القيمة
maxvalue = alldata [alldata.length - 1] ؛
كل (alldata ، وظيفة (i ، o) {
if (o! == null) {
minvalue = o ؛
العودة كاذبة
}
}) ؛
// حاوية لوحة رئيسية
var panel = this.group ('panel'). appendto () ؛
var result = xx (minvalue ، maxvalue ، linenum) ،
min = result.min ،
max = result.max ،
f = result.stf ؛
issegment
&& (min = 0) ؛
// يعني أن الإحداثيات الأفقية أو الإحداثي المزدوج يتم رسمها
if (type.toLowerCase () === 'x') {
// الفاصل الزمني للوحدة تحت الأرض
varxpices = drawareawidth / opts.xunit.units.length ،
// نقطة مركز الفاصل الزمني للوحدة
إزاحة = xpices / 2 ،
ypices = drawareaheight / linenum ؛
.
var y = hassvg؟ 5: 10 ،
t = 1000 ،
فترة؛
كل (opts.xunit.units ، وظيفة (i ، d) {
self.basedraw.path (Self ، {
الحدود: 1 ،
BorderColor: '#c0c0c0' ،
Isfill: خطأ ،
طريق : [
م ،
ProcessPoint (startx + (i * xpices)) ،
ProcessPoint (Starty) ،
ل ،
ProcessPoint (startx + (i*xpices)) ،
ProcessPoint (Starty + 5)
]
}).
appendto (لوحة) ؛
span = self.basedraw.span (Self ، {
X: Startx + Offset + (i * xpices) ،
Y: Starty+Y ،
'text-anchor': 'middle'
})
.CSS ({
Fontfamily: 'Verdana ، arial ، helvetica ، sans-serif' ،
الحجم: '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 (Self ، {
الحدود: 1 ،
BorderColor: '#c0c0c0' ،
Isfill: خطأ ،
المسار: [M ، StartX ، ProcessPoint (Starty - (i * ypices)) ، L ، ProcessPoint (StartX + DrawareAwidth) ، ProcessPoint (Starty - (i * ypices))]
})
.CSS ({zindex: -10})
.appendto (لوحة) ؛
var span = self.basedraw.span (Self ، {
X: StartX - 15 ،
y: starty - i * ypices -caltextlen (min+i * f+''). h/2 ،
'text-anchor': 'middle'
})
.CSS ({
'Font-family': 'Verdana ، Arial ، Helvetica ، Sans-Serif' ،
'Font-size': '12px' ،
العرض: "40 بكسل" ،
العرض: "Block" ،
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'
}
}
}آخر{
// الفاصل الزمني للوحدة تحت الأرض
varypices = dravareaheight / (opts.xunit.units.length) ،
// نقطة مركز الفاصل الزمني للوحدة
إزاحة = Math.round (ypices / 2) ،
x = hassvg؟ 25: 70 ،
y = hassvg؟ 0: 5 ،
فترة
كل (opts.xunit.units ، وظيفة (i ، d) {
self.basedraw.path (Self ، {
الحدود: 1 ،
BorderColor: '#c0c0c0' ،
Isfill: خطأ ،
طريق : [
م ،
ProcessPoint (StartX-5) ،
ProcessPoint (starty-i * ypices) ،
ل ،
ProcessPoint (StartX) ،
ProcessPoint (starty-i * ypices) ،
]
})
.appendto (لوحة) ؛
span = self.basedraw.span (Self ، {
X: StartX - X ،
y: starty -i * ypices-offset-caltextlen (d) .h/2 + y ،
'text-anchor': 'middle'
})
.CSS ({
Fontfamily: 'Verdana ، arial ، helvetica ، sans-serif' ،
الحجم: '12px' ،
العرض: "60px" ،
textalign: "صحيح"
})
.addtext (د)
.appendto (لوحة)
}) ؛
var xpices = drawareawidth / linenum ؛
لـ (var i = 0 ؛ i <= linenum ؛ i ++) {
self.basedraw.path (Self ، {
الحدود: 1 ،
BorderColor: '#c0c0c0' ،
Isfill: خطأ ،
طريق : [
م ،
ProcessPoint (startx + (i * xpices)) ،
ProcessPoint (Starty) ،
ل ،
ProcessPoint (startx + (i*xpices)) ،
ProcessPoint (Starty - Drawareaheight)
]
}).
appendto (لوحة) ؛
self.basedraw.span (الذات ، {
X: StartX - Caltextlen (min+i * f+''). w/2+i * xpices ،
Y: Starty ،
'text-anchor': 'Left'
})
.CSS ({
Fontfamily: 'Verdana ، arial ، helvetica ، sans-serif' ،
الحجم: '12px'
})
.addtext (min+i*f+'')
.appendto (لوحة) ؛
}
}
// -----------------------------------------------------------------------------------------------------
// لأنه من المحتمل ألا تبدأ نقطة البداية من 0 ، لذلك يجب إضافة قيمة الجزء 0 في نقطة البداية.
var Jianju = 0 ؛
if (min> 0) Jianju = min ؛
if (max <0) Jianju = max ؛
startx = opts.charts.panel === 'x'؟ StartX: Startx-Xpices*(min/f) ؛
starty = opts.charts.panel === 'x'؟ starty + ypices*(min/f): Starty ؛
opts.draw = {
Startx: StartX ، // x نقطة انطلاق المحور
البداية: نقطة انطلاق المحور ، // y
Xpices: Xpices ، // عرض كل جزء من محور X
ypices: ypices ، // عرض كل جزء من محور y
الإزاحة: إزاحة ، // x إزاحة موضع نقطة مركز فرع واحد
Jianjuy: Jianju*ypices/f ،
Jianjux: Jianju*Xpices/F ،
التغذية: f // كم عدد المحور y الموجود هناك
}
إرجاع هذا ؛
} ،
CreateToolTip: function () {
// مجموعة
this.tipc = this.group ('tip')
.css ({Zindex: 200 ، الارتفاع: '20px' ، العرض: '20px' ، الموضع: 'aboSit'})
.appendto ()
.يخفي()
// ارسم إطارًا على أساس
this.tipbox = this.basedraw.rect (this ، {arc: 0.22 ، fill: '#ffff' ، الحدود: 2 ، الحدود: '#606060'})
.appendto (this.tipc)
// لأن G في SVG يمكن وضعها مباشرة ، ولكن المجموعة التي يتم عرضها في VML بطيئة للغاية ، لذلك يتم تغيير DIV ، لذلك الوالد هنا ليس هو نفسه الأجنبي
var p = isie؟ this.tipbox: this.tipc ؛
this.tiptxtcontainer = this.basedraw.text (هذا ، {fill: '#000000' ، x: 5 ، y: 19 ، 'text-anchor': 'left'})
.CSS ({
Fontfamily: 'Verdana ، arial ، helvetica ، sans-serif' ،
الحجم: '12px' ،
الخلفية: '#fff'
})
.appendto (p) ؛
this.tiptext = doc.createTextNode ('') ؛
this.tiptxtContainer [0] .appendChild (this.tiptext) ؛
إرجاع هذا ؛
} ،
showtooltip: function (obj ، x ، y ، data) {
/*var txt = obj.name + ':' + البيانات ،
size = caltextlen (txt ، this.tiptxtcontainer [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 ، السكتة الدماغية: obj.color || '#606060'}) ؛
}آخر{
this.tipc.css ({left: pos.x ، top: pos.y}) ؛
this.tipbox
.css ({عرض: 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.tiptxtcontainer [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 ، السكتة الدماغية: obj.color || '#606060'}) ؛
}آخر{
self.tipbox
.css ({عرض: 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 === '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 ({left: pos.x ، top: pos.y}) ؛
this.tipc
.tofront ()
.يعرض()؛
}آخر{
var move = function (t ، b ، c ، d) {
إرجاع c*(t/= d)*t + b ؛
} ،
ر = 0 ،
B = self.tipc.attr ('pos'). split ('-') ،
C = [pos.x ، pos.y] ،
د = 5 ؛
this.timer = setInterval (function () {
إذا (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 ({left: x ، top: y}) ؛
}آخر{
ClearTimeout (self.timer) ؛
}
} ، 1) ؛
} ؛
} ،
hidetooltip: function () {
this.tipc.hide () ؛
} ،
Drawlegend: Function (type ، redraw) {
var self = هذا ،
opts = this.opts ،
isline = opts.charts.type === 'line' ،
// حجم كتلة الألوان
t_width = 20 ،
t_height = 20 ،
// المسافة بين الكتل
T_SPACE = 5 ،
البيانات = opts.chartdata ،
len = datas.length ،
CSS = opts.legend.style ،
// إذا كان الحد الأقصى للطول طوليًا ، فسيكون هناك حاجة إلى الحد الأقصى للطول
maxwidth = 10 ،
maxheight = 30 ،
// موقع هذا الشيء
Orig_pos = opts.legend.pos؟ opts.legend.pos: [2،2] ،
// إظهار وظائف المجموعة المخفية
مقبض = وظيفة (i) {
var g = self.maingroup ['Chart'+i] ،
isSegress = opts.charts.type === 'Segment' ؛
if (g.show) {
G.Chart.Hide () ؛
G.Show = false ؛
Hassvg
؟ this.attr ({fill: '#ccc'})
: هذا [0] .style.color = '#ccc' ؛
// إذا كانت صورة مجزأة ، فستتضمن إعادة الرسم.
if (isSegment) {
self.hidelist [i] = '' ؛
var maingroup = self.maingroup ؛
لـ (اسم var في maingroup) {
var parent = maingroup [name] .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'
if (isSegment) {
حذف self.hidelist [i] ؛
var maingroup = self.maingroup ؛
لـ (اسم var في maingroup) {
var parent = maingroup [name] .Chart ،
العقد = الوالدين [0] .childnodes ،
len = nodes.length ؛
لـ (var i = len-1 ؛ i> = 0 ؛ i-) {
Vector.Prototype.destroy.call (العقد [i])
}
}
self.drawSegment () ؛
}
}
} ،
arr = [] ؛
اكتب = type || 'fildal' ؛
var legendpanel = self.group ('Legend')
.appendto () ؛
if (اكتب === 'الجانبي') {
// إذا كان أفقيًا
var top = Orig_Pos [1] + 5 ،
th = hassvg؟ 0: 3 ،
اليسار = Orig_pos [0] + 5 ؛
كل (بيانات ، وظيفة (i ، d) {
اليسار = i === 0؟ اليسار: t_space+اليسار ؛
// احسب موقع كل اليسار
// إذا كان مخططًا خطيًا ، ارسم الرسم في شكل مخطط خطي
إذا (Isline) {
self.basedraw.path (Self ، {
الحدود: 1.5 ،
الحدود: D.Color ،
Isfill: خطأ ،
طريق : [
م ،
Left.tofixed (0) ،
(أعلى+10) .Tofixed (0) ،
ل ،
(يسار+25). Tofixed (0) ،
(أعلى+10) .Tofixed (0)
]
})
.appendto (LegendPanel) ؛
Self.basedraw [D.Dottype || 'Circle'] (Self ، {
X: اليسار+12 ،
Y: أعلى+10 ،
R: 4 ،
FillColor: D.Color
})
.appendto (LegendPanel) ؛
}آخر{
self.basedraw.rect (الذات ، {
قوس: 0.1 ،
ملء: D.Color ،
الحدود: 1 ،
الحدود: 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': 'Left' ،
X: اليسار ،
Y: Top+Th
})
.CSS (تمديد (CSS ، {المؤشر: 'مؤشر'})))
.on ("انقر" ، دالة () {
handle.call (هذا ، i) ؛
})
.addtext (D.Name)
.appendto (LegendPanel) ؛
اليسار = اليسار + ث ؛
}) ؛
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) {
أعلى = i === 0؟ TOP: T_SPACE + TOP ؛
self.basedraw.rect (الذات ، {
قوس: 0.1 ،
ملء: D.Color ،
الحدود: 1 ،
الحدود: D.Color ،
اليسار: اليسار ،
أعلى: أعلى ،
العرض: t_width+'px' ،
الارتفاع: t_height+'px'
})
.appendto (LegendPanel) ؛
var h = caltextlen (d.name ، css) .h ؛
self.basedraw.span (الذات ، {
'text-anchor': 'Left' ،
X: Left+T_WIDTH+2+T_SPACE ،
Y: Top+Th
})
.CSS (تمديد (CSS ، {المؤشر: 'مؤشر'})))
.addtext (D.Name)
.on ("انقر" ، دالة () {
// إذا كان مخطط فطيرة متعدد الطبقات ، فلا يمكن إخفاؤه
if (opts.charts.type === 'Pies') return ؛
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 = هذا ،
opts = this.opts ،
رسم = opts.draw ؛
كل (opts.chartdata ، وظيفة (i ، o) {
var id = 'Chart'+i ،
LineGroup = Self.group (id)
.appendto () ؛
self.maingroup [id] = {
الرسم البياني: مجموعة الخط ،
عرض: صحيح
} ؛
var path = [m] ،
البيانات = O.Data ،
خط؛
لـ (var i = 0 ، l = data.length ؛ i <l ؛ i ++) {
إذا (البيانات [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' ، (function (o ، x ، y) {
وظيفة الإرجاع () {
if (self.currlist.dot) {
if (self.currlist.dot [0] === this [0])
يعود؛
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 = هذا ؛
self.currlist.line = line ؛
}
}) (o ، x ، y))
/*. ON ('mouseout' ، function () {
this.setsize (0) ؛
line.SetSize (1.5) ؛
})*/
.on ("انقر" ، دالة () {linegroup.tofront () ؛})
.appendto (LineGroup) ؛
}
} ؛
// ارسم الخطوط المطوية
line = self.basedraw.path (Self ، {
الحدود: 1.5 ،
Bordercolor: O.Color ،
Isfill: خطأ ،
المسار: المسار
})
.CSS ({zindex: 5})
/*. ON ('mouseover' ، function () {
this.setsize (2.5) ؛
})
.on ('mouseout' ، function () {
this.setsize (1.5) ؛
})*/
.on ("انقر" ، دالة () {linegroup.tofront () ؛})
.appendto (LineGroup) ؛
}) ؛
إرجاع هذا ؛
} ،
Drawarea: Function () {
var self = هذا ،
opts = this.opts ،
رسم = opts.draw ؛
كل (opts.chartdata ، وظيفة (i ، o) {
var id = 'Chart' + i ،
areaGroup = self.group (id) .Appendto () ؛
self.maingroup [id] = {Chart: AreaGroup ، show: true} ؛
// هناك مساران ، أحدهما مسار المنطقة والآخر هو مسار الخط
var areapath = [m ، (draw.startx + draw.offset) .Tofixed (0) ، (draw.starty-draw.jianjuy) .Tofixed (0)] ،
المسار = [م] ،
البيانات = O.Data ،
خط؛
لـ (var n = 0 ، l = data.length ؛ n <l ؛ n ++) {
// إذا كانت البيانات فارغة
var len = areapath.length ؛
if (البيانات [n] === null) {
// إذا لم يكن السابقين م ، فقم برسمه مرة أخرى لذا أضف م
if (path [path.length - 1]! == m)
path.push (m) ؛
// إذا كانت الأولى أو الجبهة فارغة ، فقم بتعديل إحداثيات نقطة البداية
لين === 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 && areapath.pop () ؛
}
var x = draw.startx + draw.offset + (n * draw.xpices) ،
y = draw.starty - data [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 ([
م ،
x ،
Parseint (draw.starty-draw.jianjuy) ،
ل ،
x ،
ذ
]) ؛
}آخر{
areapath.push (x) ؛
areapath.push (y) ؛
}
// إذا كانت هذه هي النقطة الأخيرة
if (n === l - 1) {
areapath.push (x) ؛
areapath.push (parseint (draw.starty-draw.jianjuy)) ؛
}
// نقاط السحب
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) {
وظيفة الإرجاع () {
if (self.currlist.dot) {
if (self.currlist.dot [0] === this [0])
يعود؛
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 = هذا ؛
self.currlist.line = line ؛
}
}) (o ، x ، y))
/*. ON ('mouseout' ، function () {
this.setsize (0) ؛
line.SetSize (1.5) ؛
//self.hidetooltip ()
})*/
.on ('Click' ، function () {AreaGroup.tofront () ؛})
.css ({zindex: 10 ، المؤشر: 'مؤشر'})
.appendto (AreaGroup) ؛
}
}
areapath.push (ختم)
self.basedraw.path (Self ، {
الحدود: 0 ،
Isfill: صحيح ،
FillColor: O.Color ،
العتامة: 0.5 ،
المسار: AreaPath
})
.CSS ({zindex: 5})
.appendto (AreaGroup) ؛
line = self.basedraw.path (Self ، {
الحدود: 1.5 ،
Bordercolor: O.Color ،
Isfill: خطأ ،
المسار: المسار
})
/*. ON ('mouseover' ، function () {
Hassvg
؟ this.attr ({'Stroke-Width': 2.5})
: (هذا [0]. وزن الضرب = 2.5) ؛
})
.on ('mouseout' ، function () {
Hassvg
؟ this.attr ({'Stroke-Width': 1.5})
: (هذا [0]. وزن الضرب = 1.5) ؛
})*/
.on ('Click' ، function () {AreaGroup.tofront () ؛})
.CSS ({zindex: -1})
.appendto (AreaGroup) ؛
}) ؛
إرجاع هذا ؛
} ،
DrawColumns: Function () {
var self = هذا ،
opts = this.opts ،
ارسم = opts.draw ،
chartdata = opts.chartdata ،
datalen = chartdata.length
// التباعد بين أعمدة متعددة
ColumnSpace = 3 ،
// مجموع جميع الفواصل الزمنية في وضع
ColumnPadding = ColumnSpace * Datalen + ColumnSpace ،
// عرض كل عمود
columnsize = self.opts.charts.panel === 'x'
؟ الرقم (((draw.xpices - ColumnPadding) / datalen) .Tofixed (0))
: رقم (((draw.ypices - ColumnPadding) / datalen) .Tofixed (0)) ؛
كل (chartdata ، وظيفة (i ، o) {
بيانات var = O.Data ،
id = 'Chart' + 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] = {Chart: Colgroup ، show: true} ؛
لـ (var j = 0 ، l = data.length ؛ j <l ؛ j ++) {
إذا (البيانات [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)) ،
المسار = [
م ،
x ،
ذ ،
ل ،
x ،
ص ،
ل ،
X + أعمدة ،
y - الارتفاع ،
ل ،
X + أعمدة ،
ذ ،
ختم
] ؛
var pos = [x+columnsize/2 ، data [j]> 0؟ y-height: draw.starty-draw.jianjuy] ؛
}آخر{
var x = number ((draw.startx+draw.jianjux) .tofixed (0)) ،
العرض = الرقم ((البيانات [j]*((draw.xpices / draw.feed))-draw.jianjux) .Tofixed (0)) ،
y = الرقم ((ابدأ - (j+1) *draw.ypices) .Tofixed (0)) ،
المسار = [
م ،
x ،
ذ ،
ل ،
عرض X+،
ذ ،
ل ،
عرض X + ،
y + أعمدة ،
ل ،
x ،
y+ أعمدة ،
ختم
] ؛
var pos = [draw.startx+draw.jianjux+width/2 ، y] ؛
}
self.basedraw.path (Self ، {
الحدود: 0 ،
Isfill: صحيح ،
FillColor: O.Color ،
العتامة: 1 ،
المسار: المسار
})
.attr ({data: data [j] ، pos: pos [0]+'-'+pos [1]})
.css ({zindex: 5 ، المؤشر: 'مؤشر'})
.on ('mouseover' ، (وظيفة (d) {
وظيفة الإرجاع () {
this.setOpacity (0.85) ؛
var pos = this.attr ('pos'). split ('-')
self.showtooltip (o ، pos [0] ، pos [1] ، this.attr ('data')) ؛
}
}) (البيانات [J])
)
.on ('mouseout' ، function () {
this.setOpacity (1) ؛
})
.appendto (Colgroup) ؛
}
}) ؛
إرجاع هذا ؛
} ،
Drawpie: function () {
var self = هذا ،
opts = this.opts ،
المنطقة = Opts.area ،
rx = area.centerx ،
ry = area.centery ،
INC = 0 ،
المجموع = 0 ،
البيانات = [] ،
التراكمية = -0.25 ، // ابدأ في الأعلى ؛
CIRC = 2 * MATH.PI ،
radiu = mathmin (Opts.Charts.Radius ، Mathmin (area.areawidth/2 ، area.areaheight/2)) ،
جزء،
Half_fraction ؛
كل (opts.chartdata ، وظيفة (i ، o) {
typeof o.data === 'كائن'
؟ (data.push ((وظيفة (O) {
var all = 0 ؛
لـ (var i in o)
الكل+= ~~ o [i]
إرجاع كل شيء
}) (O.Data)))
: Data.push (Mathabs (O.Data))
}) ؛
كل (بيانات ، وظيفة (i ، o) {
المجموع = المجموع + o ؛
}) ؛
كل (بيانات ، وظيفة (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))
يعود؛
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('+','')});
}آخر{
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',
الموقف: "مطلق" ،
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)),
جزء،
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 = [
M,
x,
y,
L,
x,
y - size,
L,
x + columnSize,
y - size,
L,
x + columnSize,
y,
ختم
];
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 = [
M,
x,
y,
L,
x + size,
y ,
L,
x + size,
y - columnSize,
L,
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 = [
M,
(x-len).toFixed(0),
(y-len).toFixed(0),
L,
(x+len).toFixed(0),
(y-len).toFixed(0),
(x+len).toFixed(0),
(y+len).toFixed(0),
(x-len).toFixed(0),
(y+len).toFixed(0),
ختم
];
return o.baseDraw.path(o,{
border : 1,
borderColor : color,
isfill : true,
fillColor : color,
path : path
}) ؛
} ،
triangle : function(o,config){
var x = config.x,
y = config.y,
r = config.r+0.1,
color = config.fillColor,
path = [
M,
x.toFixed(0),
(y-1.33*r).toFixed(0),
L,
(x+r).toFixed(0),
(y+0.67*r).toFixed(0),
(xr).toFixed(0),
(y+0.67*r).toFixed(0),
ختم
];
return o.baseDraw.path(o,{
border : 1,
borderColor : color,
isfill : true,
fillColor : color,
path : path
}) ؛
} ،
diamond : function(o,config){
var x = config.x,
y = config.y,
r = 1.35*config.r,
color = config.fillColor,
path = [
M,
x.toFixed(0),
(yr).toFixed(0),
L,
(x+r).toFixed(0),
y.toFixed(0),
x.toFixed(0),
(y+r).toFixed(0),
(xr).toFixed(0),
y.toFixed(0),
ختم
];
return o.baseDraw.path(o,{
border : 1,
borderColor : color,
isfill : true,
fillColor : color,
path : path
}) ؛
} ،
pie : function(o,config){
//config,s,e,r,index
var opts = o.opts,
s = config.s,
r = config.r,
e = config.e - 0.000001,
id = 'chart'+config.index,
area = opts.area,
rx = area.centerX,
ry = area.centerY,
cosStart = mathCos(s),
sinStart = mathSin(s),
cosEnd = mathCos(e),
sinEnd = mathSin(e),
color = config.config.color,
innerR = config.innerR,
longArc = e - s < Math.PI ? 0 : 1,
path = [
M,
rx + r * cosStart,
ry + r * sinStart,
'A',
r,
r,
0 ،
longArc,
1,
rx + r * cosEnd,
ry + r * sinEnd,
L,
rx + innerR * cosEnd,
ry + innerR * sinEnd,
'A', // arcTo
innerR, // x radius
innerR, // y radius
0, // slanting
longArc, // long or short arc
0, // clockwise
rx + innerR * cosStart,
ry + innerR * sinStart,
'Z'
];
return o.baseDraw.path(o,{
border : 1,
border : '#fff',
isfill : true,
fillColor : color,
opacity : 1,
path : path
})
}
}
} ؛
//---------------------------------------------------------------------------------------------------
//如果是vml 修改smipleChart.prototype中的一些方法
!hasSVG
&&extend(smipleChart.prototype.baseDraw,{
rect : function(o,config){
var attr = {},
css = {};
attr.arcsize = config.arc || 0.2 +'';
if(config.fill==='none'){
attr.filled = 'f'
}آخر{
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]
}, {
name: 'frfr',
color: '#AA4643',
dotType : 'triangle',
data: [-44,12,78,-100,13,4,-56,-34]
}, {
name: 'AAAAA',
color: '#89A54E',
dotType : 'diamond',
data: [null,78,83,null,22,-78,2,44,78]
}, {
name: 'BBBB',
color: '#80699B',
data: [null, 58, 35, null, 52, 47, 26, -55, 39, 123,15,66]
}
]
} ؛
new smipleChart($$('line'),config);
config.charts.type ='area';
config.title.text ='区域图表'
config.subTitle.text='区域图表副标题'
config.yUnit.text ='区域图表侧标题'
config.chartData = [
{
name : 'xcv',
color : '#4572A7',
//data : [0,3,4,5,6,7,8,9,10,11]
data : [11,12,13,14,15,16,-17,18,19,0]
}, {
name: 'frfr',
color: '#AA4643',
data: [44,12,78,100,13,44,56,34]
}, {
name: 'AAAAA',
color: '#89A54E',
data: [null,101,83,null,22,78,88,44,78]
}, {
name: 'BBBB',
color: '#80699B',
data: [null, 58, 35, null, 52, 47, 26, 55, 39, 123,15,66]
}
]
new smipleChart($$('area'),config);
config.title.text ='柱状图表'
config.subTitle.text='柱状图表副标题'
config.yUnit.text ='柱状图表侧标题'
config.charts.type ='columns';
config.chartData =[
{
name : 'xcv',
color : '#4572A7',
//data : [2,3,4,5,6,7,8,9,10,11]
data : [-0.01,-0.62,0,0.55,null,0.78,-0.63,-0.82,null,null,0.33]
}, {
name: 'frfr',
color: '#AA4643',
data: [-0.22,0.82,0.55,1.32,0.33,0.95,null,1,0.65,null,0.78]
}, {
name: 'AAAAA',
color: '#89A54E',
data: [null,0.62,0.34,null,0.63,0,-0.23,-1,0.62,0.45,null,-0.56]
}
]
new smipleChart($$('zhu'),config);
config.charts.panel='y'
new smipleChart($$('zhu1'),config);
config.charts.type ='pie';
config.title.text ='饼图图表'
config.subTitle.text='饼图图表副标题'
config.yUnit.text =''
config.legend.type='lengthwise';
config.chartData =[
{
name : 'aaa',
color : '#4572A7',
data : [433,123,null,66]
}, {
name: 'bbb',
color: '#AA4643',
data: [45,33,33,411]
}, {
name: 'ccc',
color: '#89A54E',
data: [55,null,75,233]
}, {
name: 'ddd',
color: '#80699B',
data: [63,null,100,333]
}
]
config.legend.pos= [680,30]
new smipleChart($$('pie'),config);
config.charts.type ='pies';
config.title.text ='多层饼图图表'
config.subTitle.text='多层饼图图表副标题'
config.legend.type='lateral';
config.legend.pos= [290,400]
new smipleChart($$('pies'),config);
config.chartData =[
{
name : 'xcv',
color : '#4572A7',
data : [111,222,333,null,444,555,56,57,84]
}, {
name: 'frfr',
color: '#AA4643',
data: [845,666,100,null,666,677,56,88,633,55,555]
}, {
name: 'AAAAA',
color: '#89A54E',
data: [555,162,75,null,364,0,637,112,163,615]
}
]
config.charts.type ='line';
config.legend.pos= [10,10]
//
config.yUnit.lineNum = 10;
config.charts.panel = 'x';
config.title.text ='分段图表'
config.subTitle.text='分段图表副标题'
config.yUnit.text ='分段图表侧标题'
config.charts.type ='segment';
new smipleChart($$('segmentx'),config);
config.charts.panel = 'y';
new smipleChart($$('segmenty'),config);
config.yUnit.lineNum = 2;
config.title.text ='比较小的'
config.subTitle.text='只设置了2条线'
config.yUnit.text ='小测标题';
new smipleChart($$('vv'),config);
//alert(new Date().getTime()-t)
}
</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. . . . . . .