線形グラフ領域グラフヒストグラムパイチャートをサポートします
複数のブラウザをサポートします
使用したSVG VML
コードコピーは次のとおりです。
<！doctype html public " - // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> smiplechart </title>
<style type = "text/css">
.cc {
高さ：450px;幅：800px;国境：1pxソリッド＃999;位置：相対;マージン：20px;
}
</style>
</head>
<body>
<div id = 't'> </div>
<div id = 't1'> </div>
<div id = 'line'> </div>
<div id = 'area'> </div>
<div id = 'zhu'> </div>
<div id = 'zhu1' style = "height：600px;"> </div>
<div id = 'segmentx'> </div>
<div id = 'segmenty'> </div>
<div id = 'pie'> </div>
<div id = 'pies'> </div>
<div id = 'vv' style = 'height：300px;幅：520px; '> </div>
<script type = "text/javascript">
（function（doc、undefined）{
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、
パス= hassvg？ 'd'： 'path'、
シール= 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）{
document.getElementByID（ID）を返します。
};
win.extend = function（）{
var target = arguments [0] || {}、i = 1、length = arguments.length、deep = true、options;
if（typeof target === "boolean"）{
deep =ターゲット;
ターゲット=引数[1] || {};
i = 2;
}
if（typeof target！== "object" && object.prototype.tostring.call（ターゲット）！= "[オブジェクト関数]"）
ターゲット= {};
for（; i <length; i ++）{
if（（options = arguments [i]）！= null）
for（optionsのvar名）{
var src =ターゲット[name]、copy = options [name];
if（ターゲット===コピー）
続く;
if（deep && copy && typeof copy === "object" &&！copy.nodetype）{
ターゲット[name] = arguments.callee（deep、src ||（copy.length！= null？[]：{}）、copy）;
}
else if（copy！== undefined）
ターゲット[name] = copy;
}
}
ターゲットを返します。
};
win.each = function（object、callback、args）{
var name、i = 0、length = object.length;
if（args）{
args = array.prototype.slice.call（arguments）.slice（2）;
if（length === undefined）{
for（オブジェクトの名前）
if（callback.apply（object [name]、[name、object [name]]。concat（args））=== false）
壊す;
} それ以外
for（; i <length; i ++）
if（callback.apply（object [i]、[i、object [i]]。concat（args））=== false）//
壊す;
} それ以外 {
if（length === undefined）{
for（オブジェクトの名前）
if（callback.call（object [name]、name、object [name]）=== false）
壊す;
} それ以外
for（var value = object [0];
i <length && callback.call（value、i、value）！== false; value = object [++ i]）{}
}
オブジェクトを返します。
};
win.contains = function（p、c）{
if（！p ||！c）falseを返します。
if（p === c）trueを返します。
ISIEを返します
？ P.Contains（C）
：p.comparedocumentposition（c）== 20
？真実
： 間違い;
};
// ----------------------------------------------------------------------------------------------------------------------
関数プロセスポイント（x）{
ISIEを返しますか？ ~~ x.tofixed（0）：~~ x.tofixed（0） + 0.5;
};
関数caltextlen（txt、cssstr）{
var span = doc.createelement（ 'span'）;
if（cssstr）{
typeof cssstr === 'string'
？ span.style.csstext = cssstr
：extend（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、
height = span.offseTheight;
doc.body.RemoveChild（SPAN）;
return {w：width、h：height};
};
関数角（R、センター、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、linenum）{
var t = 1000、
stf =（（b*ta*t）/linenum）/t、
arr = [1,2,2.5,5,10]、
c = 1、
v;
//分割線のカーディナリティは[1、2、2.5、5、10]です。このステップは、間隔が属する範囲を見つけることです
if（stf <arr [0]）{
while（stf <arr [0]）{
c = c*10;
arr [0] = arr [0]/c;
}
それぞれ（[1,2,2.5,5,10]、function（i、o）{
arr [i] = o/c;
}）;
} else if（stf> arr [4]）{
while（stf> arr [4]）{
c = c*10;
arr [4] = arr [4]*c;
}
それぞれ（[1,2,2.5,5,10]、function（i、o）{
arr [i] = o*c;
}）;
}
//間隔に従って、間隔で最も近いものを見つける
それぞれ（arr、function（i、o）{
if（stf <= o）{
v = o;
falseを返します。
}
}）;
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））;
if（a> = 0）{
//比較整数を調整します
if（a！= 0 && num！= 0 && a％10！== 0）{
while（a！= 0 && num！= 0）{
a =（a*tv*t）/t;
num--;
if（（a*tv*num*t）/10000> 0 && a％10 === 0）
壊す;
}
}
if（num！= 0）{
while（num！== 0）{
b =（b*t+v*t）/t
num--;
}
}
}それ以外{
//比較整数を調整します
if（b <0 && num！= 0）{
while（b！= 0 && num！= 0 && b％10！== 0）{
b =（b*t+v*t）/t;
num--;
if（（b*t+v*num*t）/t <0 && b％10 === 0）
壊す;
}
}
if（num！= 0）{
while（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 = graphic;
これを返します。
}、
attr：function（hash、val）{
var elem = this.element、
鍵、
価値;
if（typeof hash === 'string'）{
if（val === undefined）{
returnelem.getattribute（hash）;
}それ以外{
elem.setattribute（hash、val）;
これを返します。
}
} それ以外 {
for（ハッシュのキー）{
value = hash [key];
if（key === path）{
Value && value.join
&&（value = value.join（ ''））;
/（nan | |^$）/。テスト（値）
&&（value = 'm 0 0'）;
}
elem.setattribute（key、value）
}
}
これを返します。
}、
CSS：function（hash）{
for（var key in hash）{
isie && key == "ofacity"
？ this [0] .style ['filter'] = "alpha（ofacity ="+ hash [key] * 100+ "）"
：this [0] .style [key] = hash [key];
}
これを返します。
}、
on：function（eventname、handler）{
var self = this;
/* this.element.addeventlistener（eventname、function（）{
handler.call（self）
}、間違い）;*/
this.element ['on' + eventname] = function（e）{
e = e || win.event;
handler.call（self、e）;
}
これを返します。
}、
appendto：function（parent）{
if（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（ 'fill-opacity'、v）;
これを返します。
}、
SetSize：function（v）{
この[0] .nodename === 'circle'
？ this.attr（ 'r'、4+（v === 0？0：2））
：this.attr（{'ストロークウィッド'：v}）;
これを返します。
}、
tofront：function（）{
この[0] .ParentNode.AppendChild（this [0]）;
これを返します。
}、
show：function（）{
この[0] .style.display = 'block';
これを返します。
}、
非表示：function（）{
この[0] .style.display = 'none';
これを返します。
}、
破壊：function（）{
//ノードを破壊します..........
var node = this [0] ||これ;
node.onmouseover = node.onmouseout = node.onclick = null;
node.parentnode
&& node.parentnode.removechild（node）;
これを返します。
}
};
// ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
//これらの方法のいくつかを変更するのがVMLの場合
if（！hassvg）{
// ------------------------------------------------------------------------------------------------------------------------------------------------------------------ -
doc.createstyleSheet（）。addrule（ "。vml"、 "beachrive：url（＃default＃vml）; display：inline-block; position：absolute; left：0px; top：0px"）;
！doc.namespaces.vml &&！+"/v1";
doc.NamesSpaces.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（name）
：doc.createelement（ '<vml：'+name+'>'）;
this.graphic = graphic;
これを返します。
}、
/*on：function（eventname、handler）{
var self = this;
this.element.attachevent（ "on" + eventname、function（）{
handler.call（self）;
}）;
これを返します。
}、*/
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（this、arguments）;
};
smilechart.list = [];
smilechart.timer = null;
smilechart.lazyload = function（id）{
id = id || '0'
smilechart.list [id]
&& smiplechart.list [id] .loadme（）;
};
smilechart.prototype = {
オプション：{
チャート：{
パディングライト：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'、
フォント級：「太字」
}
}、
字幕：{
文章： ''、
Y：30、
スタイル：{
fontfamily： 'verdana、arial、helvetica、sans-serif'、
fontsize： '12px'、
色： '＃111'
}
}、
YUNIT：{
文章 ： ''、
スタイル：{
fontfamily： 'verdana、arial、helvetica、sans-serif'、
fontsize： '12px'、
色： '＃111'
}、
リネナム：10
}
}、
init：function（container、options）{
cleartimeout（smiphchart.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
？ new vector（）。$ c（1、 'svg'）
.attr（{
XMLNS： 'http://www.w3.org/2000/svg'、
バージョン： '1.1'、
幅：this.width、
高さ：this.height
}）
.css（{fontsize： '12px'}）
.appendto（container）
：new vector（）。$ c（1、 'div'）
.css（{
fontsize： '12px'、
幅：this.width +'px'、
高さ：this.height+'px'
}）
.appendto（container）;
this.loading = container.appendChild（doc.createelement（ 'img'））;
this.loading.setattribute（ 'src'、 'http：//images.cnblogs.com/cnblogs_com/wtcsy/192373/r_loading.gif'）;
this.loading.style.position = 'absolute';
this.loading.style.top = container.offsetheight/2- this.loading.offseeth/2+'px';
this.loading.style.left = container.offsetwidth/2- this.loading.offsetwidth/2+'px';
var c = extend（true、{}、this.options）、
opts = this.opts = extend（true、c、options）、
style = extend（opts.charts.style、{
幅：this.width、
高さ：this.height
}）;
smilechart.list [this.uuuid] = this;
smilechart.timer = setimeout（function（）{
smilechart.lazyload（）;
}、200）;
}、
loadme：function（）{
var opts = this.opts、
自己=これ、
type = opts.charts.type;
this.container = this.container
.on（ 'mouseout'、function（e）{
var elem = e.relatedTarget || e.toelement;
if（！contains（this [0]、elem））{
self.hidetooltip（）;
self.currlist.dot
&& self.currlist.dot.setsize（0）;
self.currlist.line
&& self.currlist.line.setsize（1.5）;
self.currlist = {};
}
}）
.css（{display： 'none'}）[0];
//描画プレートを計算するときに必要ないくつかのパラメーター
this.getDrawarea（）
.createtooltip（）//迅速な情報のボックスを作成します
.drawtitle（）//タイトルを描きます
//プレートを描きます
'ライン、エリア、pie'.indexof（type）> = 0
&&（opts.charts.panel = 'x'）;
「パイ、パイ」.indexof（type）<0
&& this.drawpanel（）;
this.drawlegend（opts.legend.type）; //カラーブロックバーを描きます
var type = {
ライン：「ドローライン」、
エリア： 'Drawarea'、
列：「DrawColumns」、
パイ：「ドローパイ」、
パイ：「ドローピー」、
セグメント：「ドローセグメント」
} [opts.charts.type];
//描画を開始します.........
この[type]（）;
//ノードを削除します
this.loading.parentnode.removechild（this.loading）;
//参照を切断します
this.loading = null;
this.container.style.display = '';
setimeout（function（）{
smilechart.lazyload（（++ self.uuuid）+''）;
}、10）
}、
CreateElement：function（nodename）{
新しいvector（）。$ c（this、nodename）を返します。
}、
グループ：function（name）{
this.createelement（hassvg？ 'g'： 'div'）。attr（ 'mark'、name）;
}、
GetDrawarea：function（）{
var opts = this.opts、
width = this.width、
高さ= this.height、
title = opts.title、
subtitle = opts.subtitle、
エリア= {
//座標軸の左側のスケールテキスト幅を削除します（推定）80は固定値であり、固定値の左側に左側にあるのは80のみです。
AreaWidth：幅-80、
//軸の下のテキストとマーキングの高さを削除します
AreaHeight：高さ-40、
//原点のX位置は以下に計算されます
startx：0、
//原点のy位置は以下に計算されます
Starty：0、
//中心のx座標を使用してパイチャートを描画する場合、円の中心の位置を知る必要があります。
CenterX：0、
//中央にY座標を備えたパイチャートを描画する場合、円の中心の位置を知る必要があります。
Centery：0
};
//メインタイトルが存在する場合、メインタイトルの高さを減算します。
area.areaheight- =（title.text！== ''）
？ title.y
：10;
//サブタイトルの高さを削除します
area.areaheight- =（subtitle.text！== ''）
？ subtitle.y
：10
AREA.STARTX = 80;
area.starty = height -40;
//円の中心の位置
AREA.CENTERX = width / 2;
AREA.centery = height / 2;
//右側のスペースを残します
AREA.AREAWIDTH- = 20;
//上部に間隔を置いたままにします
AREA.Areaheight- = 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：this.height / 2-20
}
]、、
tpanel = this.group（ 'title'）
.appendto（）;
それぞれ（arr、function（i、title）{
var text = title.text;
if（text）{
var elem = self.basedraw.span（self、{
「テキストアンカー」：「左」、
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の場合、サブタイトルを使用して垂直に配置することを意味します
if（i === 2）{
hassvg
？ elem.attr（{transform： 'rotate（270、'+（opts.yunit.x+10）+'、'+self.height / 2+'）'}）
：（elem.element.style.filter = 'progid：dmimagetransform.microsoft.basicimage（Rotation = 3）'）
}
}
}）;
これを返します。
}、
//描画プレートはより面倒です
drawpanel：function（type）{
varopts = this.opts、
自己=これ、
エリア= opts.area、
chartstype = opts.charts.type、
issegment = chartstype === 'セグメント'、
//プレートのタイプの水平または垂直プレートです
type = opts.charts.panel || 'x';
//ボトムプレート
var drawareawidth = area.areawidth、
drawareaheight = area.areaheight、
//原点の座標
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）{
//バーチャートの場合、すべてのデータに対して要約されています
issegment
？それぞれ（o.data、function（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、function（i、o）{
if（o！== null）{
minvalue = o;
falseを返します。
}
}）;
//メインプレートコンテナ
varパネル= this.group（ 'パネル'）。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、
//単位間隔の中心点
offset = xpices / 2、
ypices = drawareaheight / linenum;
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
var y = hassvg？5：10、
t = 1000、
スパン;
それぞれ（opts.xunit.units、function（i、d）{
self.basedraw.path（self、{
国境：1、
bordercolor： '＃c0c0c0'、
Isfill：false、
パス ： [
m、
Processpoint（startx +（i * xpices））、
Processpoint（starty）、
l、
Processpoint（startx +（i*xpices））、
プロセスポイント（Starty + 5）
]
}）。
appendto（パネル）;
span = self.basedraw.span（self、{
X：startx + offset +（i * xpices）、
y：starty+y、
「テキストアンカー」：「ミドル」
}）
.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'）;
}）;
//-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
for（i = 0; i <= linenum; i ++）{
self.basedraw.path（self、{
国境：1、
bordercolor： '＃c0c0c0'、
Isfill：false、
パス：[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、
「テキストアンカー」：「ミドル」
}）
.css（{
「フォントファミリー」：「Verdana、Arial、Helvetica、Sans-Serif」、
'font-size'： '12px'、
幅： '40px'、
ディスプレイ：「ブロック」、
TextAlign：「右」
}）
.addText（（min*t+（i*t*f/t）*t）/t+''）
.appendto（パネル）[0];
if（！hassvg）{
span.style.top = parseint（span.style.top） + span.offseeth/2 -5 + 'px';
span.style.left = parseint（span.style.left）-35+'px'
}
}
}それ以外{
//地下ユニット間隔
Varypices = Drawareaheight /（opts.xunit.units.length）、
//単位間隔の中心点
offset = math.round（ypices / 2）、
x = hassvg？ 25：70、
y = hassvg？ 0：5、
スパン
それぞれ（opts.xunit.units、function（i、d）{
self.basedraw.path（self、{
国境：1、
bordercolor： '＃c0c0c0'、
Isfill：false、
パス ： [
m、
Processpoint（startx-5）、
Processpoint（starty-i * ypices）、
l、
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、
「テキストアンカー」：「ミドル」
}）
.css（{
fontfamily： 'verdana、arial、helvetica、sans-serif'、
fontsize： '12px'、
幅： '60px'、
TextAlign：「右」
}）
.addtext（d）
.appendto（パネル）
}）;
var xpices = drawareawidth / linenum;
for（var i = 0; i <= linenum; i ++）{
self.basedraw.path（self、{
国境：1、
bordercolor： '＃c0c0c0'、
Isfill：false、
パス ： [
m、
Processpoint（startx +（i * xpices））、
Processpoint（starty）、
l、
Processpoint（startx +（i*xpices））、
Processpoint（starty -drawareaheight）
]
}）。
appendto（パネル）;
self.basedraw.span（self、{
X：startx -caltextlen（min+i * f+''）。w/2+i * xpices、
Y：starty、
「テキストアンカー」：「左」
}）
.css（{
fontfamily： 'verdana、arial、helvetica、sans-serif'、
fontsize： '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軸の開始点
starty：starty、// 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、height： '20px'、width： '20px'、position： 'absolute'}）
.appendto（）
。隠れる（）
//フレームBasedRawを描画します
this.tipbox = this.basedraw.rect（this、{arc：0.22、fill： '＃ffff'、border：2、bordercolor： '＃606060'}）
.appendto（this.tipc）
// SVGのGは直接配置できるが、VMLでのグループレンダリングは非常に遅いため、Divが変更されるため、ここの親は外国と同じではないため
var p = isie？this.tipbox：this.tipc;
this.tiptxtcontainer = this.basedraw.text（this、{fill： '＃000000'、x：5、y：19、 'text-anncor'： 'left'}）
.css（{
fontfamily： 'verdana、arial、helvetica、sans-serif'、
fontsize： '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（）
。見せる（）;
if（hassvg）{
this.tipc.attr（{transform： 'translate（'+pos.x+'、'+pos.y+'）'}）;
this.tipbox
.attr（{width：size.w + 5 * 2、height：size.h + 5 * 2、stroke：obj.color || '＃606060'}）;
}それ以外{
this.tipc.css（{左：pos.x、top：pos.y}）;
this.tipbox
.css（{width：size.w + 5 * 2、height：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};
if（hassvg）{
self.tipbox
.attr（{width：size.w + 5 * 2、height：size.h + 5 * 2、stroke：obj.color || '＃606060'}）;
}それ以外{
self.tipbox
.css（{width：size.w + 5 * 2、height：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を返します。
}、
t = 0、
b = self.tipc.attr（ 'pos'）。分割（ ' - '）、
c = [pos.x、pos.y]、
d = 5;
this.timer = setInterval（function（）{
if（t <d）{
T ++;
var x = move（t、~~ b [0]、（~~ c [0]） - （~~ b [0]）、d）、
y = move（t、~~ b [1]、（~~ c [1]） - （~~ b [1]）、d）;
hassvg
？ self.tipc.attr（{transform： 'translate（'+x+'、'+y+'）'、pos：x+' - '+y}）
：self.tipc.attr（{pos：x+' - '+y}）。css（{左：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]、
//非表示のグループ関数を表示します
handle = function（i）{
var g = self.maingroup ['chart'+i]、
issegment = opts.charts.type === 'セグメント';
if（g.show）{
g.chart.hide（）;
g.show = false;
hassvg
？ this.attr（{fill： '＃ccc'}）
：this [0] .style.color = '#ccc';
//セグメント化された画像の場合、再描画が含まれます。
if（issegment）{
self.hidelist [i] = '';
var maingroup = self.maingroup;
for（maingroupのvar名）{
var parent = maingroup [name] .chart、
nodes = parent [0] .childnodes、
len = nodes.length;
//絵に描かれたものを破壊します
for（var i = len-1; i> = 0; i-）{
vector.prototype.destroy.call（nodes [i]）
}
}
//塗り直し
self.drawsegment（）;
}
}それ以外{
g.chart.show（）;
g.show = true;
hassvg
？ this.attr（{fill： '＃000'}）
：this [0] .style.color = '＃000'
if（issegment）{
self.hidelist [i]を削除します。
var maingroup = self.maingroup;
for（maingroupのvar名）{
var parent = maingroup [name] .chart、
nodes = parent [0] .childnodes、
len = nodes.length;
for（var i = len-1; i> = 0; i-）{
vector.prototype.destroy.call（nodes [i]）
}
}
self.drawsegment（）;
}
}
}、
arr = [];
type = type || 'ラテラル';
var legendpanel = self.group（ 'legend'）
.appendto（）;
if（type === '横'）{
//水平な場合
var top = orig_pos [1] + 5、
th = hassvg？0：3、
左= orig_pos [0] + 5;
それぞれ（データ、関数（i、d）{
左= i === 0？左：T_SPACE+左;
//すべての左の位置を計算します
//それが線形図の場合、線形図の形で図面を描画します
if（isline）{
self.basedraw.path（self、{
国境：1.5、
bordercolor：d.color、
Isfill：false、
パス ： [
m、
left.tofixed（0）、
（トップ+10）.tofixed（0）、
l、
（左+25）.tofixed（0）、
（トップ+10）.tofixed（0）
]
}）
.appendto（legendpanel）;
self.basedraw [d.dottype || 「サークル」]（自己、{
X：左+12、
Y：トップ+10、
R：4、
fillcolor：d.color
}）
.appendto（legendpanel）;
}それ以外{
self.basedraw.rect（self、{
アーク：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（self、{
「テキストアンカー」：「左」、
X：左、
Y：トップ+th
}）
.css（extend（css、{cursor： 'pointer'}））
.on（ 'click'、function（）{
handle.call（this、i）;
}）
.addtext（d.name）
.appendto（legendpanel）;
左=左 + w;
}）;
this.basedraw.rect（this、{
アーク：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（self、{
アーク：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（self、{
「テキストアンカー」：「左」、
X：左+t_width+2+t_space、
Y：トップ+th
}）
.css（extend（css、{cursor： 'pointer'}））
.addtext（d.name）
.on（ 'click'、function（）{
//多層パイチャートの場合、隠すことはできません
if（opts.charts.type === 'pies'）return;
handle.call（this、i）;
}）
.appendto（legendpanel）;
top = top + h + t_space;
maxwidth = math.max（maxwidth、caltextlen（d.name、css）.w）;
}）;
this.basedraw.rect（this、{
アーク：0.1、
塗りつぶし：「なし」、
国境：1.5、
BorderColor： '＃666666'、
幅：maxwidth+22+15、
高さ：TOP+T_SPACE-ORIG_POS [1]、
左：orig_pos [0]、
トップ：orig_pos [1]
}）
.appendto（legendpanel）;
}
これを返します。
}、
描画ライン：function（）{
var self =これ、
opts = this.opts、
draw = opts.draw;
それぞれ（opts.chartdata、function（i、o）{
var id = 'chart'+i、
linegroup = self.group（id）
.appendto（）;
self.maingroup [id] = {
チャート：ライングループ、
ショー：本当
};
var path = [m]、
data = o.data、
ライン;
for（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"）;
//最初のものがnullであり、lを削除する最初のものではない場合
if（i> 0 && data [i -1] == null）
path.pop（）;
//ポイントのxとyの位置を計算します
var x = draw.startx + draw.offset +（i * draw.xpices）、
y = draw.starty-データ[i] *（draw.ypices / draw.feed）;
if（isie）{
x = parseint（x）;
y = parseint（y）;
}
path.push（x）;
path.push（y）;
//ポイントを描画します
var dottype = o.dottype || 'circle';
self.basedraw [dottype]（self、{
x：x、
y：y、
R：4、
fillcolor：o.color
}）
.attr（{data：data [i]、pos：x+' - '+（y-5）}）
.css（{zindex：10、cursor： 'pointer'}）
.on（ 'mouseover'、（function（o、x、y）{
return function（）{
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 = this;
self.currlist.line = line;
}
}）（o、x、y）））
/*。on（ 'mouseout'、function（）{
this.setsize（0）;
line.setsize（1.5）;
}）*/
.on（ 'click'、function（）{linegroup.tofront（）;}）
.appendto（linegroup）;
}
};
//折り畳まれた線を描画します
line = self.basedraw.path（self、{
国境：1.5、
BorderColor：O.Color、
Isfill：false、
パス：パス
}）
.css（{zindex：5}）
/*。on（ 'mouseover'、function（）{
this.setsize（2.5）;
}）
.on（ 'mouseout'、function（）{
this.setsize（1.5）;
}）*/
.on（ 'click'、function（）{linegroup.tofront（）;}）
.appendto（linegroup）;
}）;
これを返します。
}、
drawarea：function（）{
var self =これ、
opts = this.opts、
draw = opts.draw;
それぞれ（opts.chartdata、function（i、o）{
var id = 'chart' + i、
Areagroup = self.group（id）.appendto（）;
self.maingroup [id] = {chart：areggroup、show：true};
// 2つのパスがあり、1つは領域のパスで、もう1つはラインのパスです
var areapath = [m、（draw.startx + draw.offset）.tofixed（0）、（draw.starty-draw.jianjuy）.tofixed（0）]、
パス= [m]、
data = o.data、
ライン;
for（var n = 0、l = data.length; n <l; n ++）{
//データが空の場合
var len = areapath.length;
if（data [n] === null）{
//前のものがmでない場合は、もう一度描画してください。
if（path [path.length -1]！== m）
path.push（m）;
//最初または前面がnullの場合、開始点座標を変更します
len === 3
&&（areapath [1] =（draw.startx +（n +1）*draw.xpices +draw.offset）.tofixed（0））;
//前のものが末端識別子領域グラフでない場合、最初のデータがnullの場合、次の操作は実行されません
if（areapath [len -1]！== seal && n！== 0）{
AREAGREPATH = AREAGREPATH.CONCAT（[[
AreaPath [len -2]、
（draw.starty-draw.jianjuy）.tofixed（0）、
シール
]）;
}
}それ以外{
n！== 0 && path.push（l）;
areapath.push（l）;
//前のデータがnullの場合、前のlを削除します
if（n> 0 && data [n -1] == null）{
path.pop（）;
//最初のものがnullの場合、lを削除しないでください
n！== 1 && areapath.pop（）;
}
var x = draw.startx + draw.offset +（n * draw.xpices）、
y = draw.starty -data [n] *（draw.ypices / draw.feed）;
if（isie）{
x = parseint（x）;
y = parseint（y）;
}
path.push（x）;
path.push（y）;
if（areapath [len -1] === seal）{
AREAGREPATH = AREAGREPATH.CONCAT（[[
m、
x、
parseint（draw.starty-draw.jianjuy）、
l、
x、
y
]）;
}それ以外{
areapath.push（x）;
areapath.push（y）;
}
//それが最後のポイントの場合
if（n === l -1）{
areapath.push（x）;
areapath.push（parseint（draw.starty-draw.jianjuy））;
}
//ポイントを描画します
self.basedraw [o.dottype || 「サークル」]（自己、{
x：x、
y：y、
R：4、
fillcolor：o.color
}）
.attr（{data：data [n]、pos：x+' - '+（y-5）}）
.on（ 'mouseover'、（function（o、x、y）{
return function（）{
if（self.currlist.dot）{
if（self.currlist.dot [0] === 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 = this;
self.currlist.line = line;
}
}）（o、x、y）））
/*。on（ 'mouseout'、function（）{
this.setsize（0）;
line.setsize（1.5）;
//self.hidetooltip（）
}）*/
.on（ 'click'、function（）{areggroup.tofront（）;}）
.css（{zindex：10、cursor： 'pointer'}）
.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：false、
パス：パス
}）
/*。on（ 'mouseover'、function（）{
hassvg
？ this.attr（{'ストロークウィッド'：2.5}）
：（this [0] .strokeweight = 2.5）;
}）
.on（ 'mouseout'、function（）{
hassvg
？ this.attr（{'ストローク幅'：1.5}）
：（this [0] .strokeweight = 1.5）;
}）*/
.on（ 'click'、function（）{areggroup.tofront（）;}）
.css（{zindex：-1}）
.AppendTo（AreaGroup）;
}）;
これを返します。
}、
drawcolumns：function（）{
var self =これ、
opts = this.opts、
draw = 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））
：number（（（（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] = {chart：colgroup、show：true};
for（var j = 0、l = data.length; j <l; j ++）{
if（data [j] === null）継続;
//横向きプレートの場合
if（isx）{
var x = number（（start + j *draw.xpices）.tofixed（0））、
y = number（draw.starty-draw.jianjuy）.tofixed（0））、
height = number（data [j] *（draw.ypices / draw.feed）-draw.jianjuy）.tofixed（0））、
パス= [
m、
x、
y、
l、
x、
y -height、
l、
x + columnsize、
Y-高さ、
l、
x + columnsize、
y、
シール
];
var pos = [x+columnsize/2、data [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（start-（j+1） *draw.ypices）.tofixed（0））、
パス= [
m、
x、
y、
l、
x+幅、
y、
l、
x +幅、
y + columnsize、
l、
x、
y+ columnsize、
シール
];
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、cursor： 'pointer'}）
.on（ 'mouseover'、（function（d）{
return function（）{
this.setopacity（0.85）;
var pos = this.attr（ 'pos'）。split（ ' - '）
self.showtooltip（o、pos [0]、pos [1]、this.attr（ 'data'））;
}
}）（data [j]）
））
.on（ 'mouseout'、function（）{
this.setopacity（1）;
}）
.appendto（colgroup）;
}
}）;
これを返します。
}、
drawpie：function（）{
var self =これ、
opts = this.opts、
エリア= opts.area、
rx = area.centerx、
ry = area.centery、
inc = 0、
合計= 0、
data = []、
累積= -0.25、//上から開始。
circ = 2 * math.pi、
radiu = mathmin（opts.charts.radius、mathmin（reagy.areawidth/2、area.areheight/2））、
分数、
half_fraction;
それぞれ（opts.chartdata、function（i、o）{
typeof o.data === 'オブジェクト'
？ （data.push（（function（o）{
var all = 0;
for（var i in o）
all+= ~~ o [i]
すべてを返します
}）（o.data）））
：data.push（mathabs（o.data））
}）;
それぞれ（データ、関数（i、o）{
合計=合計 + o;
}）;
それぞれ（データ、関数（i、o）{
var piegroup = self.group（ 'chart'+i）.appendto（）、
s = inc/合計*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)),
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 = [
M,
x,
y,
L,
x,
y - size,
L,
x + columnSize,
y - size,
L,
x + columnSize,
y,
seal
];
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,
seal
];
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),
seal
];
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),
seal
];
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),
seal
];
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];
}
エレムを返します。
}、
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',
style: {
fontFamily: '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font
fontSize: '12px'
}
}、
title : {
text: '线性图表',
y: 10,
style: {
color: 'black',
fontSize: '16px'
}
}、
subTitle : {
text: '线性图表副标题',
y: 35,
style: {
color: '#111',
fontSize: '12px'
}
}、
legend : {
enable : true,
//type : 'lateral', // lateral 横向或lengthwise 纵向
type : 'lateral',
pos : [10,10],
style:{
fontFamily : '"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif', // default font
fontSize : '12px',
magin : '0px'
}
}、
yUnit : {
text : '线性图表侧标题',
x : 20,
style : {
color : '#111',
fontSize : '12px'
}
}、
xUnit : {
units: [
'1月'、
'2月'、
'行進'、
'四月',
'5月'、
'六月',
'七月',
'八月',
'九月',
'十月',
'十一月',
'12月'
]
}、
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>
他の
js浮点精度问题不好解决求助。 . 。 。 。 。 。 。 。
水平有限难免问题多多望赐教。 . 。 。 。 。 。