http://blog.sina.com.cn/s/blog_4ca83f800101ewn5.html

 

我们知道,Chart有一个方法save可以将chart图表导出为图片,如:
var chart=('Ext.chart.Chart',{...});
chart.save({type: 'p_w_picpath/jpeg'});//导出为jpeg图片
对于全部英文字符数据的图表,这样是没有问题的。但是如果chart包含中文字符,则导出的图片上会出现乱码,中文都显示为方块( 方框,是字体设置没有对应的编码;问号,是Unicode-to-ANSI不支持。问号?的产生是因为Unicode到代码页转换失败)。

怎么办呢?没办法,跟踪代码吧、、所幸EXTJS文档还是蛮不错的。
Ext.chart.Chart.save的源码:

save:function(config){returnExt.draw.Surface.save(this.surface, config);}
Ext.draw.Surface.save 的源码:
save:function(surface, config){ config = config ||{};var exportTypes ={'p_w_picpath/png':'Image','p_w_picpath/jpeg':'Image','p_w_picpath/svg+xml':'Svg'}, prefix = exportTypes[config.type]||'Svg', exporter =Ext.draw.engine[prefix +'Exporter'];return exporter.generate(surface, config);}
看来关键是exporter这个对象了,在这里显然是ImageExporter对象,查看其属性,发现有一个属性defaultUrl为 "http://svg.sencha.io",而这个地址与使用save下载图片时显示的地址信息是一样的,于是大悟,原来是要把本地的数据发送到这个远程地址上的服务器进行处理的啊、、那如果把这个地址改成本地的呢??

那本地至少要搭建一个处理chart数据的服务器啊,数据是怎么处理后转化为图片的??

只能问谷老师了,,谷歌上搜索。。。功夫不负有心人,终于找到一个可行的办法:使用batik。它可以将图表的svg数据转换成图片。
使用spring mvc框架,在controller中添加处理svg数据的部分:
@RequestMapping(value="/svg",method=RequestMethod.POST)
 private void svgServer(HttpServletRequest request,HttpServletResponse response) throws IOException{
 String svgString = request.getParameter("svg");

 String type = request.getParameter("type");
 response.setContentType(type);
 String filename = new Date().toLocaleString().replace(" ","_")+"."+type.substring(6);
 response.setHeader("Content-disposition","p_w_upload;filename=" + filename);

 JPEGTranscoder t = new JPEGTranscoder();
 t.addTranscodingHint(JPEGTranscoder.KEY_QUALITY,new Float(.8));
 TranscoderInput input = new TranscoderInput(new StringReader(svgString));
 try {
 TranscoderOutput output = new TranscoderOutput(response.getOutputStream());
 t.transcode(input, output);
 response.getOutputStream().flush();
 response.getOutputStream().close();
 }catch (Exception e){
 response.getOutputStream().close();
 e.printStackTrace();
 }
 }
在页面上我们将Ext.chart.Chart.save替换为:
var mySave = function(surface, config) {
 config = config || {};
 var exportTypes = {
 'p_w_picpath/png': 'Image',
 'p_w_picpath/jpeg': 'Image',
 'p_w_picpath/svg+xml': 'Svg'
 },
 prefix = exportTypes[config.type] || 'Svg',
 exporter = Ext.draw.engine[prefix + 'Exporter']; 
 exporter.defaultUrl = '<%=basePath+"svg.do" %>';
 return exporter.generate(surface, config);
 };

 mySave(chart.surface,{
type: 'p_w_picpath/jpeg'
 });