`

【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 概述** jqPlot 是一个基于 jQuery 的数据可视化库,专为网页上的数据图表展示设计。它提供了一套全面的API,使得开发者能够方便地创建各种复杂的图表,如折线图、柱状图、饼图以及散点图等。jqPlot 被誉为...

    jqplot文档

    ### jqPlot文档解析 #### 简介 jqPlot 是一个纯 JavaScript 绘图插件,为 jQuery 提供了强大的图表绘制功能。该插件版本为 1.0.8,自 2009 年至 2015 年由 Chris Leonello 开发并维护。它支持在个人或商业项目中...

    jqplot例子

    **jqPlot 概述** jqPlot 是一个基于 jQuery 的数据可视化库,用于创建高质量的、交互式的图表。它提供了一套全面的API和各种图表类型,适用于数据展示和分析。jqPlot 具有高度可定制性,允许用户通过配置选项自定义...

    jqplot js图标控件

    **jqPlot**是一款基于JavaScript库**jQuery**的图表绘制插件,主要用于在Web页面上创建各种数据可视化图表,包括但不限于柱状图、折线图、饼图、散点图等统计图表。它提供了丰富的定制选项,可以满足用户对图表样式...

    jqPlot图表中文API

    jqPlot是一款基于jQuery的图表插件,用于在网页上创建各种动态、交互式的图表,如柱状图、线性图、饼图等。它在现代支持HTML5的浏览器上使用canvas元素来绘制图表,而在不支持canvas的旧版IE浏览器(如IE9以下版本)...

    jqplot1.0.4

    《jqPlot 1.0.4:打造丰富的数据可视化图表》 jqPlot 是一款功能强大的JavaScript图表库,专为Web应用程序提供丰富的数据可视化解决方案。在版本1.0.4中,它延续了其一贯的优秀特性,使得创建饼状图、柱状图、线状...

    jqplot使用手册 参数手册 中文手册

    **jqPlot简介** jqPlot是基于JavaScript的图表库,它提供了丰富的图表类型,如曲线图、柱状图和饼图,适用于数据可视化需求。这款开源工具以其灵活性和易用性著称,允许开发者轻松地创建交互式图表,适用于网页应用...

    jqplot的Option配置详解

    ### jqplot的Option配置详解 #### 一、引言 jqPlot是一款强大的JavaScript图表库,它基于jQuery构建,能够帮助开发者轻松地创建出各种复杂的图表。对于初学者来说,掌握jqPlot的核心配置对象—Option配置对象是十分...

    jqplot饼状图示例

    **jqPlot饼状图示例** jqPlot是一个强大的JavaScript库,用于在网页上创建动态、交互式的图表。它提供了一套丰富的选项和插件,使得数据可视化变得简单易行。在本示例中,我们将专注于如何使用jqPlot来创建饼状图,...

    jquery.jqplot图表源码

    **jQuery.jqPlot图表源码详解** jQuery.jqPlot是一款基于JavaScript的开源图表库,它提供了丰富的图表类型,包括折线图、柱状图、饼图、散点图等,适用于网页上的数据可视化。该库设计简洁,易于使用,允许开发者...

    jquery charts插件jqplot

    **jQuery图表插件jqPlot详解** jqPlot是jQuery的一个强大插件,专为创建美观、交互式的图表而设计。在Web开发中,数据可视化是一项重要的任务,jqPlot提供了一个易于使用且功能丰富的解决方案,使开发者能够轻松地...

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

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

    jqplot 简易示例

    **jqPlot简介** jqPlot是基于JavaScript的图表绘制库,它允许开发者在网页上创建出交互式的、富有视觉吸引力的图表。jqPlot以其高度可定制性、灵活性和强大的功能著称,适合各种类型的数据可视化需求,包括折线图、...

    jquery.jqplot 绘图插件

    **jqPlot绘图插件详解** jqPlot是基于jQuery的一款强大而灵活的图表绘制插件,它提供了丰富的功能,能够帮助开发者轻松创建出各种类型的图表,包括但不限于线状图、柱状图、饼图等。这款插件以其简洁的API和高度...

    Jqplot-Jquery数据图插件

    **Jqplot - jQuery数据图插件** Jqplot是一款基于jQuery库的开源图表插件,主要用于在网页上创建各种动态、交互式的数据可视化图表。它以其丰富的图表类型、高度可定制性和良好的性能赢得了广大开发者的青睐。在...

    jqplot柱状图示例

    **jqPlot柱状图详解** jqPlot是一款强大的JavaScript图表库,它允许开发者在网页上创建交互式的、高质量的图表。柱状图是数据可视化中常用的一种图表类型,它以竖直的柱子长度来表示各类别数据的大小,非常适合展示...

    fusionChars,highchars,jqplot绘图插件Demo

    `jqPlot`是一款强大的JavaScript图表绘制插件,它提供了丰富的图表类型和高度自定义的选项,使得开发者能够轻松地在网页上创建出交互式的、美观的数据图表。本DEMO——"fusionChars, highchars, jqplot绘图插件Demo...

    jqplot多条折线拖动的设定

    在本教程中,我们将深入探讨如何使用jqPlot库创建一个具有多条可拖动折线图的设置。jqPlot是一个JavaScript图表库,它允许开发者轻松地在网页上绘制各种图表,包括折线图、柱状图等。在这个特定的例子中,我们将关注...

    jqplot (基于jquery的免费的图表工具)

    **jqPlot 深度解析:基于 jQuery 的高效图表库** jqPlot 是一个基于 jQuery 的开源图表绘制库,它提供了一系列强大的功能,用于创建各种各样的动态和交互式的图表,如曲线图、柱状图、饼图等。jqPlot 的核心优势...

Global site tag (gtag.js) - Google Analytics