最近公司要用到highcharts這個插件來生成圖表，所以我花了點時間研究了下。
現在最新的版本是3.0.2，這js插件居多優點就不比多說了，demo官網上也很詳細。但是優點不爽的地方是，導出圖片這個功能是通過請求官網的服務器地址下載的，這個就有點不爽了，因為很多系統要求的環境是不聯網就能使用的，本人英語很挫，開始不知道官網的下載頁面，下面會提供第三方的解決辦法，自己在Google大神上面找了很久，最后找到了一個外國人寫的一Demo，Highcharts-export-module-asp.net-master.zip 。當時，心中竊喜，媽的踏破鐵鞋無覓處，得來全不費工夫，果斷下載，看效果。
兩個地方有點瑕疵。
左上角那東西是什么玩意。
我選擇取消Tokyo的導出，居然還是有四條線。
咋辦？！不能用。
先試試連官網導出有木有同樣的問題，結果官網一切ok.
然后Google下，沒有發現有人遇到同樣的情況。So…..自己分析。
- 先看看請求的數據是不是一樣的，先用本地的導出服務，記錄下請求的參數。
- 在把請求改成官網的地址，記錄下參數，一對比，一樣的。
- 既然參數一樣，那就試試不同的情況，先把所有的線都導出，記錄參數，然后去掉一根線，導出，記錄下參數。
這里發現了內容有些不一樣:
所有線導出，在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
方法中增加如下代碼：
1 XmlDocument xml = new XmlDocument(); 2 3 xml.LoadXml(this.Svg); 4 5 XmlNodeList nodeListAllg = xml.GetElementsByTagName("g"); 6 7 Dictionary<int, XmlNode[,]> dic = new Dictionary<int, XmlNode[,]>(); 8 9 int i = 0; 10 11 foreach (XmlNode xNod in nodeListAllg) 12 13 { 14 15 i++; 16 17 XmlNode xmlvisibility = xNod.Attributes.GetNamedItem("class"); 18 19 if (xmlvisibility != null && xmlvisibility.Value == "highcharts-series-group") 20 21 { 22 23 24 25 foreach (XmlNode xNod2 in xNod.ChildNodes) 26 27 { 28 29 i++; 30 31 XmlNode xmlvisibility1 = xNod2.Attributes.GetNamedItem("visibility"); 32 33 if (xmlvisibility1 != null && xmlvisibility1.Value == "hidden") 34 35 { 36 37 XmlNode[,] xmln = new XmlNode[1, 2]; 38 39 xmln[0, 0] = xNod; 40 41 xmln[0, 1] = xNod2; 42 43 dic.Add(i, xmln); 44 45 } 46 47 } 48 49 } 50 51 else if (xmlvisibility != null && xmlvisibility.Value == "highcharts-tooltip") 52 53 { 54 55 XmlNode[,] xmln = new XmlNode[1, 2]; 56 57 xmln[0, 0] = xml.FirstChild; 58 59 xmln[0, 1] = xNod; 60 61 dic.Add(i, xmln); 62 63 } 64 65 66 67 } 68 69 foreach (KeyValuePair<int, XmlNode[,]> a in dic) { 70 71 a.Value[0, 0].RemoveChild(a.Value[0, 1]); 72 73 } 74 75 76 77 this.Svg = xml.OuterXml; 78 79
經測試，ok.
不知道還有沒有其他辦法解決，如果有，請告之。
剛開始研究highcharts 不知道支不支持在服務端傳數據實體，直接在服務的生成圖片。望大神賜教。