`
shihuan830619
  • 浏览: 582839 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jqplot图表插件

阅读更多
jqplot是基于jQuery的一款客户端画图插件。
http://www.jqplot.com/index.php   (jqplot的官方网址)

这个插件只能画一些基本图形,并且数据结构比较复杂,笔者这里并不建议在项目中使用。

例子如下:
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>

	<link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
  
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
    <script class="include" type="text/javascript" src="jquery.min.js"></script>

	<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>

	<script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>

	<script class="code" type="text/javascript">
		$.jqplot.config.enablePlugins = true;

		$(function(){
			var s1 = [200, 600, 700, 1000];
			var s2 = [460, -210, 690, 820];
			var s3 = [-260, -440, 320, 200];

			var ticks = ['May', 'June', 'July', 'August'];

			var myplot = $.jqplot('mychart',[s1, s2, s3],{
				seriesDefaults:{
					renderer:$.jqplot.BarRenderer,
					rendererOptions: {fillToZero: true}
				},
				series:[
					{label:'Hotel'},
					{label:'Event Regristration'},
					{label:'Airfare'}
				],
				legend: {
					show: true,
					placement: 'outsideGrid'
				},
				axes: {
					xaxis: {
						renderer: $.jqplot.CategoryAxisRenderer,
						ticks: ticks
					},
					yaxis: {
						pad: 1.05,
						tickOptions: {formatString: '$%d'}
					}
				}
			});
		});

		function generatorpng(){
			var divchart = $("#mychart");
			var imagestr = divchart.jqplotToImageElem({bakcgroundColor:divchart.css('background-color')});
			$("#myimage").append(imagestr);
		}
	</script>

 </head>
 <body>
	<input type="button" id="btn" name="btn" value="生成图片" onclick="generatorpng();" />
	<div id="mychart"></div>
	<div id="myimage"></div>
 </body>
</html>


【注意】:生成图片功能只能在firefox或者google这样webkit内核浏览器下才好用,目前经过笔者测试IE内核的浏览器都不生效,生成的图片是null
分享到:
评论

相关推荐

    jqplot 图表插件

    **jqplot 图表插件详解** jqPlot 是一个基于 JavaScript 的开源图表绘制库,它利用 jQuery 框架的强大功能,为开发者提供了丰富的图表绘制解决方案。这个插件库旨在提供简单、灵活且功能强大的方式来创建动态图表,...

    jQuery插件:jqplot图表绘制插件详解

    总结,jqPlot作为一款强大的jQuery图表插件,不仅提供了丰富的图表类型和自定义选项,还具备良好的扩展性和兼容性,使得开发者能够方便地创建出符合需求的交互式图表。通过深入学习和实践,开发者可以充分利用jqPlot...

    jqPlot图表中文API

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

    jquery.jqplot 绘图插件

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

    fusionChars,highchars,jqplot绘图插件Demo

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

    jqPlot报表插件使用方法

    jqPlot是一款基于jQuery的图表绘制插件...总的来说,jqPlot是一款功能强大的图表插件,适用于开发各种类型的报表和可视化应用。通过熟练掌握其使用方法和配置选项,开发者可以轻松创建出具有专业级别的数据可视化效果。

    jqplot1.0.8插件及中文api

    **jqPlot 1.0.8 插件与中文API详解** jqPlot 是一个功能强大的JavaScript图表库,专为Web应用程序设计,用于创建各种类型的动态图表。版本1.0.8r1250是该插件的一个稳定版本,包含了多项改进和修复,确保了在不同...

    几种实用的JQuery图表插件

    本篇文章将详细介绍几种实用的JQuery图表插件,包括Flot、Highcharts、jquerychart和jqPlot,并提供相关资源下载和中文帮助文档。 首先,Flot是一款基于jQuery的开源图表插件,它以其轻量级和灵活性著称。Flot支持...

    HTML5基于jqplot插件实现的曲线柱形统计图表源码

    `jqplot.css`可能是包含jqPlot插件样式规则的文件,用于调整图表的外观和布局,确保其与网页设计风格协调一致。 `m_jqplot.js`可能是jqPlot的扩展或定制版本,可能包含了特定的图表类型或功能,或者对默认行为进行...

    Jquery的画图插件-jqPlot

    jqPlot是基于JavaScript库jQuery的一个强大图表绘制插件,它提供了丰富的图表类型和自定义选项,使得在Web应用中创建交互式图表变得极其简单。jqPlot能够轻松处理各种数据集,包括时间序列数据,用于展示统计、科学...

    jquery图表插件(plot&jqplot;)

    **jQuery图表插件是网页开发中用于数据可视化的重要工具,主要分为两个插件:Plot和JQPlot。** **Plot** 是基于JavaScript的Flot库的一个扩展,它提供了丰富的交互性和自定义选项,使得在网页上创建动态图表变得...

    jquery图表插件大全收集

    描述中的重复信息“jquery图表插件大全收集jquery图表插件大全收集jquery图表插件大全收集”可能是强调这个资源的全面性,意味着用户可以在这里找到大量关于jQuery图表插件的信息和实例。 标签“jquery图表插件大全...

    jq图表插件

    常见的jq图表插件有jqPlot、Chart.js(虽然不是纯jQuery插件,但与jQuery兼容)、Flot等,它们各有特色,可以根据项目特点进行选择。 总之,jq图表插件是jQuery生态系统中的一个重要组成部分,它为开发者提供了一种...

    jquery图表插件

    然后,你需要选择一个合适的图表插件,如Highcharts、Chart.js、Flot、jqPlot等,每种插件都有其特点和适用场景。例如,Highcharts提供高度可定制化和丰富的图表类型,适合企业级应用;Chart.js则以其轻量级和易于...

    jQuery插件 Jqplot图表实例

    ### jQuery插件 Jqplot图表实例知识点解析 #### 一、概述 Jqplot 是一个基于 jQuery 的图表绘制插件,它可以用来创建多种类型的图表,包括折线图、柱状图、饼图等。该插件支持丰富的配置选项,允许用户自定义图表...

    jquery charts插件jqplot

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

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

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

    jqPlot-扩展性极强的jQuery图表插件

    总的来说,jqPlot是一款功能强大且灵活的jQuery图表插件,对于那些需要在Web应用中展示数据的开发者来说,它是一个非常有价值的工具。通过深入理解和熟练运用jqPlot,你可以创建出专业且引人入胜的数据可视化界面,...

    jquery.jqplot--作图插件

    **jQuery.jqPlot** 是一个基于JavaScript的图表绘制插件,专为网页开发设计,用于在Web页面上创建各种交互式图表。它依赖于流行的JavaScript库jQuery,利用其强大的DOM操作能力和事件处理机制,简化了在HTML页面上...

Global site tag (gtag.js) - Google Analytics