OWC ChartSpace 控件是微軟OWC庫中的一種ActiveX控件，主要是用于生成圖表。該控件既可以用于服務器端（生成圖片),也可以直接嵌入到客戶端(Winform或IE)中。說實話，在Asp.net生成圖表的方法很多，比如微軟的MSChart，圖既漂亮，且是原生的Dotnet代碼，為什么還要使用老古董的ActiveX控件呢？原因是ActiveX控件有更好的交互性，另外ChartSpace控件可以使用PivotTable控件作為數據源，從而自動生成相應的圖表，省了很多的代碼。

　　本文記述了我在使用ChartSpace控件過程中學習到的一些技術要點。

一. 和PivotTable控件關聯

　　ChartSpace可以直接將PivotTable控件作為數據源，這樣只要PivotTable控件的數據發生改變，圖表也會發生相應的必變。代碼如下：

　　chartSpace1.DataSource = pivotTable1;

　　在使用過程中，我發現了chartSpace的一個問題。如果PivotTable本身的數據源發生了改變，則ChartSpace的圖形顯示會不正常，它的坐標軸和圖例是正確的，但是卻沒相應的圖顯示出來。解決的辦法是先給ChartSpace控件的DataSource屬性賦一個空值，然后再次將PivotTable控件賦值給DataSource屬性。代碼如下：

　　chart.DataSource = NothingOfVb();   // vbs function
chart.DataSource = pvt;  

　　上面代碼中的函數NothingOfVb()是一個VBS函數，它返回一個值Nothing，代碼如下：

　　<script type="text/vbscript" language="vbscript">
        '
        ' 返回vb中的nothing值
        '
        function NothingOfVb()
            set NothingOfVb = nothing
        end function
       
</script> 

　　之所以搞的這么復雜，是因為如果直接給ChartSpace.DataSource賦一個null，將會拋出異常&ldquo;類型不匹配”。

二. 設置圖表的類型

　　ChartSpace控件提供了很多種圖表類型，具體的可以參考它的API手冊。常用的圖表類型如下：

　　this.chart.Charts.Item(0).Type = this.getChartType();

　　在使用過程中，有一個問題我至今沒有解決。如果圖表類型被設置餅圖，那么每次只能顯示第一個系列的數據，而實際會有多個系列的數據，我希望全部系列都顯示出來（多個餅圖的形式）或者通過代碼指定要顯示哪個系列的數據，可這兩點我都沒能做到。有知道怎么做的朋友麻煩告訴我一聲。

三. 設置圖表的外觀

　　圖表的外觀基本上都是通過ChInterior對象來設置的。

下列屬性返回 ChInterior 對象：
ChChart 對象的 Interior 屬性
ChChartDraw 對象的 Interior 屬性
ChartSpace 對象的 Interior 屬性
ChDataLabel 對象的 Interior 屬性
ChDataLabels 對象的 Interior 屬性
ChDropZone 對象的 ButtonInterior 屬性
ChDropZone 對象的 WatermarkInterior 屬性
ChLegend 對象的 Interior 屬性
ChPlotArea 對象的 Interior 屬性
ChPoint 對象的 Interior 屬性
ChSegmentBoundary 對象的 Interior 屬性
ChSeries 對象的 Interior 屬性
ChSurface 對象的 Interior 屬性
ChTitle 對象的 Interior 屬性

　　要設置拆線圖的顏色，則需要設置ChSeries.Line.Color的值。要設置餅圖的顏色，則要設置ChPoint.Interior返回的ChInterior對象的相關屬性的值。以下是我工程中的部分代碼：

　　設置圖表外觀 <／p>

