`

【jqPlot】jqPlot入门

 
阅读更多

由于项目信息统计需要生成一些图表,找了一些免费的开源框架,最后决定使用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" />
        该渲染器主要用于将数据节点相关的的信息以标签的方式放于该数据节点附近;对于相应数据
      为空的,其标签不显示。

分享到:
评论

相关推荐

    jqplot

    jqplot

    jqplot1.0.8_优秀且完全免费的JS图表插件

    用JS作图形报表,有多个插件可选择,其中HighCharts、JqPlot、JsChart是使用比较多的,但HighCharts和JsChart只能用作个人使用、为了以后项目中能使用,很多人选择JqPlot(个人和商业都免费)。俺最近开发项目进要...

    jqplot文档

    jqplot官方文档,包含所有的api。 居家旅行必备

    jqplot例子

    官方jqplot chart 例子,非常丰富。应有尽有。。

    jqplot的Option配置详解

    jqplot插件的option对象属性的配置描述

    jqplot-饼图例子

    没啥可描述的,就是用jqplot做的例子,无语了,这还有文字限制,一点都不自由。

    jqPlot开发实例30例

    jqPlot实际开发源代码例子30例。 jqPlot是 一款基于jquery类库的图标绘制插件。 兼容所有浏览器。 通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且,jqPlot具有插件可扩展性 (Pluggability),你...

    jqPlot图表中文API

    jqPlot图表中文API使用文档及源码和在线示例实例_所有属性详解

    jqplot js图标控件

    jqplot 是jquery 的一个插件主要是用于在网页上绘制图表 统计图

    jquery.jqplot.0.9.3.zip

    强大的Jquery图表绘制插件 —— jqPlot jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且,jqPlot具有插件可扩展性(Pluggability),你可以编写自己的...

    jqplot饼状图示例

    jqplot饼状统计图,很鲜明很简单的例子。如需其他图形只需改动小部分即可。

    jqplot中文API帮助文档.pdf

    jqplot中文API帮助文档.pdf

    jqplot 简易示例

    jqplot 简易示例 ,没有数据交互,

    jqplot柱状图示例

    jqplot柱状图示例,加鼠标移动,示例+JS

    Jqplot调用实例—曲线图

    读取XML文件中的数据,解析后用jqplot曲线图的形式表示

    jqplot折线图和柱状图

    一个通过jqplot完整的生成折线图和柱状图例子

    Jquery的画图插件-jqPlot

    非常好用的Jquery的画图插件-jqPlot。

    jquery charts插件jqplot

    运用jqplot能够画线图、饼图,效果优美,是一个很强大的jquery插件.

    jquery jqPlot API 中文使用教程

    jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图、柱状图和饼图。jqPlot支持为图表设置各种不同的样式。提供Tooltips,数据点高亮显示等功能。主要功能包括[1]: 1、有多种图表样式可供选择 2、可以自定义...

Global site tag (gtag.js) - Google Analytics