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（个人和商业都免费）。俺最近开发项目进要...
5. **jqPlot**：jqPlot是一个可定制的jQuery图表插件，支持多种图表样式和动画效果。它允许用户自定义数据系列、轴、图例等元素，且提供了触摸事件支持，适用于移动设备。 6. **amCharts**：amCharts提供了一系列的...
总的来说，jqPlot是一款功能强大且灵活的jQuery图表插件，对于那些需要在Web应用中展示数据的开发者来说，它是一个非常有价值的工具。通过深入理解和熟练运用jqPlot，你可以创建出专业且引人入胜的数据可视化界面，...