- 浏览: 17920 次
- 性别:
- 来自: 江苏
文章分类
最新评论
jqPlot 是一款非常强大的图表插件,有柱状、线形、饼形等等,而且调用方便!但唯一不足的是没有具体的api,例子也全是是英文,中文全面的很少,这是官网:http://www.jqplot.com/
简单总结一下使用方法:
$.jqplot('target', data, options}); target:显示的位置,data:显示的数据,options:图表的配置参数;
前两个 都很容易理解,重点是第三项图表的配置,全面整理的很少,下面记录我这次使用的方法,也是借鉴了网友(http://www.cnblogs.com/babycool/p/3861181.html)的总结,在此感谢:
参考资料地址:
http://www.jqplot.com/
http://www.cnblogs.com/samwu/archive/2012/12/03/2799082.html
http://www.cnblogs.com/mofish/archive/2011/08/15/2139728.html
http://www.cnblogs.com/babycool/p/3861181.html
简单总结一下使用方法:
$.jqplot('target', data, options}); target:显示的位置,data:显示的数据,options:图表的配置参数;
前两个 都很容易理解,重点是第三项图表的配置,全面整理的很少,下面记录我这次使用的方法,也是借鉴了网友(http://www.cnblogs.com/babycool/p/3861181.html)的总结,在此感谢:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <link href="js/jqplot/jquery.jqplot.min.css" rel="stylesheet" /> <script src="js/jqplot/jquery.min.js"></script> <script src="js/jqplot/jquery.jqplot.min.js"></script> <script src="js/jqplot/excanvas.min.js"></script> <script src="js/jqplot/plugins/jqplot.barRenderer.min.js"></script> <script src="js/jqplot/plugins/jqplot.pointLabels.min.js"></script> <script src="js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script> <script src="js/jqplot/plugins/jqplot.cursor.min.js"></script> <script src="js/jqplot/plugins/jqplot.highlighter.min.js"></script> <script src="js/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script> <script src="js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script> <script src="js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script> <script> $(function () { //--------------官网--------------------------- // var plot1 = $.jqplot('chart1', [[3, 7, 9, 1, 4, 6, 8, 2, 5]]); //----------------实例 ------------------------- // var ticks = ['20110915', '20111024', '20111003', '20111008', '20111020', '20111012', '20110914', '20111029', '20111004', '20111022', '20111019', '20111017', '20111026', '20111005', '20110912', '20110903', '20110911', '20110923', '20111016', '20111001', '20110904', '20110924', '20110918', '20111021', '20111011', '20111030', '20110908', '20110913', '20110928', '20111025', '20110921', '20111002', '20111028', '20110906', '20110926', '20111018', '20110905', '20111007', '20111013', '20110907', '20110916', '20110927', '20111027', '20110902', '20110922', '20111006', '20111010', '20110910', '20111023', '20110919', '20110930', '20110917', '20110920', '20111009', '20111015', '20110909', '20110925', '20110929', '20111014', '22']; var tick2 = ['20110915', '20111024', '20111003', '20111008', '20111020', '20111012', '20110914', '20111029', '20111004', '20111022']; //var b1 = [46.84, 59.87, 103.42, 62.80, 67.72, 32.59, 54.91, 109.06, 79.68, 83.99, 56.27, 59.23, 68.53, 60.45, 78.47, 62.24, 91.62, 39.38, 52.76, 122.34, 95.84, 81.85, 72.62, 69.30, 49.76, 78.07, 36.22, 44.18, 88.87, 72.65, 49.90, 140.91, 75.52, 64.64, 63.31, 73.33, 65.53, 69.31, 56.26, 51.32, 50.53, 81.99, 74.16, 31.04, 41.95, 64.09, 65.85, 73.88, 91.34, 67.09, 93.91, 65.96, 52.86, 41.03, 67.93, 72.25, 74.18, 103.10, 51.57, 55.74]; //子统计1数据 var b2 = [46.84, 59.87, 103.42, 62.80, 67.72, 32.59, 54.91, 109.06, 79.68, 83.99]; var plot2 = $.jqplot('chart2', [b2], { title: '2011-9到2011-10月现金收益(元)', legend: { show: true, location: 'ne' }, //提示工具栏--show:是否显示,location: 显示位置 (e:东,w:西,s:南,n:北,nw:西北,ne:东北,sw:西南,se:东南) series: [ { label: '现金收益', // lineWidth: 8, //线条粗细 markerOptions: { size: 9, style: "circle" } // 节点配置 } ], //提示工具栏 //captureRightClick: true,//禁用右键 seriesDefaults: { pointLabels: { show: true, ypadding: -1 } //数据点标签 //renderer: $.jqplot.BarRenderer, //使用柱状图表示 //柱状体组之间间隔 //rendererOptions: {barMargin: 25} }, axes: { xaxis: { label: "日期", //x轴显示标题 pad: 5, renderer: $.jqplot.CategoryAxisRenderer, //x轴绘制方式 tickInterval: '1day', ticks: tick2, tickOptions: { fontSize: '10pt' }, mark: 'cross' }, yaxis: { label: "现金", // y轴显示标题 min: 0, //tickInterval: 10, //网格线间隔大小 tickOptions: { formatString: '%.2f', fontSize: '10pt' } } } }); //-----------------测试 折线图------------------------ var cosPoints = [ ['20140701', 23], ['20140702', 12.6], ['20140703', 45.2], ['20140704', 12.6], ['20140705', 10], ['20140706', 8.6], ['20140707', 23.2], ['20140708', 12.6], ]; var plot3 = $.jqplot('chart1', [cosPoints], { title: '消费水平', //标题 legend: { show: true, location: 'ne' }, //提示工具栏--show:是否显示,location: 显示位置 (e:东,w:西,s:南,n:北,nw:西北,ne:东北,sw:西南,se:东南) //series: [{showMarker:true}], axesDefaults: { //轴的刻度值,字体大小,字体类型,字体角度 tickRenderer: $.jqplot.CanvasAxisTickRenderer, // labelRenderer: $.jqplot.CanvasAxisLabelRenderer, tickOptions: { //fontSize: '10pt', angle: 20 } }, seriesDefaults: { label: '消费值', //分类名称 color: 'red', //分类在图标中表示(折现,柱状图等)的颜色 //showLine: true, //是否显示图表中的折线(折线图中的折线) //markerOptions: { // show:true //} showMarker: true, //是否显示节点 pointLabels: { show: true,//数据点标签 // edgeTolerance:1 } }, axes: { xaxis: { label: '日期', renderer: $.jqplot.CategoryAxisRenderer, // readerer:$.jqplot.DateAxisRenderer, // tickInterval: 'lday', labelOptions: { //formatString:'%Y-%m-%d', fontSize: '12pt' } }, yaxis: { label: '现金', //autoscale: true, min: 0, tickOptions: { formatString: '%.2f', fontSize: '10pt' } } } }); //--------------------测试 提示文字的倾斜角度--------------------- var line3 = [['20140701', 7], ['20140702', 9], ['20140703', 15], ['20140704', 12], ['20140705', 3], ['20140706', 6], ['20140707', 18]]; var plot3 = $.jqplot('chart3', [line3], { title: 'Concern vs. Occurrance', // series: [{ renderer: $.jqplot.BarRenderer }], axesDefaults: { tickRenderer: $.jqplot.CanvasAxisTickRenderer, tickOptions: { angle: 10, //倾斜角度 fontSize: '10pt' } }, axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer } } }); //--------------------测试 节点高亮显示--------------------- var line4 = [['20140701', 7], ['20140702', 9], ['20140703', 15], ['20140704', 12], ['20140705', 3], ['20140706', 6], ['20140707', 18]]; var plot4 = $.jqplot('chart4', [line4], { seriesDefaults: { label: '消费值', //分类名称 pointLabels: { show: true,//数据点标签 // edgeTolerance:1 } }, axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, tickOptions: { //formatString: '%b %#d' } }, yaxis: { tickOptions: { // formatString: '$%.2f' } } }, highlighter: { show: true, sizeAdjust: 5, // 当鼠标移动到数据点上时,数据点扩大的增量 fadeTooltip: true,// 设置提示信息栏出现和消失的方式(是否淡入淡出) //lineWidthAdjust: 2.5, //当鼠标移动到放大的数据点上时,设置增大的数据点的宽度 tooltipOffset: 2, // 提示信息栏据被高亮显示的数据点的偏移位置,以像素计 //tooltipLocation: 'nw' // 提示信息显示位置(英文方向的首写字母): n, ne, e, se, s, sw, w, nw. }, cursor: { show: false, showTooltip: true, // 是否显示提示信息栏 followMouse: true, //光标的提示信息栏是否随光标(鼠标)一起移动 //tooltipLocation: 'se', // 光标提示信息栏的位置设置。如果followMouse=true,那么该位置为 //提示信息栏相对于光标的位置。否则,为光标提示信息栏在图标中的位置 // 该属性可选值: n, ne, e, se, etc. tooltipOffset: 6, //提示信息栏距鼠标(followMouse=true)或坐标轴(followMouse=false)的位置 } }); //jquery jqPlot API 中文使用教程 - 沫鱼 - 博客园 http://www.cnblogs.com/mofish/archive/2011/08/15/2139728.html //--------------------测试 Ajax数据调用(未深入测试)--------------------- var ajaxDataRenderer=function (url,plot,options) { var ret=null; $.ajax({ url:url, async:false,//注意 一定要为false dataType:"json", success:function(data){ ret=data; } }); return ret; }; //数据请求路径 var jsonurl = "DataHandler.ashx"; //返回数据: [[2,4,6,8,9,6]] var plot5 = $.jqplot('chart5', jsonurl, { dataRenderer: ajaxDataRenderer, //数据回调函数 dataRendererOptions: { unusedOptionalUrl:jsonurl } }); }) </script> </head> <body> <div id="chart2" style="width: 1000px; height: 400px;"></div> <hr /> <div id="chart1" style="height: 300px; width: 500px;"></div> <br /> <div id="chart3" style="height: 300px; width: 500px;"></div> <br /> <div id="chart4" style="height: 300px; width: 500px;"></div> <br /> <div id="chart5" style="height: 300px; width: 500px;"></div> </body>
参考资料地址:
http://www.jqplot.com/
http://www.cnblogs.com/samwu/archive/2012/12/03/2799082.html
http://www.cnblogs.com/mofish/archive/2011/08/15/2139728.html
http://www.cnblogs.com/babycool/p/3861181.html
相关推荐
jqPlot是基于JavaScript库jQuery的一个强大图表绘制插件,它提供了丰富的图表类型和自定义选项,使得在Web应用中创建交互式图表变得极其简单。jqPlot能够轻松处理各种数据集,包括时间序列数据,用于展示统计、科学...
jqPlot是基于jQuery的一款强大的数据可视化插件,它允许开发者轻松地在网页上创建各种复杂的图表,包括折线图、柱状图、饼图以及散点图等多种图表类型。这款插件以其丰富的自定义选项、良好的性能和易用性而受到...
**jQuery画图插件jqPlot详解及中文教程** jqPlot是一款基于JavaScript的开源图表绘制插件,它允许开发者在网页上轻松创建各种交互式的图表,包括折线图、柱状图、饼图、散点图等多种图形。jqPlot是jQuery生态的一...
**jQuery图表插件jqPlot详解** jqPlot是jQuery的一个强大插件,专为创建美观、交互式的图表而设计。在Web开发中,数据可视化是一项重要的任务,jqPlot提供了一个易于使用且功能丰富的解决方案,使开发者能够轻松地...
### jQuery插件 Jqplot图表实例知识点解析 #### 一、概述 Jqplot 是一个基于 jQuery 的图表绘制插件,它可以用来创建多种类型的图表,包括折线图、柱状图、饼图等。该插件支持丰富的配置选项,允许用户自定义图表...
**jQuery.jqPlot** 是一个基于JavaScript的图表绘制插件,专为网页开发设计,用于在Web页面上创建各种交互式图表。它依赖于流行的JavaScript库jQuery,利用其强大的DOM操作能力和事件处理机制,简化了在HTML页面上...
**jqPlot图表插件详解** jqPlot是一款基于JavaScript的开源图表绘制库,它允许开发者在网页上创建出各种复杂的图表,如折线图、柱状图、饼图等。这款插件以其丰富的自定义选项、良好的性能以及对移动设备的支持而受...
- **插件扩展(Plugins)**:jqPlot有许多插件,如曲线平滑、图例漂浮、多轴等,可以进一步增强图表功能。 **实际应用** jqPlot常用于数据分析、报表展示、网站统计等场景。比如,它可以用来展示销售数据的趋势、...
jQuery,一个流行的JavaScript库,提供了多种图表插件来实现这一目标,其中最常用的就是jqPlot和Highcharts。这两款强大的图表库都允许开发者创建交互式的、动态的图表,但它们各自具有不同的特性和使用方式。 **...
在RIA应用开发中,jQuery图表插件是常见的用于数据可视化的重要工具。本篇将重点介绍基于jQuery的图表插件——jqPlot。 jqPlot是一款强大的图表绘制插件,它基于JavaScript库jQuery,能够帮助开发者在网页上方便地...
总的来说,jQuery图表插件Plot和JQPlot为Web开发者提供了强大的数据可视化工具,通过灵活的API和丰富的定制选项,可以帮助他们轻松地创建出吸引人的、交互性强的图表,提升网站或应用程序的用户体验。
强大的Jquery图表绘制插件 —— jqPlot jqPlot是一款基于jquery类库的图标绘制插件。通过jqPlot可以再网页中绘制线状、柱状、饼状等多种样式图表。而且,jqPlot具有插件可扩展性(Pluggability),你可以编写自己的...
10. **D3.js**:虽然不是直接的jQuery插件,但D3库允许开发者直接操作DOM来创建复杂的可视化,可与jQuery结合使用。 每个插件都有其特点和适用场景,选择时应考虑性能、功能需求、学习曲线以及项目的兼容性要求。...
Jqplot是一款基于jQuery库的开源图表插件,主要用于在网页上创建各种动态、交互式的数据可视化图表。它以其丰富的图表类型、高度可定制性和良好的性能赢得了广大开发者的青睐。在“jquery.jqplot.1.0.0b2_r1012”这...
众所周知,通过jquery可以实现很好的图表效果,并且代码易懂,容易扩展,这里提供有jqplot中文API:http://www.jqplot.com/;其次,这里提供常用的插件如highchart,这里提供有详细的API文档和示例,不用再去官网上...
本篇文章将详细介绍几种实用的JQuery图表插件,包括Flot、Highcharts、jquerychart和jqPlot,并提供相关资源下载和中文帮助文档。 首先,Flot是一款基于jQuery的开源图表插件,它以其轻量级和灵活性著称。Flot支持...
jqPlot是一款基于jQuery的图表插件,用于在网页上创建各种动态、交互式的图表,如柱状图、线性图、饼图等。它在现代支持HTML5的浏览器上使用canvas元素来绘制图表,而在不支持canvas的旧版IE浏览器(如IE9以下版本)...
jqPlot是基于jQuery的一款强大的数据可视化插件,其在JavaScript图表绘制领域有着广泛的应用。这款插件以其高度的可扩展性和灵活性,使得开发者能够轻松创建各种复杂的数据展示效果,包括但不限于柱状图、饼状图和...
jqPlot是基于jQuery的一款强大而灵活的图表绘制插件,它提供了丰富的功能,能够帮助开发者轻松创建出各种类型的图表,包括但不限于线状图、柱状图、饼图等。这款插件以其简洁的API和高度自定义的特性,在Web开发领域...