charts练习总结

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

阅读网址

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:number ofpixels or [x margin, y margin]

backgroundColor:nullor color

backgroundOpacity:number between 0and 1

container:nullor jQuery object/DOMelement/jQueryexpression

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

}

xaxis,yaxis:{

show:nullor true/false

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

mode:nullor "time"("time"requires jquery.flot.time.jsplugin)

timezone:null,"browser"or timezone(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:nullor true

tickLength:nullor number

alignTicksWithAxis:nullor number

}

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

{

show:Boolean //默认true

aboveData:boolean

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

backgroundColor:color/gradientor null

margin:number or margin object

labelMargin:number

axisMargin:number

markings:array ofmarkings or(fn:axes ->array ofmarkings)

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

borderColor:color or nullor object with"top","right","bottom"and "left"properties withdifferent 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

charts练习总结相关推荐

qchart折现图_Qt Charts 动态实时折线图绘制
在Qt Charts发布之前, Qt比较著名两个画图插件是 qwt和Qcustom, 其中Qcustom较轻量,只需要在project 中包含qcustomplot.h 和 qcustomplot.c ...
jmeter吞吐量图形显示_Jmeter系列（43）- 详解 Jmeter 图形化 HTML 压测报告之 Charts 模块...
如果你想从头学习Jmeter,可以看看这个系列的文章哦 Charts 介绍包含了各种详细信息图表,比 GUI 模式的图表好看且易懂多了! 做性能测试,如何发现是否有性能瓶颈?必须从结果图表中找到鸭! ...
Ant Design Pro 使用图表 charts bizcharts
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 淌了一下午坑,都是辛酸泪总结:首先要知道, 它不能直接使用 charts ,需要安装 bizcharts 插 ...
Swift 教學：如何使用iOS Charts API 製作漂亮的圖表
在應付許多的資料時,比起只在表格中呈現,使用圖表來顯示資料,可以幫助使用者容易地了解資訊.有了圖表,相對於讀取整個資料表(或幾個資料表)你可以輕鬆地一眼便見到以圖形表示的資料,取得所需的資訊.圖表的使 ...
python 图表_python导出excel charts图表
在Excel vba将chart另存为图片篇中讲了如何通过vba宏将excel 中的chart图表导出为的图片,本篇讲下如何使用纯python代码将excel 中的图表导出为图片.这里需要使用的模块有 ...
R语言单变量分析实战：汇总统计（Summary Statistics）、频率表（Frequency Table）、图表（charts: boxplot、histogram、density）
R语言单变量分析实战:汇总统计(Summary Statistics).频率表(Frequency Table).图表(charts: boxplot.histogram.density) 目录
R语言可视化：散点图、散点图和折线图（line charts）、3D散点图、旋转3D散点图、气泡图、corrgram包可视化相关性矩阵、马赛克图（ Mosaic plots）、hexbin、密度图
R语言可视化:散点图.散点图和折线图(line charts).3D散点图.旋转3D散点图.气泡图.corrgram包可视化相关性矩阵.马赛克图( Mosaic plots).hexbin.密度图目 ...
R单变量可视化（Histograms、 Index Plots、Time-Series Plots、Pie Charts）
R单变量可视化(Histograms. Index Plots.Time-Series Plots.Pie Charts) 目录 R单变量可视化(Histograms. Index Plots.Tim ...
R可视化雷达图（Radar Charts）
R可视化雷达图(Radar Charts) 目录 R可视化雷达图(Radar Charts) R中的基本雷达图 R自定义雷达图
如何在 Swift 语言下使用 iOS Charts API 制作漂亮图表？
[编者按]本文作者 Joyce Echessa 是渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.文中作者通过示例介绍用 ios-charts 库创建简易美观的 ...

charts练习总结

charts练习总结相关推荐

最新文章

热门文章