标签归档：highcharts

Highcharts导出gb2312乱码问题

8条回复

Highcharts是utf-8编码的，其本地的.net导出环境也是utf-8格式的，导致网页如果采用gb2312编码，显示正常，导出就乱码了。这种现象也同样经常出现在ajax的使用过程中。

ajax中一般的解决办法就是将中文等非英文的字符进行escape编码，再由后端模拟unescape解码，以避免编码的问题。跟着这个思路修改以解决Highcharts的导出乱码问题。同时为了配合后端简化，我使用了encodeURIComponent去编码。

由于需要在提交之前进行编码，那么我们需要修改Highcharts的导出文件的源码，你需要慎重考虑下。

1.前端

我们修改js/modules/exporting.src.js中的Highcharts.post方法：

	// add the data
	for (name in data) {
		createElement('input', {
			type: HIDDEN,
			name: name,
			value: encodeURIComponent(data[name])//here we add escape for all value
		}, null, form);
	}

修改上面的代码，在value的值前全部加上encodeURIComponent的编码方法。

2.后端

我们修改项目中的Exporter.cs，在class Exporter下增加下面的函数，并将接收的参数进行编码：

    /// <summary>
    /// Unescape for javascript escape. Return string;
    /// </summary>
    public static string UnEscape(string str)
    {
        return HttpUtility.UrlDecode(str);
    }

    //在Exporter中我们同样要修改如下
    //unescape all arguments
    string extension;
    fileName = UnEscape(fileName);
    this.ContentType = UnEscape(type).ToLower();
    this.Name = fileName;
    this.Svg = UnEscape(svg);

保存，生成，将生成的dll文件覆盖现在使用的，再次导出基本上可以解决乱码的问题。

其他说明

1.由于使用的是HttpUtility.UrlDecode()方法，如果你传递前没有encodeURIComponent，且编码就为utf-8，那么导出也是正常的；

2.没有经过大数据的测试，用于正式项目前建议您先测试下；

3.压缩包：http://pan.baidu.com/share/link?shareid=1309032918&uk=352812205

4.由于使用了编码，因此导出的文件名也是可以被指定为中文的；

5.导出文件的width必须被指定，否则导致导出出错，待修复。

压缩包中的版本已经修复的问题：

1.未选中项目导出时未被忽略，描述：http://www.cnblogs.com/youngerliu/p/3177252.html

2.网页为gb2312，导出时中文乱码问题。

highcharts的.net本地导出环境安装记录

发表评论

由于项目中highcharts需要内网使用，需要本地搭建导出的环境。下面简述下步骤：

1.下载开源的.net导出文件：https://github.com/imclem/Highcharts-export-module-asp.net

2.新建虚拟站点，IIS下配置如图：（注意端口设定：80端口已经用了，就设定为8081；应用池的设定，仅支持framework3.5以上版本）

20130803162202

3.拷贝下载的压缩包中的Exporting_Demo_website文件夹下的文件到新站点的目录下。删除目录下的web.config文件，重命名web-dotNET4.0.config为web.config。（不需要Exporting_Demo_website这个文件夹，文件放在根目录下即可，否则后面的操作全部要加上这个路径）

4.打开站点http://localhost:8081/访问，内置一个Demo，选择导出，看是否正常。正常即完成。不正常就需要修正了。

访问Demo时出现500错误？

打开IIS管理器，选择“ISAPI和CGI限制”，里面找到我们上面设置的framework的版本，设定为允许。

关于未选中的数据线导出时依然显示的BUG

BUG描述及修复，请参见http://www.cnblogs.com/youngerliu/p/3177252.html

需要修改的地方是在Exporter.cs的CreateSvgDocument方法

