首页 > 其他 > 详细

highchart不依赖插件的图表导出

时间:2017-04-05 11:35:59      阅读:223      评论:0      收藏:0      [点我收藏+]

关键步骤:

1.获取svg,并转化为base64编码;

var svg = $(‘.highcharts-container‘).html();
var image = new Image();
//将svg通过base64编码转为图片对象
image.src = ‘data:image/svg+xml;base64,‘ + window.btoa(unescape(encodeURIComponent(svg)));

2.通过canvas转为图片并下载;

var context = canvas.getContext(‘2d‘);  //取得画布的2d绘图上下文
context.drawImage(image, 0, 0);

var a = document.createElement(‘a‘);
a.href = canvas.toDataURL(‘image/png‘); //将画布内的信息导出为png图片数据
a.download = "MapByMathArtSys"; //设定下载名称

注:图片图标在图表中仍然是原格式,所以不会被转化。需要单独在canvas中绘制;
eg:
var icon = new Image();
icon.src=$(".highcharts-container svg image").attr("href");
//计算图标的位置
var icon_x=parseFloat($(".highcharts-container svg image").attr("x"))+parseFloat($(".highcharts-plot-background").attr("x"))-parseFloat(icon.width)/2;
var icon_y=parseFloat($(".highcharts-container svg image").attr("y"))+parseFloat($(".highcharts-plot-background").attr("y"))-parseFloat(icon.height)/2;

context.drawImage(icon, icon_x, icon_y);

highchart不依赖插件的图表导出

原文:http://www.cnblogs.com/huixing-zxy/p/6667959.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!