flot中文参考.docx
《flot中文参考.docx》由会员分享，可在线阅读，更多相关《flot中文参考.docx（63页珍藏版）》请在冰豆网上搜索。
flot中文参考
FlotReference
flot参考文档
--------------
Consideracalltotheplotfunction:
下面是对绘图函数plot的调用：
varplot=$.plot（placeholder,data,options）
TheplaceholderisajQueryobjectorDOMelementorjQueryexpression
thattheplotwillbeputinto.Thisplaceholderneedstohaveits
widthandheightsetasexplainedintheREADME（goreadthatnowif
youhaven't,it'sshort）.Theplotwillmodifysomepropertiesofthe
placeholdersoit'srecommendedyousimplypassinadivthatyou
don'tuseforanythingelse.Makesureyoucheckanyfancystyling
youapplytothediv,e.g.backgroundimageshavebeenreportedtobea
problemonIE7.
占位符placeholder是一个jQuery对象或者DOM元素或者jQuery表单式，绘图函数将把图表画在placeholder内。
这个占位符需要设置高宽（这在README文档里面已经介绍过，如果你还没有阅读过现在就去阅读吧，文档很短）。
plot函数画图时将修改这个占位符的内容，因此你最好使用一个空的DIV元素作为占位符，另外注意不要给占位符
设置花哨的样式，比如，在IE7.0下，给占位符设置背景图将会出错。
Theformatofthedataisdocumentedbelow,asistheavailable
options.The"plot"objectreturnedhassomemethodsyoucancall.
Thesearedocumentedseparatelybelow.
函数可以使用的数据格式会在后面说明，plot返回对象有一些方法可供调用，在后面会分开介绍。
NotethatingeneralFlotgivesnoguaranteesifyouchangeanyofthe
objectsyoupassintotheplotfunctionorgetoutofitsince
they'renotnecessarilydeep-copied.
另外请注意，flot不保证plot函数内的对象被修改或删除后仍然能正常工作（废话）。
DataFormat
数据格式
-----------
Thedataisanarrayofdataseries:
flot的数据是一个数列数组（plot函数中的data参数:
每条曲线一个data项参数，绘制多条曲线时，是一个数组，每个数组元素是一条曲线的data项参数）：
[series1,series2,...]
Aseriescaneitherberawdataoranobjectwithproperties.Theraw
dataformatisanarrayofpoints:
数列可以是原始数据，也可以是数据对象，原始数据格式是由一组表示数据点的坐标值的数组构成：
[[x1,y1],[x2,y2],...]
E.g.
[[1,3],[2,14.01],[3.5,3.14]]
NotethattosimplifytheinternallogicinFlotboththexandy
valuesmustbenumbers（evenifspecifyingtimeseries,seebelowfor
howtodothis）.Thisisacommonproblembecauseyoumightretrieve
datafromthedatabaseandserializethemdirectlytoJSONwithout
noticingthewrongtype.Ifyou'regettingmysteriouserrors,double
checkthatyou'reinputtingnumbersandnotstrings.
请注意，flot的纵横坐标值都必须是数字（即使用时间数列也是，后面会介绍到），
这是个很常见的错误，因为你很可能从数据库获取数据后没有检查数据类型就直接转化成json对象使用。
如果你觉得遇到了莫名其妙的错误，请确认一下你输入的是数字而不是字符串。
Ifanullisspecifiedasapointorifoneofthecoordinatesisnull
orcouldn'tbeconvertedtoanumber,thepointisignoredwhen
drawing.Asaspecialcase,anullvalueforlinesisinterpretedasa
linesegmentend,i.e.thepointsbeforeandafterthenullvalueare
notconnected.
如果坐标为值为空,或者其中的一个坐标值为空，或者不是数字，或者说不能转换为数字，那么这个节点将被忽略，
并且该节点前后的2个节点之间不会使用直线来连接。
Linesandpointstaketwocoordinates.Forbars,youcanspecifya
thirdcoordinatewhichisthebottomofthebar（defaultsto0）.
折线图和散点图每个节点有2个参数，直方图则有3个参数，第三个参数来指定直方图的底部位置（缺省值是0）。
Theformatofasingleseriesobjectisasfollows:
单个图表对象的数据格式参数如下所示：
{
color:
colorornumber //颜色
data:
rawdata //数据
label:
string //曲线名称
lines:
specificlinesoptions //折线图坐标参数
bars:
specificbarsoptions //直方图坐标参数
points:
specificpointsoptions //散点图坐标参数
xaxis:
1or2 //使用哪一条X轴，如果某条数轴没有被任何一条曲线使用，该数轴不会在图表上出现
yaxis:
1or2 //使用哪一条Y轴
clickable:
boolean //允许监听鼠标点击事件
hoverable:
boolean //允许监听鼠标悬停事件
shadowSize:
number//曲线阴影
}
Youdon'thavetospecifyanyofthemexceptthedata,therestare
optionsthatwillgetdefaultvalues.Typicallyyou'donlyspecify
labelanddata,likethis:
一般情况下你无须设置每一个参数，你只需要设置其中几个特定的参数即可，其他参数会使用默认值。
例如：
{
label:
"y=3",
data:
[[0,3],[10,3]]
}
Thelabelisusedforthelegend,ifyoudon'tspecifyone,theseries
willnotshowupinthelegend.
label用于指定曲线名称，如果没有设置label的值，图表标题区域不会出现。
Ifyoudon'tspecifycolor,theserieswillgetacolorfromthe
auto-generatedcolors.ThecoloriseitheraCSScolorspecification
（like"rgb（255,100,123）"）oranintegerthatspecifieswhichof
auto-generatedcolorstoselect,e.g.0willgetcolorno.0,etc.
如果没有设置曲线颜色，程序会自动采用默认颜色（options项里的colors数列）。
颜色值可以是CSS颜色格式（RGB格式、16进制颜色、WEB通用颜色名），
还可以是数字编号，数字编号表示颜色数列里面颜色的编号。
Thelatterismostlyusefulifyoulettheuseraddandremoveseries,
inwhichcaseyoucanhard-codethecolorindextopreventthecolors
fromjumpingaroundbetweentheseries.
如果你允许用户重置或删除曲线，后者会比较有用，你可以在代码里面设置曲线使用的默认颜色的序号防止相同颜色在不用曲线间重复出现。
The"xaxis"and"yaxis"optionsspecifywhichaxistouse,specify2
togetthesecondaryaxis（xaxisattoporyaxistotheright）.
E.g.,youcanusethistomakeadualaxisplotbyspecifying
{yaxis:
2}foronedataseries.
xaxis"和"yaxis"设置曲线使用的数轴（第二条X轴是顶部横轴，第二条Y轴是右边的纵轴），你可以使用这个属性制作双数轴曲线
"clickable"and"hoverable"canbesettofalsetodisable
interactivityforspecificseriesifinteractivityisturnedonin
theplot,seebelow.
"clickable"和"hoverable"用于关闭该曲线的鼠标点击效果或鼠标悬停效果，具体说明看后面。
（options中的"clickable"或"hoverable"设置为true时可以在某条曲线的data里设置"clickable"或"hoverable"为false，但options中设置为false时，不能在这里设置为true）
Therestoftheoptionsarealldocumentedbelowastheyarethesame
asthedefaultoptionspassedinviatheoptionsparameterintheplot
commmand.Whenyouspecifythemforaspecificdataseries,theywill
overridethedefaultoptionsfortheplotforthatdataseries.
其他参数在后面介绍，他们与plot函数的"options"参数的设置项是一样的，
如果你为某条曲线在data里面设置了这些参数的值，他们会覆盖掉options的默认值。
Here'sacompleteexampleofasimpledataspecification:
下面是一个简单例子，设置了2条曲线的参数：
[{label:
"Foo",data:
[[10,1],[17,-14],[30,5]]},
{label:
"Bar",data:
[[11,13],[19,11],[30,-7]]}]
PlotOptions
plot的options参数
------------
Alloptionsarecompletelyoptional.Theyaredocumentedindividually
below,tochangethemyoujustspecifytheminanobject,e.g.
options的所有选项都是可选的，他们都有默认值，后面会逐条对他们进行讲解，如果要修改这些选项的默认值你只需要明确指定他们的值即可，例如：
varoptions={
series:
{
lines:
{show:
true},
points:
{show:
true}
}
};
$.plot（placeholder,data,options）;
Customizingthelegend
legend：
定制曲线图表标题
======================
legend:
{
show:
boolean
labelFormatter:
nullor（fn:
string,seriesobject->string）
labelBoxBorderColor:
color
noColumns:
number
position:
"ne"or"nw"or"se"or"sw"
margin:
numberofpixelsor[xmargin,ymargin]
backgroundColor:
nullorcolor
backgroundOpacity:
numberbetween0and1
container:
nullorjQueryobject/DOMelement/jQueryexpression
}
Thelegendisgeneratedasatablewiththedataserieslabelsand
smalllabelboxeswiththecoloroftheseries.Ifyouwanttoformat
thelabelsinsomeway,e.g.makethemtolinks,youcanpassina
functionfor"labelFormatter".Here'sanexamplethatmakesthem
clickable:
legend用于生成图表标题，图表标题以表格的方式显示在曲线图上，内容包括每条曲线的名称及其对应颜色，
如果你想定制图表标题的格式，比如做成超链接，你可以在"labelFormatter"项使用函数来定制，下面的例子把图表标题做成链接
labelFormatter:
function（label,series）{
//seriesistheseriesobjectforthelabel //series是名称为label的曲线的数据对象
return''+label+'';
}
"noColumns"isthenumberofcolumnstodividethelegendtableinto.
"noColumns"用于设置legend表格的列数
"position"specifiestheoverallplacementofthelegendwithinthe
plot（top-right,top-left,etc.）andmarginthedistancetotheplot
edge（thiscanbeeitheranumberoranarrayoftwonumberslike[x,
y]）."backgroundColor"and"backgroundOpacity"specifiesthe
background.Thedefaultisapartlytransparentauto-detected
background.
position：
用于指定legend在曲线图内的位置，"ne"东北角，"se"东南,"nw"西北,"sw"西南
margin：
设置legend与曲线图边框的距离,可以是xy轴偏移量的数值对[x,y]也可以是单个数字，单个数字值表示相对x,y轴的偏移量使用相同的值
采用哪条X轴和Y轴作为参照物取决于position的值
backgroundColor：
设置legend的背景颜色
backgroundOpacity：
设置legend背景的透明度
IfyouwantthelegendtoappearsomewhereelseintheDOM,youcan
specify"container"asajQueryobject/expressiontoputthelegend
tableinto.The"position"and"margin"etc.optionswillthenbe
ignored.NotethatFlotwilloverwritethecontentsofthecontainer.
如果你想把legend放在其他DOM元素内，可以为container设定一个值，
container的值可以是jQuery对象或表达式，例如：
container:
$（"#showChartLegend"），把标题显示在id为showChartLegend的div或其他容器类标签内，
container为legend指定容器后，"position"和"margin"等与图表相关的位置属性会被忽略，
另外请注意，container指定的容器内容会被覆盖掉。
Customizingtheaxes
数轴定制
====================
xaxis,yaxis,x2axis,y2axis:
{
mode:
nullor"time" //数轴是否为时间模式
min:
nullornumber //数轴最小值
max:
nullornumber //数轴最大值
autoscaleMargin:
nullornumber //按百分比为数轴延长一小段来缩放曲线以避免曲线最远的数据点出现在图表边框上
//延长的距离为单位刻度的整数倍，且刚好不小于（max-min）*number，其中min端增加1个刻度单位的长度,当对应数轴的min和max值至少一个为null时才生效
//其中一个特例是，如果数据点的最小值为0，则min端不增长数轴，数据点会出现的边框上
//对X轴，该值默认为null，对Y轴，该值默认为0.02
labelWidth:
nullornumber
labelHeight:
nullornumber
transform:
nullorfn:
number->number
inverseTransform:
nullorfn:
number->number
ticks:
nullornumberorticksarrayor（fn:
range->ticksarray）
tickSize:
numberorarray
minTickSize:
numberorarray
tickFormatter:
（fn:
number,object->string）orstring
tickDecimals:
nullornumber
}
Allaxeshavethesamekindofoptions.The"mode"option
determineshowthedataisinterpreted,thedefaultofnullmeansas
decimalnumbers.Use"time"fortimeseriesdata,seethenextsection.
所有数轴都有相同的参数设置，mode为null表示数轴十进制，为time设置为时间轴
Theoptions"min"/"max"arethepreciseminimum/maximumvalueonthe
scale.Ifyoudon'tspecifyeitherofthem,avaluewillautomatically
bechosenbasedontheminimum/maximumdatavalues.
"min"/"max"设置数轴最大值和最小值，如果没有明确指定他们，将自动使用数据中的最小值和最大值
The"autoscaleMargin"isabitesoteric:
it'sthefractionofmargin
thatthescalingalg
升级会员 