private SvgDocument CreateSvgDocument()<br />    {<br />      SvgDocument svgDoc;<br /><br />      XmlDocument xml = new XmlDocument();<br />      xml.LoadXml(this.Svg);<br />      XmlNodeList nodeListAllg = xml.GetElementsByTagName("g");<br />      Dictionary&lt;int, XmlNode[,]&gt; dic = new Dictionary&lt;int, XmlNode[,]&gt;();<br />      int i = 0;<br />      foreach (XmlNode xNod in nodeListAllg)<br />      {<br />          i++;<br />          XmlNode xmlvisibility = xNod.Attributes.GetNamedItem("class");<br />          if (xmlvisibility != null &amp;&amp; xmlvisibility.Value == "highcharts-series-group")<br />          {<br />              foreach (XmlNode xNod2 in xNod.ChildNodes)<br />              {<br />                  i++;<br />                  XmlNode xmlvisibility1 = xNod2.Attributes.GetNamedItem("visibility");<br />                  if (xmlvisibility1 != null &amp;&amp; xmlvisibility1.Value == "hidden")<br />                  {<br />                      XmlNode[,] xmln = new XmlNode[1, 2];<br />                      xmln[0, 0] = xNod;<br />                      xmln[0, 1] = xNod2;<br />                      dic.Add(i, xmln);<br />                  }<br />              }<br />          }<br />          else if (xmlvisibility != null &amp;&amp; xmlvisibility.Value == "highcharts-tooltip")<br />          {<br />              XmlNode[,] xmln = new XmlNode[1, 2];<br />              xmln[0, 0] = xml.FirstChild;<br />              xmln[0, 1] = xNod;<br />              dic.Add(i, xmln);<br />          }<br />      }<br />      foreach (KeyValuePair&lt;int, XmlNode[,]&gt; a in dic)<br />      {<br />          a.Value[0, 0].RemoveChild(a.Value[0, 1]);<br />      }<br /><br />      this.Svg = xml.OuterXml;<br /><br />      // Create a MemoryStream from SVG string.<br />      using (MemoryStream streamSvg = new MemoryStream(<br />        Encoding.UTF8.GetBytes(this.Svg)))<br />      {<br />        // Create and return SvgDocument from stream.<br />        svgDoc = SvgDocument.Open(streamSvg);<br />      }<br /><br />      // Scale SVG document to requested width.<br />      svgDoc.Transforms = new SvgTransformCollection();<br />      float scalar = (float)this.Width / (float)svgDoc.Width;<br />      svgDoc.Transforms.Add(new SvgScale(scalar, scalar));<br />      svgDoc.Width = new SvgUnit(svgDoc.Width.Type, svgDoc.Width * scalar);<br />      svgDoc.Height = new SvgUnit(svgDoc.Height.Type, svgDoc.Height * scalar);<br /><br />      return svgDoc;<br />    }

注意：复制上面博客中的代码时，需要在项目中引入相关的文件，如图

20130803163428

这里我已经生成，没有环境的朋友可以直接到这里下载：http://pan.baidu.com/share/link?shareid=1300438122&uk=352812205（下载后直接把Bin目录下的4个文件覆盖掉项目Bin文件夹下的4个文件）

生成时出现“不是标准win32文件”

菜单栏—工具—导入与导出设置—重置所有设置—下一步。完成后重新生成，依然无效，只有重启电脑（我是重启电脑解决的）。

外部调用地址

在你的文档里面增加设定，width为必须项，否则报错

exporting: {<br />                url: 'http://localhost:8081/HighchartsExport.axd',<br />                filename: 'MyChartX',<br />                width: 1200//必选参数<br />            }

win2003 server配置时出现500错误

注意开启IIS的写权限，因为highcharts的导出代码可能较大，所以导出使用的是上传文件流的方式，具体可参考exporting.src.js源码。另外在正式服中配置时特别注意端口冲突及framework的版本问题（如果选择4.0以上版本，需要修改web.config，上面有提到），建议先找个win2003的测试服试试！

导出Pie图形时无数据的问题

此问题来自：http://www.cnblogs.com/wxmxiaoming/articles/3522468.html，jucelin没有验证，供参考。

080940233723150

解决方法：

从以下地址下载Svg.dll文件覆盖Bin目录下对应的文件即可（两个文件虽然版本一样，但是MD5值不一样）；

http://svg.codeplex.com/