码迷,mamicode.com
首页 > Web开发 > 详细

Web前端图表绘制JQuery插件jqplot

时间:2016-05-11 19:29:02      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:

在此之前使用了Chart.js、Highcharts,首先了解一下这两款插件的优势与不足,然后再来了解jqplot。

1.Chart

Chart中文官网:http://chartjs.cn/

1.1优势:

1.1.1Chart是一个基于HTML5表情按canvas来开发的纯javascript库,Chart.js(44KB)Chart.min.js(20KB),只需要引用一个文件即可搞定,用起来非常干净舒服。

1.1.2Chart可以支持六种图标类型:折线图(Line)、柱形图(Bar)、饼形图(Pie)、环饼图(Doughnut)、雷达图(Radar)、级地图(PolarArea)

1.2缺点:

1.2.1缺乏对每个色块提示所代表的数据意义文字说明,例如:折线统计图出现多条折线时每条折线所代表的数据意义

1.2.2缺少对折线焦点的详细数据说明,例如:折线或柱形每个节点的具体数据值显示

1.2.3.缺少对折线图X,Y轴注释说明及数据单位标注,例如:需要对折线图标注Y轴代表的是交易金额

2.Highcharts

 Highcharts中文官网:http://www.hcharts.cn/ 

2.1优势

2.1.1Highcharts是一个图表类型丰富,效果酷炫,功能强大于一身的javascript库

2.1.21Highcharts支持曲线图、区域图、柱状图、饼状图、散状点图和综合图表,并且还可以定制自己想要的效果。

2.2缺点

2.2.1Highcharts分为个人版和商业版,一些复杂的效果需要单独收费。

3.jqplot

 这里主要说一下jqplot,因为经过对比,最终项目选择了它,然而jqplot也是一个非常强大的JS图表插件。

 jqplot为基于JQuery的一款图表插件,可扩展性强,关键是开源。

由于jqplot文档下有许多分别在不同场景下使用的插件,所以这里做一个简单的介绍。

jqplot官方下载地址:http://www.jqplot.com/

目前最新的版本是jquery.jqplot.1.0.9.d96a669.zip

 解压后各文件的使用方法:

如果无需特殊配置,可直接引入jqplot主文件即可。

<script src="~/Scripts/jquery.jqplot/jquery.min.js"></script>
<script src="~/Scripts/jquery.jqplot/jquery.jqplot.min.js"></script>
<link href="~/Scripts/jquery.jqplot/jquery.jqplot.min.css" rel="stylesheet" />

*如果你的浏览器不支持HTML5的canvas,那么必须要引入“excanvas.js”,plugins文件夹下为jqplot扩展功能的JS库。

重要:plugins下各JS库的作用

 1.plugins/jqplot.barRenderer.min.js

主要用于显示刻度为日期格式的坐标轴,它增强了javascript的本地数据处理能力,它几乎支持所有的日期格式。
另外还提供了强大的格式化功能,它能将数据中日期字符串格式化为你需要的格式并显示在坐标轴的刻度线上。

 2.plugins/jqplot.categoryAxisRenderer.min.js

 主要用于将显示于刻度处的值显示与两个刻度之间,当然其表达意思也发生变化,因为刻度值处值表示某个点处的值,而它则代表某个范围内的值。
比较适合与柱状图联合使用。

 3.plugins/jqplot.barRenderer.min.js

 主要用于显示柱状图,能够很好的控制每个组(位于一个刻度值处的各个分类)内及组间距离,并且该柱状图能够水平显示。

 4.plugins/jqplot.cursor.min.js

 主要用于鼠标移动到图中时,鼠标在图中显示形式,常用与和高亮功能同时使用。

5.plugins/jqplot.highlighter.min.js

主要用于当鼠标移动到图中数据点上时,在鼠标附近显示提示栏,并将相关信息显示在提示栏。默认显示值是横纵坐标轴刻度值。当然,提示框中信息是可以根据自身需要定制的。
6.plugins/jqplot.logAxisRenderer.min.js

主要用于以指数计算的方式生成坐标轴上刻度值。默认情况下,刻度值是均匀显示的,但是刻度值也可以按指数增长的方式显示。

7.plugins/jqplot.ohlcRenderer.min.js

主要用于显示甘特图。通常情况下,该渲染器与dateAxisRenderer一起使用较多

8.plugins/jqplot.dragable.min.js

用户能够拖动某个数据点,jqplot会自动重画拖动后的新图表。同时,被拖动的数据点的数据值也随着拖动发生变化。

9.plugins/jqplot.trendline.min.js

主要用于对现有数据进行线性回归计算,并自动将计算结果以趋势线的形式展示出来,当用户拖动某个数据点时,趋势线亦随用户拖动而变化。

10.plugins/jqplot.pointLabels.min.js

主要用于将数据节点相关的的信息以标签的方式放于该数据节点附近;对于相应数据为空的,其标签不显示。

 

有了以上对每个插件的介绍,在实际使用中才能更好的、灵活的去实现需要展示的效果。

1.jqplot折线图

 

Web前端图表绘制JQuery插件jqplot

标签:

原文地址:http://www.cnblogs.com/loyung/p/5483093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!