jqplot是基于jQuery的一款客户端画图插件。
[url]http://www.jqplot.com/index.php[/url] (jqplot的官方网址)
这个插件只能画一些基本图形，并且数据结构比较复杂，笔者这里并不建议在项目中使用。
例子如下：
【注意】：生成图片功能只能在[color=red]firefox[/color]或者[color=red]google[/color]这样[color=red]webkit[/color]内核浏览器下才好用，目前经过笔者测试[color=blue]IE[/color]内核的浏览器都不生效，生成的图片是[color=brown]null[/color]。
[url]http://www.jqplot.com/index.php[/url] (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>
【注意】：生成图片功能只能在[color=red]firefox[/color]或者[color=red]google[/color]这样[color=red]webkit[/color]内核浏览器下才好用，目前经过笔者测试[color=blue]IE[/color]内核的浏览器都不生效，生成的图片是[color=brown]null[/color]。
5501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
