charts练习总结

一.   jquery Flot ——a purejavaScript plotting library for jQuery

1. 阅读网址

www.flotcharts.org

http://github.com/flot/flot/blob/master/README.md

http://github.com/flot/flot/blob/master/API.md（重点）

1. 基本使用步骤:

(1)定义作图空间placeholder，注意加入宽高设置；

(2)调用flot的函数$.plot($(“#placeholder”,data,options));data是数据数组，options是属性对象。

2. 参数说明：

(i)data [series1,series2,…]可以使鸡蛋数组[[1,2],[3,4],[4,5],…]也可以是对象

data{

color:color or number //rgb(255,100,123)或者用0,1,2来使用默认颜色设置

data:rawdata

label:string //标签说明文字

lines:specific lines options //折线图线条设置对象属性

{

show显示/fill填充/lineWidth/fillColor可设置为拥有colors属性的对象，colors可设置为对象数组，设置渐变

}

bars:specific bars options //柱状图设置对象属性

{

order/show显示/fill填充/borderWidth/barWidth/lineWidth设置边框/fillColor可设置为拥有colors属性的对象，colors设置为对象数组包含opacity属性，设置渐变色/points/shadowSize设置阴影面积

}

points:specific points options //可设置节点是否显示，对象

xaxis:number //横坐标

yaxis:number //纵坐标，设置在data中会在图表中显示

clickable:boolean

hoverable:Boolean //设置true时，将鼠标放上去显示数据。默认设置true

shadowSize:number //shadowSize设置阴影面积

highlightColor:color or number

}

(ii)options对象如果是data元素共同的配置，则放到options的series属性配置对象

legend ：说明，图例

legend:{

show:Boolean

labelFormatter:nullor(fn:string, series object ->string) //传递func(label,series)可以设置说明

labelBoxBorderColor:color

noColumns:number//图例说明横向放置

position:"ne"or"nw"or"se"or"sw"

margin:numberofpixels or [x margin, y margin]

backgroundColor:nullor color

backgroundOpacity:number between 0and1

container:nullor jQuery object/DOMelement/jQueryexpression

sorted:null/false,true,"ascending","descending","reverse",or a comparator

}

xaxis,yaxis:{

show:nullortrue/false

position:"bottom"or"top"or"left"or"right"

mode:nullor"time"("time"requiresjquery.flot.time.jsplugin)

timezone:null,"browser"ortimezone(only makes sense formode:"time")

color:nullor color spec

tickColor:nullor color spec

font:nullor font spec object

min:nullor number

max:nullor number

autoscaleMargin:nullor number

transform:nullor fn:number->number

inverseTransform:nullor fn:number->number

ticks:nullor number or ticks array or(fn:axis->ticks array) //坐标说明值

tickSize:number or array

minTickSize:number or array

tickFormatter:(fn:number, object ->string) or string //返回空字符串表示不显示

tickDecimals:nullor number //小数点位数

labelWidth:nullor number

labelHeight:nullor number

reserveSpace:nullortrue

tickLength:nullor number

alignTicksWithAxis:nullor number

}

grid: //血多设置在axes中设置，但不是全部

{

show:Boolean //默认true

aboveData:boolean

color:color //如果options中有对color设置，则会覆盖该设置

backgroundColor:color/gradientornull

margin:number or margin object

labelMargin:number

axisMargin:number

markings:arrayofmarkingsor(fn:axes->arrayofmarkings)

borderWidth:number or object with"top","right","bottom"and"left"propertieswithdifferent widths

borderColor:color or nullor objectwith"top","right","bottom"and"left"propertieswithdifferent colors

minBorderMargin:number or null

clickable:boolean

hoverable:boolean

autoHighlight:boolean

mouseActiveRadius:number

}

tooltip:Boolean //设置数据说明

tooltipOpts{

defaultTheme: false,

content:string //设置tooltip的格式

}

crosshair:{

mode:”x” //十字瞄准心

}

selection:{

}

3.  代码中/javascript/charts/flot/flot-init.js解读

代码模式

varInitiateFlotBarChart = function (){

return{

init:function(){

}

}

}();

最后一个“()”表示执行，只有执行了才能返回包含有init属性的对象，才能调用init的方法。

返回对象的优点：（1）闭包访问外层function中定义的变量；（2）可将不同的处理函数添加到不同的属性即可用同一个对象访问。

二.    morris charts

比Flot配置简单很多。

http://morrisjs.github.io/morris.js/index.html介绍详细且简单，没什么难点

三.   sparkline charts

               http://omnipotent.net/jquery.sparkline/#s-about

                 其主要特点是通过HTML或javascript提供数据直接作图嵌入在浏览器中。

                 步骤：添加jQuery及sparkline的依赖包

四. Easy pie charts

                   轻量级的jQuery插件，主要用来渲染和制作漂亮的饼状图及动画效果，基于HTML5的canvas元素。

                  网址：www.bootcdn.cn/easy-pie-chart/readme/

五.   chartJS

www.chartjs.org