当前位置:首页 > 开发 > Web前端 > 前端 > 正文

Anychart图表组件-Flash图转IMG普通图的方法

发表于: 2013-03-25   作者:白糖_   来源:转载   浏览:
摘要: 问题背景:项目使用的是Anychart图表组件,渲染出来的图是Flash的,往往一个页面有时候会有多个flash图,而需求是让我们做一个打印预览和打印功能,让多个Flash图在一个页面上打印出来。   那么我们打印预览的思路是获取页面的body元素,然后在打印预览界面通过$("body").append(html)的形式显示预览效果,结果让人大跌眼镜:Flash是

问题背景:项目使用的是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字符串过长也无法显示。

 

 

Anychart图表组件-Flash图转IMG普通图的方法

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
AnyChart除了常规图以外,还支持仪表图----表盘形、温度计类型等,我们在项目进度管理的统计中用到
AnyChart除了常规图以外,还支持仪表图----表盘形、温度计类型等,我们在项目进度管理的统计中用到
AnyChart除了常规图以外,还支持仪表图----表盘形、温度计类型等,我们在项目进度管理的统计中用到
今天给大家带来的是Anychart各种图的介绍,主要是教大家如何配出自己需要的图形出来。 柱状图(Colu
今天给大家带来的是Anychart各种图的介绍,主要是教大家如何配出自己需要的图形出来。 柱状图(Colu
今天给大家带来的是Anychart各种图的介绍,主要是教大家如何配出自己需要的图形出来。 柱状图(Colu
创建 AnyChart 模板的思路是分离图表设置和数据部分,然后将模板稍作改变就可以应用于另一个图表。
组件图是一个架构师在项目的初期就建立的非常重要的图,它的主要目的是显示系统组件间的结构关系 组
组件图的主要目的是显示系统组件间的结构关系。在 UML 1.1 中,一个组件表现了实施项目,如文件和可
仪表盘是商业智能领域必不可少的一个工具,然而大多数企业仪表盘目前仍然需要自定义创建。现在,Fla
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号