1. // 柱狀圖
2. if(chartType == chConstants.chChartTypeColumnClustered){
3.     for(var i=0; i<this.chart.Charts(0).SeriesCollection.Count; i++){
4.         var series = this.chart.Charts(0).SeriesCollection(i);
5.         if(i < colors.length)
6.             series.Interior.SetSolid(colors[i]);
7.         else
8.             series.Interior.SetSolid(randColor());
9.                 
10.     }    
11. }       
12. // 折線圖
13. else if(chartType == chConstants.chChartTypeLine){
14.     for(var i=0; i<this.chart.Charts(0).SeriesCollection.Count; i++){
15.         var series = this.chart.Charts(0).SeriesCollection(i);
16.         if(i < colors.length)
17.             series.Line.Color = colors[i];
18.         else
19.             series.Line.Color = randColor();
20.     }    
21. }        
22. // 餅圖
23. else if(chartType == chConstants.chChartTypePie){            
24.     for(var i=0; i<this.chart.Charts(0).SeriesCollection.Count; i++){
25.         var points = this.chart.Charts(0).SeriesCollection(i).Points;
26.         for(var j=0; j < points.Count; j++){
27.             if(j<colors.length)
28.                 points(j).Interior.SetSolid(colors[j]);
29.             else
30.                 points(j).Interior.SetSolid(randColor());
31.         }
32.     }
33. }

四. 導出圖表

　　ChartSpace控件提供了一個名為ExportPicture(FileName, FilterName, Width, Height)的方法。從文檔上看，應該可以用這個方法導出為圖片，不過在實際用時卻總是報異常。

　　ChartSpace控件還有另一個方法GetPicture(FilterName, Width, Height)。這個方法可以獲得導出圖片的二進制數據。測試中，這個方法倒是沒問題，順利的獲得了結果，是一個整數所數組。在Vs2008的監視窗口中也可以看到數組的內容。但神奇的是，我沒有任何辦法用Javascript或Vbscrip去訪問數組的內容。經常一番Baidu，我找到了解決方案，使用MSXML2.DOMDocument。這是一個比較奇特折方法

1. var data = this.chart.GetPicture('GIF',800,600);
2.                 
3.         var doc = new ActiveXObject('MSXML2.DOMDocument');
4.         doc.loadXML("<xml xmlns:dt='urn:schemas-microsoft-com:datatypes'></xml>");        
5.         var node = doc.createElement("file1");
6.         node.dataType = "bin.base64";
7.         node.nodeTypedValue = data;
8.         doc.documentElement.appendChild(node);

　　基本斷路是使用MSXML2.DOMDocument將二進制數組轉換成base64編碼的字符串，編碼之后就可以通node.text屬性獲得結果。那么這個字符串如何保存為圖片呢？我的解決方案是將它提交給服務器，然后解碼回二進制再作為圖片發送回客戶端。顯然，因為數據量的關系，提交時只能使用POST方式了。

1. // 使用一個臨時窗體將數據提交給服務器，并顯示服務器返回的圖片
2.         var form = '<form action="PivotManager.aspx" name="form1" method="POST" style="visibility:hidden">' +
3.                      '<input type="hidden" name="chart1" id="chart1" value="{0}" />' +
4.                      '<input type="submit" value="exportChart" id="exportChart" name="exportChart"/>' +
5.                      '</form>';
6.         var script = '<script language="javascript">document.form1.exportChart.click();</script>';
7.         
8.         form = String.format(form,node.text);
9.                 
10.         var win = window.open("");
11.         win.document.write(form);
12.         win.document.write(script);

　　其中的String.format函數是Ext提供的，它的功能類似于C#中的Format函數。對應的服務器端代碼如下：

1. var buffer = Convert.FromBase64String(Request.Form["chart1"]);
2.             Response.Clear();
3.             Response.ContentType = "image/gif";
4.             Response.AddHeader("Content-Disposition", "attachment;filename=chart.gif");
5.             Response.OutputStream.Write(buffer, 0, buffer.Length);
6.             Response.End();

　　整個過程是比較神奇的，先從ChartSpace中獲取數據，編碼后再提交給服務器，服務解碼后再發送回客戶端，真是無端的增加了服務器的負荷。