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

　　本文記述了我在使用ChartSpace控件過(guò)程中學(xué)習(xí)到的一些技術(shù)要點(diǎn)。

一. 和PivotTable控件關(guān)聯(lián)

　　ChartSpace可以直接將PivotTable控件作為數(shù)據(jù)源，這樣只要PivotTable控件的數(shù)據(jù)發(fā)生改變，圖表也會(huì)發(fā)生相應(yīng)的必變。代碼如下：

　　chartSpace1.DataSource = pivotTable1;

　　在使用過(guò)程中，我發(fā)現(xiàn)了chartSpace的一個(gè)問(wèn)題。如果PivotTable本身的數(shù)據(jù)源發(fā)生了改變，則ChartSpace的圖形顯示會(huì)不正常，它的坐標(biāo)軸和圖例是正確的，但是卻沒(méi)相應(yīng)的圖顯示出來(lái)。解決的辦法是先給ChartSpace控件的DataSource屬性賦一個(gè)空值，然后再次將PivotTable控件賦值給DataSource屬性。代碼如下：

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

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

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

　　之所以搞的這么復(fù)雜，是因?yàn)槿绻苯咏oChartSpace.DataSource賦一個(gè)null，將會(huì)拋出異常“類型不匹配”。

二. 設(shè)置圖表的類型

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

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

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

三. 設(shè)置圖表的外觀

　　圖表的外觀基本上都是通過(guò)ChInterior對(duì)象來(lái)設(shè)置的。

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

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

　　設(shè)置圖表外觀 <／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. }

四. 導(dǎo)出圖表

　　ChartSpace控件提供了一個(gè)名為ExportPicture(FileName, FilterName, Width, Height)的方法。從文檔上看，應(yīng)該可以用這個(gè)方法導(dǎo)出為圖片，不過(guò)在實(shí)際用時(shí)卻總是報(bào)異常。

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

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將二進(jìn)制數(shù)組轉(zhuǎn)換成base64編碼的字符串，編碼之后就可以通node.text屬性獲得結(jié)果。那么這個(gè)字符串如何保存為圖片呢？我的解決方案是將它提交給服務(wù)器，然后解碼回二進(jìn)制再作為圖片發(fā)送回客戶端。顯然，因?yàn)閿?shù)據(jù)量的關(guān)系，提交時(shí)只能使用POST方式了。

1. // 使用一個(gè)臨時(shí)窗體將數(shù)據(jù)提交給服務(wù)器，并顯示服務(wù)器返回的圖片
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函數(shù)是Ext提供的，它的功能類似于C#中的Format函數(shù)。對(duì)應(yīng)的服務(wù)器端代碼如下：

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();

　　整個(gè)過(guò)程是比較神奇的，先從ChartSpace中獲取數(shù)據(jù)，編碼后再提交給服務(wù)器，服務(wù)解碼后再發(fā)送回客戶端，真是無(wú)端的增加了服務(wù)器的負(fù)荷。