`

【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" />
        该渲染器主要用于将数据节点相关的的信息以标签的方式放于该数据节点附近;对于相应数据
      为空的,其标签不显示。

分享到:
评论

相关推荐

    jquery画图插件jqplot例子+中文教程

    1. **快速入门**:介绍如何安装jqPlot,以及编写第一个图表的步骤。 2. **基本图表类型**:讲解如何创建折线图、柱状图、饼图和散点图。 3. **配置选项**:详述各种配置选项,如颜色、样式、轴设置等,以及如何调整...

    Beginning JavaScript Charts - With jqPlot, d3, and Highcharts

    该书不仅为初学者提供快速入门的途径,同时也为经验丰富的开发者提供了进阶内容。例如,它展示了如何从零开始开发自定义图形库,使用jQuery进行开发。书的最后,读者将能够掌握所有管理各种数据源的必要元素,这些...

    可视化工具对比.pdf

    5. jqPlot: 适合不需要自定义样式的情况。只支持线性、柱状、饼状的图表。 6. ECharts: 深度数据互动可视化 svg 性能相比 canvas 较差。 7. Kartograph: 不需要任何地图提供者用来建立互动式地图,由两个库组成。...

    Learning jQuery 1.3 | Jquery基础教程(第二版)

    jQuery拥有丰富的插件生态系统,如用于图像轮播的jQuery Cycle,表单验证的jQuery Validation,以及用于图表展示的jqPlot等。这些插件扩展了jQuery的功能,满足了不同项目的需求。 ### 八、学习资源 "Learning ...

    kernel-devel-4.18.0-553.45.1.el8-10.x86-64.rpm

    Rocky Linux 8.10内核包

    Simulink中三阶单环多位量化Σ-Δ调制器的设计与实现-音频带ADC的应用(复现论文或解答问题,含详细可运行代码及解释)

    内容概要:本文档详细介绍了如何在Simulink中设计一个满足特定规格的音频带ADC(模数转换器)。首先选择了三阶单环多位量化Σ-Δ调制器作为设计方案,因为这种结构能在音频带宽内提供高噪声整形效果,并且多位量化可以降低量化噪声。接着,文档展示了具体的Simulink建模步骤,包括创建模型、添加各个组件如积分器、量化器、DAC反馈以及连接它们。此外,还进行了参数设计与计算,特别是过采样率和信噪比的估算,并引入了动态元件匹配技术来减少DAC的非线性误差。性能验证部分则通过理想和非理想的仿真实验评估了系统的稳定性和各项指标,最终证明所设计的ADC能够达到预期的技术标准。 适用人群:电子工程专业学生、从事数据转换器研究或开发的技术人员。 使用场景及目标:适用于希望深入了解Σ-Δ调制器的工作原理及其在音频带ADC应用中的具体实现方法的人群。目标是掌握如何利用MATLAB/Simulink工具进行复杂电路的设计与仿真。 其他说明:文中提供了详细的Matlab代码片段用于指导读者完成整个设计流程,同时附带了一些辅助函数帮助分析仿真结果。

    计算机课后习题.docx### 【计算机科学】研究生入学考试计算机组成原理专项题库设计:考研复习资源集成与优化

    内容概要:该题库专为研究生入学考试计算机组成原理科目设计,涵盖名校考研真题、经典教材课后习题、章节题库和模拟试题四大核心模块。名校考研真题精选多所知名高校的计算机组成原理科目及计算机联考真题,并提供详尽解析,帮助考生把握考研命题趋势与难度。经典教材课后习题包括白中英《计算机组成原理》(第5版)和唐朔飞《计算机组成原理》(第2版)的全部课后习题解答,这两部教材被众多名校列为考研指定参考书目。章节题库精选代表性考题,注重基础知识与重难点内容,帮助考生全面掌握考试大纲要求的知识点。模拟试题依据历年考研真题命题规律和热门考点,精心编制两套全真模拟试题,并附标准答案,帮助考生检验学习成果,评估应试能力。 适用人群:计划参加研究生入学考试并报考计算机组成原理科目的考生,尤其是需要系统复习和强化训练的学生。 使用场景及目标:①通过研读名校考研真题,考生可以准确把握考研命题趋势与难度,有效评估复习成效;②通过经典教材课后习题的练习,考生可以巩固基础知识,掌握解题技巧;③通过章节题库的系统练习,考生可以全面掌握考试大纲要求的各个知识点,为备考打下坚实基础;④通过模拟试题的测试,考生可以检验学习成果,评估应试能力,为正式考试做好充分准备。 其他说明:该题库不仅提供详细的题目解析,还涵盖了计算机组成原理的各个方面,包括计算机系统概述、数据表示与运算、存储器分层、指令系统、中央处理器、总线系统和输入输出系统等。考生在使用过程中应结合理论学习与实践操作,注重理解与应用,以提高应试能力和专业知识水平。

    __UNI__DB9970A__20250328141034.apk.1

    __UNI__DB9970A__20250328141034.apk.1

    minio-rsc-Rust资源

    rust for minio

    4-4-台区智能融合终端功能模块型式规范(试行).pdf

    国网台区终端最新规范

    《基于YOLOv8的化工管道焊缝缺陷检测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    python源码-1个机器学习相关资源

    一个简单的机器学习代码示例,使用的是经典的鸢尾花(Iris)数据集,通过 Scikit-learn 库实现了一个简单的分类模型。这个代码可以帮助你入门机器学习中的分类任务。

    pyqt离线包,pyqt-tools离线包

    pyqt离线包,pyqt-tools离线包

    《基于YOLOv8的船舶机舱灭火系统状态监测系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    SQL常用日期和时间函数整理及使用示例

    SQL常用日期和时间函数整理及在sqlserver测试示例 主要包括 1.查询当前日期GETDATE 2.日期时间加减函数DATEADD 3 返回两个日期中指定的日期部分之间的差值DATEDIFF 4.日期格式转换CONVERT(VARCHAR(10),GETDATE(),120) 5.返回指定日期的年份数值 6.返回指定日期的月份数值 7.返回指定日期的天数数值

    GSDML-V2.3-Turck-BL20-E-GW-EN-20160524-010300.xml

    GSDML-V2.3-Turck-BL20_E_GW_EN-20160524-010300.xml

    T_CPCIF 0225-2022 多聚甲醛.docx

    T_CPCIF 0225-2022 多聚甲醛.docx

    《基于YOLOv8的智能仓储货物堆码倾斜预警系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    《基于YOLOv8的智能仓储货物堆码倾斜预警系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计

    蚕豆脱壳机设计.zip

    蚕豆脱壳机设计.zip

    附件2-2:台区智能融合终端入网专业检测单位授权委托书.docx

    台区终端电科院送检文档

Global site tag (gtag.js) - Google Analytics