问题背景:项目使用的是Anychart图表组件,渲染出来的图是Flash的,往往一个页面有时候会有多个flash图,而需求是让我们做一个打印预览和打印功能,让多个Flash图在一个页面上打印出来。
那么我们打印预览的思路是获取页面的body元素,然后在打印预览界面通过$("body").append(html)的形式显示预览效果,结果让人大跌眼镜:Flash是有的,但是一直在提醒“waiting for data”,不显示图。
分析原因:我们抓取了body内的html元素,发现是有出Flash的标签的,页面能显示无图形的FLash,但是Anychart在显示Flash之后还会将图数据调用某个方法才会出真正的图形。
那么如何解决打印预览没有图形的问题呢,我们最初是考虑在打印预览重新用new AnyChart(xml)的形式出真正的Flash,但是这种开发代价是很高的,因为打印预览是一个公共组件,我们不可能为了一个Flash图表做专项开发,还有可能造成更多的BUG。
后来在查看Anychart官方文档的时候,偶然看到这样一个内容“Saving chart as image or vector file”,中间有一段这样的内容:anychart的getPNG()函数可返回带有png图像的base64编码的字符串。你可以通过这些字符串获取图像,并把字符串传到脚本。
去网上搜了下base64编码,发现可以通过IMG标签的SRC传入base64字符串就能出PNG图形,于是乎我这样测试了一下,发现通过这样的方式果断出现了HTML格式的图。
var base64 = chart.getPNG(); $("#img").append("<img src='data:image/gif;base64,"+base64 +"'>");
注:IE7及更早浏览器版本不支持base64,即在这些浏览器下图片依然是一个小红X!
IE8虽然一定程度支持base64,但是如果base64字符串过长也无法显示。
相关推荐
shotgraph图表组件 This software is shareware, but you can copy and use the unregistered version for free (for non-commercial usage only). The free (unregistered) copy of ShotGraph has the following ...
作品名称:Axure数据可视化图表组件库 作品类型:组件类 主要适用:Web端 软件版本:Axure 8.0 一套数据可视化图表通用组件库,主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成,其中包含了几十种...
asp图表--生成各种图表asp图表--生成各种图表asp图表--生成各种图表asp图表--生成各种图表
组件方式开发 Web App全站\第04章 图表组件-散点图组件开发
Excel模板18-图表模板-组合图-折线柱形图.zip
D3图表示例-线型图表面型图表柱状图表
本实例在IE6、IE7、IE8、Chrome、Firefox测试通过,在实际项目使用中,对可能出现的问题,尤其在IE6中无法显示flash图表,本人特撰写《Flash图表组件——使用Open Flash Chart 2.0的一些问题及解决办法》,具体访问...
全新开发的统计图表组件--ibqsChart,使用简单,功能强大,制作统计图效果极佳。 本组件支持多种样式图表,包括柱型图、横柱型图、曲线图、饼图、点图、区域图、雷达图。 组件图表提供两种输出接口,包括保存,...
EXCEL报表折线柱形图-18-图表模板-组合图-折线柱形图.xlsx
图表模板-组合图-折线柱形图HR精选图表模板.xlsx
微信小程序F2自定义图表组件f2-canvas-master.zip
图表模板-组合图-折线柱形图.zip
Android-AnyChart-Android.zip,安卓图表是一个令人惊叹的数据可视化库,可以在安卓应用程序中轻松创建交互式图表。它运行在api 19 (android 4.4)上,具有数十种内置图表类型。,安卓系统是谷歌在2008年设计和制造的...
LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 - Axure数据可视化图表组件库(AxureUX整理) LIB008 -...
AnyChart图表个人总结,学习了一周,个人作的一个总结文档,希望对大家有用。
适合uni-app 使用的echarts图表组件,开箱即用!
微信小程序图表组件 wx-charts-master js代码支持微信小程序开发