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 是一个基于 JavaScript 的开源图表绘制库,它利用 jQuery 框架的强大功能,为开发者提供了丰富的图表绘制解决方案。这个插件库旨在提供简单、灵活且功能强大的方式来创建动态图表,...
总结,jqPlot作为一款强大的jQuery图表插件,不仅提供了丰富的图表类型和自定义选项,还具备良好的扩展性和兼容性,使得开发者能够方便地创建出符合需求的交互式图表。通过深入学习和实践,开发者可以充分利用jqPlot...
jqPlot是一款基于jQuery的图表插件,用于在网页上创建各种动态、交互式的图表,如柱状图、线性图、饼图等。它在现代支持HTML5的浏览器上使用canvas元素来绘制图表,而在不支持canvas的旧版IE浏览器(如IE9以下版本)...
jqPlot是基于jQuery的一款强大而灵活的图表绘制插件,它提供了丰富的功能,能够帮助开发者轻松创建出各种类型的图表,包括但不限于线状图、柱状图、饼图等。这款插件以其简洁的API和高度自定义的特性,在Web开发领域...
`jqPlot`是一款强大的JavaScript图表绘制插件,它提供了丰富的图表类型和高度自定义的选项,使得开发者能够轻松地在网页上创建出交互式的、美观的数据图表。本DEMO——"fusionChars, highchars, jqplot绘图插件Demo...
jqPlot是一款基于jQuery的图表绘制插件...总的来说,jqPlot是一款功能强大的图表插件,适用于开发各种类型的报表和可视化应用。通过熟练掌握其使用方法和配置选项,开发者可以轻松创建出具有专业级别的数据可视化效果。
**jqPlot 1.0.8 插件与中文API详解** jqPlot 是一个功能强大的JavaScript图表库,专为Web应用程序设计,用于创建各种类型的动态图表。版本1.0.8r1250是该插件的一个稳定版本,包含了多项改进和修复,确保了在不同...
本篇文章将详细介绍几种实用的JQuery图表插件,包括Flot、Highcharts、jquerychart和jqPlot,并提供相关资源下载和中文帮助文档。 首先,Flot是一款基于jQuery的开源图表插件,它以其轻量级和灵活性著称。Flot支持...
`jqplot.css`可能是包含jqPlot插件样式规则的文件,用于调整图表的外观和布局,确保其与网页设计风格协调一致。 `m_jqplot.js`可能是jqPlot的扩展或定制版本,可能包含了特定的图表类型或功能,或者对默认行为进行...
jqPlot是基于JavaScript库jQuery的一个强大图表绘制插件,它提供了丰富的图表类型和自定义选项,使得在Web应用中创建交互式图表变得极其简单。jqPlot能够轻松处理各种数据集,包括时间序列数据,用于展示统计、科学...
**jQuery图表插件是网页开发中用于数据可视化的重要工具,主要分为两个插件:Plot和JQPlot。** **Plot** 是基于JavaScript的Flot库的一个扩展,它提供了丰富的交互性和自定义选项,使得在网页上创建动态图表变得...
描述中的重复信息“jquery图表插件大全收集jquery图表插件大全收集jquery图表插件大全收集”可能是强调这个资源的全面性,意味着用户可以在这里找到大量关于jQuery图表插件的信息和实例。 标签“jquery图表插件大全...
常见的jq图表插件有jqPlot、Chart.js(虽然不是纯jQuery插件,但与jQuery兼容)、Flot等,它们各有特色,可以根据项目特点进行选择。 总之,jq图表插件是jQuery生态系统中的一个重要组成部分,它为开发者提供了一种...
然后,你需要选择一个合适的图表插件,如Highcharts、Chart.js、Flot、jqPlot等,每种插件都有其特点和适用场景。例如,Highcharts提供高度可定制化和丰富的图表类型,适合企业级应用;Chart.js则以其轻量级和易于...
### jQuery插件 Jqplot图表实例知识点解析 #### 一、概述 Jqplot 是一个基于 jQuery 的图表绘制插件,它可以用来创建多种类型的图表,包括折线图、柱状图、饼图等。该插件支持丰富的配置选项,允许用户自定义图表...
**jQuery图表插件jqPlot详解** jqPlot是jQuery的一个强大插件,专为创建美观、交互式的图表而设计。在Web开发中,数据可视化是一项重要的任务,jqPlot提供了一个易于使用且功能丰富的解决方案,使开发者能够轻松地...
用JS作图形报表,有多个插件可选择,其中HighCharts、JqPlot、JsChart是使用比较多的,但HighCharts和JsChart只能用作个人使用、为了以后项目中能使用,很多人选择JqPlot(个人和商业都免费)。俺最近开发项目进要...
总的来说,jqPlot是一款功能强大且灵活的jQuery图表插件,对于那些需要在Web应用中展示数据的开发者来说,它是一个非常有价值的工具。通过深入理解和熟练运用jqPlot,你可以创建出专业且引人入胜的数据可视化界面,...
**jQuery.jqPlot** 是一个基于JavaScript的图表绘制插件,专为网页开发设计,用于在Web页面上创建各种交互式图表。它依赖于流行的JavaScript库jQuery,利用其强大的DOM操作能力和事件处理机制,简化了在HTML页面上...