原創|其它|編輯:郝浩|2012-10-16 14:54:02.000|閱讀 430 次
概述:通過C#代碼寫出符合格式的AnyChart所需要的XML文件,并通過JavaScript綁定的內容
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
在上文《在.Net開發中使用AnyChart的簡單例子(上)》中我分析了AnyChart所需要的XML數據格式,這里就說說實現。
獲取了DataSet后,我通過下面的簡單算法寫出需要的XML格式。
/// <summary> /// 創建出XML文件 /// </summary> /// <param name="SeriesTypeNode">圖表類型</param> private void CreateXml(string SeriesTypeNode) { string CheckBuildingId = null; DataSet ds = new DataSet(); ds = GetDataSet(); XmlDocument XMLDoc = new XmlDocument(); XMLDoc.Load(Server.MapPath(@"/xml/anychart_try.xml")); //處理圖表類型 XmlNode seriesTypeNode = XMLDoc.SelectSingleNode(@"/anychart/charts/chart/data_plot_settings"); XmlElement chartSeriesTypeNode = (XmlElement)seriesTypeNode; chartSeriesTypeNode.SetAttribute("default_series_type", SeriesTypeNode); //查找data節點 XmlNode seriesNode = XMLDoc.SelectSingleNode(@"/anychart/charts/chart/data"); foreach (DataRow dr in ds.Tables[0].Rows) { if (CheckBuildingId == null) { CheckBuildingId = dr["BuildingId"].ToString(); XmlElement Series = XMLDoc.CreateElement("series"); Series.SetAttribute("name", dr["BuildingName"].ToString().Trim()); XMLDoc.DocumentElement.AppendChild(Series); seriesNode.AppendChild(Series); XmlElement Point = XMLDoc.CreateElement("point"); Point.SetAttribute("name", dr["Time"].ToString().Trim() + "點"); Point.SetAttribute("y", dr["TotalUse"].ToString().Trim()); Series.AppendChild(Point); } else if (CheckBuildingId == dr["BuildingId"].ToString()) { XmlNode pointNode = XMLDoc.SelectSingleNode(@"/anychart/charts/chart/data/series[last()]"); XmlElement Point = XMLDoc.CreateElement("point"); Point.SetAttribute("name", dr["Time"].ToString().Trim() + "點"); Point.SetAttribute("y", dr["TotalUse"].ToString().Trim()); pointNode.AppendChild(Point); } else if (CheckBuildingId != dr["BuildingId"].ToString()) { CheckBuildingId = dr["BuildingId"].ToString(); XmlElement Series = XMLDoc.CreateElement("series"); Series.SetAttribute("name", dr["BuildingName"].ToString().Trim()); XMLDoc.DocumentElement.AppendChild(Series); seriesNode.AppendChild(Series); XmlElement Point = XMLDoc.CreateElement("point"); Point.SetAttribute("name", dr["Time"].ToString().Trim() + "點"); Point.SetAttribute("y", dr["TotalUse"].ToString().Trim()); Series.AppendChild(Point); } } XMLDoc.Save(Server.MapPath(@"/xml/anychart_try1.xml")); }
這個方法帶有一個參數,目的的是接受按鈕傳來的報表類型。這里我預先制作了一個XML的模板,這樣在寫入數據的時候,就不用再去管別的元素了,直接找到data節點寫入數據即可。模板anyChart_try.xml內容如下:
<anychart> <charts> <chart plot_type="CategorizedVertical"> <data_plot_settings default_series_type="Spline"> <line_series> <tooltip_settings enabled="True" /> </line_series> </data_plot_settings> <data> </data> <chart_settings> <title> <text>能耗日表</text> </title> <axes> <y_axis> <title> <text>時間</text> </title> </y_axis> <x_axis> <labels align="Outside"/> <title> <text>用量</text> </title> </x_axis> </axes> </chart_settings> </chart> </charts> </anychart>
可以看到,data元素中間是空的,等待寫入內容。而series節點還未被寫入,每當增加一組數據(圖表上就是一條線或者一組柱子,或者餅的其中一塊,等等),就需要增加一個series節點。
整個流程就是:載入模板——找到data_plot_settings節點——寫入報表類型參數(報表類型的關鍵字參看安裝目錄anychart/help/xmlReference/index.html章節)——找到data節點——通過foreach把符合要求的DataSet數據按格式寫下來——保存XML文件。
這里有個地方要注意,循環中必須判斷接收的數據是不是屬于同一組的。是同一組的,就不必新建series元素,直接在最后的一個point后面新建一個點即可。我這里通過判斷BuildingId是否和上次載入的一樣來辨別這個問題。而事先DataSet中已經按照BuildingId進行了排序,同一個Id的數據都是貼放在一起的了。
這時,XML文件已經被寫好,等待綁定了。下面的方法把JavaScript寫入<body></body>中
/// <summary> /// 創建客戶端腳本,在頁面后面添加腳本 /// </summary> /// <param name="page">當前頁實例</param> /// <param name="scriptName">腳本名稱</param> /// <param name="script">要創建的腳本</param> public static void CreateStartupScript(Page page, string scriptName, string script) { Type cstype = page.GetType(); ClientScriptManager cs = page.ClientScript; if (!cs.IsStartupScriptRegistered(cstype, scriptName)) { cs.RegisterStartupScript(cstype, scriptName, script, true); } }
建立一個JavaScript字符串,調用創建XML和寫入js的方法,即可顯示
protected void Page_Load(object sender, EventArgs e) { string displayAnyChart = @" var chart = new AnyChart('./swf/AnyChart.swf'); "; displayAnyChart += "chart.width = 600;"; displayAnyChart += "chart.height = 400;"; displayAnyChart += "chart.setXMLFile('./xml/anychart_try1.xml');"; displayAnyChart += "chart.write();"; CreateStartupScript(this.Page, displayAnyChart, displayAnyChart); } protected void barChart_Click(object sender, EventArgs e) { CreateXml("Bar"); } protected void lineChart_Click(object sender, EventArgs e) { CreateXml("Spline"); }
顯示效果:
AnyChart是一個很優秀的報表控件,個人認為,其優缺點如下:
優點:顯示效果非常出眾,功能很多,運行速度也很快。使用XML作為數據源,Flash為載體,解決了跨平臺的問題。
缺點:價格實在是不便宜。但試用版除了有個水印之外,沒什么不同,看取舍了。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:CSDN