.net 下新版highcharts本地导出图片bug处理

时间：2021-04-15 06:16:04

最近公司要用到highcharts这个插件来生成图表，所以我花了点时间研究了下。

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

.net 下新版highcharts本地导出图片bug处理

两个地方有点瑕疵。

左上角那东西是什么玩意。

我选择取消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 = ;

             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[, ];

                             xmln[, ] = xNod;

                             xmln[, ] = xNod2;

                             dic.Add(i, xmln);

                         }

                     }

                 }

                 else if (xmlvisibility != null && xmlvisibility.Value == "highcharts-tooltip")

                 {

                     XmlNode[,] xmln = new XmlNode[, ];

                     xmln[, ] = xml.FirstChild;

                     xmln[, ] = xNod;

                     dic.Add(i, xmln);

                 }

             }

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

                 a.Value[, ].RemoveChild(a.Value[, ]);

             }

             this.Svg = xml.OuterXml;

经测试，ok.

不知道还有没有其他办法解决，如果有，请告之。

刚开始研究highcharts 不知道支不支持在服务端传数据实体，直接在服务的生成图片。望大神赐教。

相关文章