javaweiming 2014-07-12
由于项目信息统计需要生成一些图表,找了一些免费的开源框架,最后决定使用jqPlot。
1)首先提供一下学习链接
官网的Option配置 : http://www.jqplot.com/docs/files/jqPlotOptions-txt.html
Option配置中文版 : http://blog.csdn.net/gaoyusi4964238/article/details/4378459
别人的例子参考 : http://blog.csdn.net/wtderek/article/details/22885939
2)从面对对象的角度来剖析jqPlot Option属性,(主要从xy轴,系列,数据点等)
title : 标题属性
axisDefaults :xy轴的默认配置
axis :xy轴的的独立配置
seriesDefaults :系列的默认配置(系列指的是图表的内容,例如线条,柱子,饼块等)
|--- markerOptions : 数据点的配置
series : 每个系列的独立配置
legend :分类名称框的配置
grid : 网格的配置
cursor : 光标的配置
highlighter : 数据点高亮动作的配置(例如鼠标移动到该点时弹框展示xy轴的数据)
3)jqPlot有很多渲染器,有xy轴的渲染器,有数据点的渲染器,有系列的渲染器等等
|--- dateAxisRenderer:
相关引用包:<script type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js" />
该渲染器主要用于显示刻度为日期格式的坐标轴,它增强了javascript的本地数据处理能力,
它几乎支持所有的日期格式。
另外,该渲染器还提供了强大的格式化功能,它能将数据中日期字符串格式化为你需要的格式
并显示在坐标轴的刻度线上。
|--- categoryAxisRenderer
相关引用包:<script type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js" />
该渲染器主要用于将显示于刻度处的值显示与两个刻度之间,当然其表达意思也发生变化,因为
刻度值处值表示某个点处的值,而它则代表某个范围内的值。
该渲染器比较适合与柱状图联合使用。
|--- barRenderer
相关引用包:<script type="text/javascript" src="../plugins/jqplot.barRenderer.min.js" />
该渲染器主要用于显示柱状图,该渲染器能够很好的控制每个组(位于一个刻度值处的各个
分类)内及组间距离,并且该柱状图能够水平显示。
|--- cursor
相关引用包:<script type="text/javascript" src="../plugins/jqplot.cursor.min.js" /
该渲染器主要用于鼠标移动到图中时,鼠标在图中显示形式,常用与和高亮功能同时使用。
该渲染器相关引用包一旦引用到当前页面会,该渲染器立即生效。
|--- highlighter
相关引用包:<script type="text/javascript" src="../plugins/jqplot.highlighter.min.js" />
该渲染器主要用于当鼠标移动到图中数据点上时,在鼠标附近显示提示栏,并将相关信息显示
在提示栏。默认显示值是横纵坐标轴刻度值。当然,提示框中信息是可以根据自身需要定制的。
该渲染器相关引用包一旦引用到当前页面会,该渲染器立即生效。
|--- logAxisRenderer
相关引用包:<script type="text/javascript" src="../plugins/jqplot.logAxisRenderer.min.js" />
该渲染器主要用于以指数计算的方式生成坐标轴上刻度值。默认情况下,刻度值是均匀显示的,
但是刻度值也可以按指数增长的方式显示。
|--- ohlcRenderer
相关引用包:<script type="text/javascript" src="../plugins/jqplot.ohlcRenderer.min.js" />
该渲染器主要用于显示甘特图。通常情况下,该渲染器与dateAxisRenderer一起使用较多
|--- dragable
相关引用包:<script type="text/javascript" src="../plugins/jqplot.dragable.min.js" />
通过该渲染器,用户能够拖动某个数据点,jqplot会自动重画拖动后的新图表。同时,被拖动的
数据点的数据值也随着拖动发生变化。
|--- trendline
相关引用包:<script type="text/javascript" src="../plugins/jqplot.trendline.min.js" />
该渲染器主要用于对现有数据进行线性回归计算,并自动将计算结果以趋势线的形式展示出来,
当用户拖动某个数据点时,趋势线亦随用户拖动而变化。
|--- pointLabels
相关引用包:<script type="text/javascript" src="../plugins/jqplot.pointLabels.min.js" />
该渲染器主要用于将数据节点相关的的信息以标签的方式放于该数据节点附近;对于相应数据
为空的,其标签不显示。