关于highcharts图表导出中文乱码以及采用post提交产生页面跳转问题

面对highcharts图表组件的默认图表导出方式很多人估计都吐槽很多,尤其是对于使用中文的国人来说,为什么这样说呢?原因就一下几点:

1、因为图表内只要包含有中文字符,利用默认导出服务器页面http://export.highcharts.com是没有考虑对中文字符的处理,所以结果是可想而知的,导出的图表内中文会出现乱码。

2、通过查看exporting.js源码不难发现图表导出其实就是post数据至服务页面http://export.highcharts.com的,这种post方式会产生页面跳转,细心的用户可能都发现了这个闪屏的问题,当我们导出图表的时候页面刷新了一下,其实它是在服务页面做了返回页面的处理。

这个问题会导致什么样的后果呢?

当我们的页面有多个图表的时候,我们想统一封装一个图表导出的方法,只要点击一个按钮就导出页面内所有的图表,我们这个时候定然会通过

chart.exportChart({
                        type: 'image/png',
                         filename: 'mychart'
                   });

这样的多个导出调用方式进行,当执行第一个的时候页面产生了刷新就无法第二个图表的导出操作了。悲剧再次出现!

基于以上两大点的情况,所以我们不得不做出决定性的改变:

1、自己编写图表导出的服务页面,通过观察前端post数据值至服务页面莫过于四个重点参数:

type: 'image/png', 
filename: 'MyChartTest', 
width: 400, 
svg: chart.getSVG()

关于asp.net环境下的图表导出服务页面的示例本站已经有了的,请参考:highcharts图表入门之高级篇:如何自己编写图表保存服务页面实现highcharts任意保存在任何位置(asp.net版本),且有源码供下载!


2、摒弃掉highcharts默认的post方式,基于highcharts引入了jQuery,所以我们索性就采用jQuery内的异步post提交数据的方式,示例代码如下所示:

wKiom1Z5CTewuon5AAC1QIA1XKI372.png

注释中讲解的很是详细!这样一来我们就可以在jQuery内进行多个图表的post提交,且不会出现页面刷新。

这样一来,highcharts图表导出刷新和中文乱码问题就会彻底解决了!

后话:

1、如果按照上面的方法图表导出还是不行,请确认目前的highcharts.js版本是否为最新版!

本文转自:http://www.stepday.com/topic/?725

感谢作者分享!

你可能感兴趣的:(Highcharts)