ichartjs生成图片
插件地址
http://www.ichartjs.com/
html页面
从官方页面精简出来的 导出图片功能
http://www.ichartjs.com/
html页面
从官方页面精简出来的 导出图片功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ichartjs 示例</title>
<meta name="Description" content="The ichartjs's gallery center,ichartjs 示例中心" />
<meta name="Keywords" content="ichartjs demo,Html5 demo,ichartjs示例,ichartjs示例,Html5示例,Html5示例" />
<script type="text/javascript" src="./ichart.1.1.min.js"></script>
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var IMAGE_DATA = ""
$(function(){
var data = [
{
name : '北京',
value:[-9,1,12,20,26,30,32,29,22,12,0,-6],
color:'#1f7e92',
line_width:2
}
];
var chart = new iChart.Area2D({
render : 'canvasDiv',
data: data,
title : '北京2012年平均温度情况',
width : 800,
height : 400,
coordinate:{height:'90%',background_color:'#edf8fa'},
sub_option:{
hollow_inside:false,//设置一个点的亮色在外环的效果
point_size:10
},
labels:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
});
/**
*自定义组件,画平均线。
*/
chart.plugin(new iChart.Custom({
drawFn:function(){
/**
*计算平均值的高度(坐标Y值)
*/
var avg = 10/5,
coo = chart.getCoordinate(),
x = coo.get('originx'),
W = coo.get('width'),
S = coo.getScale('left'),
H = coo.get('height'),
h = (avg - S.start) * H / S.distance,
y = chart.y + H - h;
chart.target.line(x,y,x+W,y,2,'#b32c0d')
.textAlign('start')
.textBaseline('middle')
.textFont('600 12px Verdana')
.fillText('平均:$'+avg,x+W+5,y,false,'#b32c0d');
}
}));
chart.draw();
IMAGE_DATA = chart.toDataURL()
});
</script>
</head>
<body>
<div id='canvasDiv'></div>
<div class="gallery_too">
<a href="javascript: void(0);" title="download chart" target="_blank" download="chart.png" id="download_a">
<input id="download" type="button" class="gallery_check" value="导出图表" />
</a>
</div>
<div id="dialog-download" title="导出图片,请右键另存">
<img id="canvas_img" src="" alt="download" title="download"/>
</div>
<!--
<a id="ddd" href="" download="chart.png">ddd</a>
-->
<script type="text/javascript">
//$("#ddd").href=IMAGE_DATA;
var download = document.getElementById("download");
var download_a = document.getElementById("download_a");
var img = document.getElementById("canvas_img");
var a_ = document.getElementById("download_a");
$("#download").click(function(e) {
if (iChart.isChrome) {
a_.href = IMAGE_DATA;
} else {
img.src = IMAGE_DATA;
$("#dialog-download").dialog("open");
e.stopPropagation();
e.preventDefault();
}
});
$("#download").trigger("click"); //jquery 模拟执行一次点击行为
</script>
<div class='ichartjs_info'>
<span class='ichartjs_author'>writen by <a title="示例的贡献者" href="mailto:[email protected]">taylor</a></span>
<span class='ichartjs_btn' onmouseover="this.style.color='#2f99ff'" onmouseout="this.style.color='#0b2946'" onclick="window.top.viewCode(document);">预览代码</span>
<div class='ichartjs_sm'>说明</div>
<div class='ichartjs_details'>
这是一个面积图示例，该示例展示了北京2012年的平均温度情况。
</div>
<span class='ichartjs_sm'>备注：</span>
<span class='ichartjs_details'>
数据均为模拟。
</span>
</div>
</body>
</html>