彩票走势图

.NET下Highcharts本地导出图片问题分析及解决

转帖|使用教程|编辑:龚雪|2014-07-30 10:36:25.000|阅读 1322 次

概述:本文讲解使用Highcharts最新的版本4.03,解决其在.net下本地导出图片出现BUG的问题,在分析中有提供效果图和代码,遇到此类问题的朋友或是想研究Highcharts的朋友,可以参考。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

现在Highcharts最新的版本是4.03,这JavaScript插件居多优点就不比多说了(Highcharts插件下载),demo官网上也很详细。但是优点不爽的地方是,导出图片这个功能是通过请求官网的服务器地址下载的,这个就有点不爽了,因为很多系统要求的环境是不联网就能使用的,本人英语很挫,开始不知道官网的下载页面,下面会提供第三方的解决办法,自己在Google大神上面找了很久,最后找到了一个外国人写的一Demo,Highcharts-export-module-asp.net-master.zip 。当时,心中窃喜,踏破铁鞋无觅处,得来全不费工夫,果断下载,看效果。

.net下highcharts本地导出图片问题修复

    两个地方有点瑕疵。

  • 左上角那东西是什么玩意。
  • 我选择取消Tokyo的导出,居然还是有四条线。

    咋办?!不能用。

    先试试连官网导出有木有同样的问题,结果官网一切ok.

    然后Google下,没有发现有人遇到同样的情况。So…..自己分析。

  1. 先看看请求的数据是不是一样的,先用本地的导出服务,记录下请求的参数。
  2. 在把请求改成官网的地址,记录下参数,一对比,一样的。
  3. 既然参数一样,那就试试不同的情况,先把所有的线都导出,记录参数,然后去掉一根线,导出,记录下参数。

这里发现了内容有些不一样:    ;   

所有线导出,在svg这里xml里,有个 class="highcharts-series-group"的g 节点下面的子节点g 的属性 visibility="visible",而去掉一根线的话,这个值是hidden,ok这里的问题找到了,第三方的Demo对这个属性没有做区分处理。

    还有一个bug,经分析得知,那是属性class="highcharts-tooltip"的g节点,这个分析没有其他办法,只有一个个节点去删,然后保存看效果。

    OK!!!

    所有问题都已找到,下面要做的无非就是对xml做筛选,然后remove掉这几个特殊属性的节点,代码如下:

    在Tek4.Highcharts.Exporting. Exporter下的CreateSvgDocument

方法中增加如下代码:

XmlDocument xml = new XmlDocument();

             xml.LoadXml(this.Svg);
 
              XmlNodeList nodeListAllg = xml.GetElementsByTagName("g");
  
              Dictionary<int, XmlNode[,]> dic = new Dictionary<int, XmlNode[,]>();
 
             int i = 0;
 
             foreach (XmlNode xNod in nodeListAllg)
 
            {
 
               i++;
 
                 XmlNode xmlvisibility = xNod.Attributes.GetNamedItem("class");
 
                 if (xmlvisibility != null && xmlvisibility.Value == "highcharts-series-group")
 
                 {
 
 
 
                    foreach (XmlNode xNod2 in xNod.ChildNodes)

                     {
 
                         i++;
 
                         XmlNode xmlvisibility1 = xNod2.Attributes.GetNamedItem("visibility");

                       if (xmlvisibility1 != null && xmlvisibility1.Value == "hidden")
 
                         {

                             XmlNode[,] xmln = new XmlNode[1, 2];
 
                            xmln[0, 0] = xNod;

                             xmln[0, 1] = xNod2;
 
                             dic.Add(i, xmln);
 
                         }
 
                     }
 
                 }
 
                 else if (xmlvisibility != null && xmlvisibility.Value == "highcharts-tooltip")
 
                 {
 
                     XmlNode[,] xmln = new XmlNode[1, 2];
 
                    xmln[0, 0] = xml.FirstChild;
 
                     xmln[0, 1] = xNod;
 
                     dic.Add(i, xmln);
 
                 }

  

             }
 
            foreach (KeyValuePair<int, XmlNode[,]> a in dic) {

                 a.Value[0, 0].RemoveChild(a.Value[0, 1]);
 
             }
   

             this.Svg = xml.OuterXml;

相关教程:


标签:JavaScript HTML5图表.NEThighcharts

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP