【TeeChart .NET教程】(九)ASP.NET應用程序
【下載TeeChart.Net最新版本】
WebForms
TeeChart通過WebChart TeeChart Control 集成用于WebForms,可以在標準TeeChart.NET安裝中的ToolBox中找到WebChart。
1.1 將圖表添加到表單
- 從ToolBox中選擇WebChart組件并將其拖到WebForm上并拖出到size
- 右鍵單擊圖表以選擇“Edit...”選項并打開圖表編輯器
- 使用圖表編輯器,可以使用圖表編輯器和屬性選項,添加和修改系列和軸以及圖表設計的其他特征。
圖表編輯器提供了為運行時配置圖表的大多數(shù)方面的選項,設置保存在WebForm中,有關圖表編輯器的一般用法,請參閱教程1和2,使用WebChart的編輯器在所有方面與基于Windows窗體的圖表的使用相同。
1.2 圖像格式(PictureFormat)
WebChart在WebForm上呈現(xiàn)為圖像,默認格式為PNG,但可以通過Properties Windows中的PictureFormat屬性進行更改。為了與網(wǎng)頁兼容,我們建議使用PNG,JPEG或GIF格式,但Internet Explorer瀏覽器也支持Bitmap。使用GIF圖像格式,GIF使用256色減少,因此對于全色再現(xiàn),建議您使用其他圖像格式之一。
*注意:對GIF圖像格式的使用需要授權。
1.3 TempChart屬性
TempChart屬性可用于選擇在創(chuàng)建之后和瀏覽器頁面上顯示之前應如何存儲臨時圖表,有4種可用設置:
- File
- Session
- Cache
- Httphandler
Performance類似于所有緩存技術,但磁盤性能可能會影響正面或負面使用'File'選項來生成TempChart,使'File'可以是最快的選項。
File:如果要將臨時文件寫入磁盤,則應使用“File”設置。默認情況下,安裝TeeChart時,它會創(chuàng)建具有臨時文件位置和等效虛擬文件夾名稱的注冊表項,關鍵如下:
[HKEY_LOCAL_MACHINE \ SOFTWARE \ Steema Software \ TeeChart.NET] “VirtualShare”=“/ TeeChartForNET” “ShareFolder”=“C:\\ Program Files \\ Steema Software \\ TeeChart for .NET v3 \\ TeeChartForNET”
如果接受默認安裝位置,則上述設置將在標準英語語言機器中創(chuàng)建。TeeChartNET虛擬文件夾由TeeChart安裝程序創(chuàng)建,如果創(chuàng)建必要的IIS虛擬共享位置以反映新的注冊表值,則可以更改這些注冊表設置。WebChart將文件保存到ShareFolder注冊表項中指定的文件夾下名為_Chart_tmp的文件夾中,TeeChart不會刪除臨時文件,但可以自動包含一個實用程序作為Windows計劃任務,請使用當前版本檢查TeeChart。
Session:是臨時文件存儲的設置,它不會在磁盤上留下任何文件并刪除其自己的緩存內(nèi)存文件。在某些情況下,它比臨時磁盤文件稍慢,要使用Session變量成功運行Chart,必須滿足兩個條件:
- 必須為應用程序啟用會話。'Enabled'是默認行為,可以在項目web.config文件中檢查:
< sessionState mode =“InProc”
InProc是默認設置,表示為此應用程序啟用了Session。 - 包含一個aspx腳本模塊來從內(nèi)存中檢索圖表,aspx腳本的名稱應該稱為'GetChart'。TeeChart提供的WebForm ASP.NET示例中包含一個示例。要從頭開始創(chuàng)建一個新的GetChart模塊,請將新的WebForm添加到項目中(也可以是任何aspx文件),將其命名為“GetChart”,并將以下代碼添加到Page_Load事件中:GetChart.aspx.cs
private void Page_Load(object sender, System.EventArgs e) { string chartName=Request.QueryString["Chart"]; if (Session[chartName]!=null) { System.IO.MemoryStream chartStream = new System.IO.MemoryStream(); chartStream=((System.IO.MemoryStream)Session[chartName]); Response.ContentType = "image/" + "png"; Response.OutputStream.Write(chartStream.ToArray(),0,(int)chartStream.Length); chartStream.Close(); Session.Remove(chartName); } }
該腳本恢復了WebChart先前保存到會話緩存的圖表,該腳本將圖表返回給瀏覽器并將其從緩存中刪除。
Cache:在設置中與會話圖緩存選項非常相似,'Cache'是一個實用的選項,因為它使用屬于ASP.NET WebForm頁面的Cache對象,因此很容易出現(xiàn)在大多數(shù)ASP.NET應用程序配置中,而'Session'容易受到某些Web服務器的管理限制(即,出于安全原因,管理員已選擇禁用會話支持),緩存選項需要使用GetChart.aspx文件。
包含一個aspx腳本模塊來從內(nèi)存中檢索圖表,aspx腳本的名稱應該稱為'GetChart'。TeeChart提供的WebForm ASP.NET示例中包含一個示例。要從頭開始創(chuàng)建一個新的GetChart模塊,請將新的WebForm添加到項目中(也可以是任何aspx文件),將其命名為“GetChart”,并將以下代碼添加到Page_Load事件中:GetChart.aspx.cs
private void Page_Load(object sender,System.EventArgs e) { string chartName = Request.QueryString [“Chart”]; if(Page.Cache [chartName]!= null) { MemoryStream chartStream = new MemoryStream(); chartStream =((MemoryStream的)Page.Cache [chartName]); Response.ContentType =“image /”+“png”; Response.OutputStream.Write(chartStream.ToArray(),0,(INT)chartStream.Length); chartStream.Close(); } }
該腳本恢復了WebChart先前保存到頁面緩存的圖表,該腳本將圖表返回給瀏覽器并將其從緩存中刪除。
Httphandler:使用內(nèi)部TeeChart(WebChart)生成器來恢復頁面的圖表圖像,該選項不生成臨時文件,并且不需要額外的aspx文件來恢復圖表(如會話和緩存選項的情況)。該選項需要對web.config文件進行一次修改: VSNet 2010之前的早期版本VSNET。在web.config tages之間的任何位置放置以下部分:
<system.web> <httpHandlers> <add verb =“*”path =“TeeChartImgGen.ashx”type =“Steema.TeeChart.Web.TeeChartImgGen,TeeChart”/> </ httpHandlers> /*..content cut for brief。 。* / </system.web>
VSNET的后續(xù)版本,VSNET2010 +:
<system.webServer> <handlers> <add name="TeeChartHandler" verb="*" path="TeeChartImgGen.ashx" type="Steema.TeeChart.Web.TeeChartImgGen, TeeChart"/> </handlers> /*..content cut for brevity ..*/ </system.webServer>
*注意。使用TeeChart.Standard.dll時,請在teechart.standard的末尾替換“TeeChart”。
<add name =“TeeChartHandler”verb =“*”path =“TeeChartImgGen.ashx”type =“Steema.TeeChart.Web.TeeChartImgGen,TeeChart.Standard”/>
1.4 使用交互式圖表事件(圖表中沒有WebChart工具時,AutoPostback屬性為True)
響應用戶鼠標點擊圖表的加載事件和運行時交互式事件可以與TeeChart的WebChart一起使用,不需要采取特殊操作來使用諸如'AfterDraw'之類的繪制事件,可以從Property瀏覽器事件列表中選擇Chart事件。如果圖表中沒有TeeChart WebChart Tool(如Zoom,Scroll或Hotspot),則應將AutoPostback屬性設置為True以啟用交互式(用戶單擊)事件。如果存在上述工具,則會自動激活點擊響應。對于交互式事件,圖表將響應用戶鼠標點擊事件,將點擊發(fā)生的位置信息發(fā)回服務器,然后服務器端代碼可以對事件進行操作。然后,可以從屬性瀏覽器事件列表中選擇要使用的事件進行編碼。 有關WebChart事件的更多信息,請參閱“事件示例”部分。
事件示例
如果希望在WebChart中使用Click事件,例如ClickSeries,請務必將Chart AutoPostback設置為true。 可以通過在屬性瀏覽器事件列表中
雙擊所需事件來設置事件:雙擊列表中的條目可創(chuàng)建代碼內(nèi)事件聲明。
private int xVal; private int yVal; private void WebChart1_AfterDraw(object sender,Steema.TeeChart.Drawing.Graphics3D g) { g.TextOut(xVal,yVal,“onAfterDraw”); }
上述事件將在由xVal和yVal變量值決定的位置處將文本輸出到Chart??梢愿鶕?jù)點擊位置設置x和y值
private void WebChart1_ClickSeries(object sender, Steema.TeeChart.Series s, int valueIndex, System.EventArgs e) { xVal=s.CalcXPos(valueIndex); yVal=s.CalcYPos(valueIndex); }
(二)免費腳本化的ASP應用程序
在WebForm中使用WebChart的另一種方法是在標準的asp(aspx)頁面中使用TeeChart作為腳本化的“不可見”控件,TeeChart for .NET附帶了一個實例來演示這種技術。可以在TeeChart的ASP.NET演示項目中找到它,在“與圖表交互圖表作為圖像”演示文件夾下,標題為“系列類型為圖像”的示例。TeeChart可以通過內(nèi)部Chart類在ASP中自由編寫腳本,雖然為了利用TeeChart事件,建議使用TChart Windows窗體組件或WebChart控件
2.1 將圖表添加到腳本中
假設使用TChart,需要采取的初始步驟來設置TeeChart項目:
- 創(chuàng)建新的ASP.NET Forms項目,這將創(chuàng)建一個WebForm頁面,將其用作客戶端頁面。
- 添加新的WebForm頁面,此頁面將不可見,將用于處理圖表代碼服務器端——該頁面應包含對System.Windows.Forms.dll的引用。這是因為TChart組件是基于Windows.Forms的組件。
- 按照如下和ASPStreams示例中突出顯示的代碼步驟,如何設置項目
2.2 處理流程
客戶端瀏覽器頁面(SeriesTypes.aspx)包含一個IMG鏈接是aspx服務器腳本(ShowSeries.aspx)的圖像,客戶端頁面上的提交按鈕調(diào)用服務器腳本,其中包含參數(shù)化serverChart處理所需的變量。該按鈕將變量作為參數(shù)的一部分發(fā)送,以設置客戶頁面圖表圖像的imageURL,因此返回基于處理參數(shù)的動態(tài)圖表。
2.3 使用TeeChart進行編碼
要使用TeeChart服務器代碼,請在腳本頁面上向TeeChart添加一個using:
using Steema.TeeChart;
然后為TChart聲明一個變量,并在Page_Load事件的開頭創(chuàng)建它
private TChart tChart; private void Page_Load(object sender, System.EventArgs e) { tChart=new TChart(); /* ...add Series and data, etc ... */ }
2.4 圖表檢索
關鍵代碼組件是:
1、客戶端“Get”指令,這可以通過提交按鈕或其他方式啟動,并根據(jù)客戶端參數(shù)從服務器“Get”圖表。對圖表的請求可以作為傳統(tǒng)的Get url行發(fā)送,其中參數(shù)作為一個URL行傳遞,或者可以通過ASP.NET的“Passing Server Control Values Between Pages”來完成。用于調(diào)用服務器腳本的編碼將在WebForms Code后面頁面中進行。
在此示例中,變量取自不同的WrbForm頁面元素,并作為參數(shù)添加到Image'Get'URl行。
private void sendInfo() { seriesType=DropDownList1.Items[DropDownList1.SelectedIndex].ToString(); viewType=CheckBox1.Checked.ToString(); Image1.ImageUrl="http://"+webServer /*use webserver variable for server*/ +"/TeeChartForNET/ASPStream/ProcessChart.aspx?seriestype=" +seriesType+"&view="+viewType; }
2.服務器腳本從客戶端接收GET請求并運行其Page_Load事件,如果可以創(chuàng)建圖表并且可以使用所接收的參數(shù)來定義圖表的填充方式。然后將圖表呈現(xiàn)為圖像,并作為流重新提交給客戶端。
private void Page_Load(object sender, System.EventArgs e) { tChart=new TChart(); tChart.AfterDraw += new Steema.TeeChart.TChart.PaintChartEventHandler(this.tChart_AfterDraw); /* ...add Series and data, etc ... */ //Process Get parameters received from client if (Request.QueryString["view"]=="False") tChart.Aspect.View3D=false; else tChart.Aspect.View3D=true; MemoryStream tempStream = new MemoryStream(); tChart.Export.Image.PNG.Save(tempStream); Response.ContentType="Image/PNG"; Response.OutputStream.Write(tempStream.ToArray(),0,(int)tempStream.Length); tempStream.Close(); }
2.5 添加事件
可以通過在創(chuàng)建圖表后添加事件,為Free-scripted TeeChart ASP應用程序添加圖表創(chuàng)建事件。
private void Page_Load(object sender, System.EventArgs e) { tChart=new TChart(); tChart.AfterDraw += new Steema.TeeChart.TChart.PaintChartEventHandler(this.tChart_AfterDraw); /* ...add Series and data, etc ... */ MemoryStream tempStream = new MemoryStream(); tChart.Export.Image.PNG.Save(tempStream); Response.ContentType="Image/PNG"; Response.OutputStream.Write(tempStream.ToArray(),0,(int)tempStream.Length); tempStream.Close(); } private void tChart_AfterDraw(object sender, Steema.TeeChart.Drawing.Graphics3D g) { string tmpStr="Copyright My Organisation "+DateTime.Now.ToString(); g.TextOut(g.Chart.Width-(int)g.TextWidth(tmpStr)-5,g.Chart.Height-(int)g.TextHeight("H")-3,tmpStr); }
AfterDraw事件代碼將在圖表創(chuàng)建時執(zhí)行,在這種情況下,當圖表呈現(xiàn)為圖像時,相關消息將包含在圖表畫布中。如果希望在客戶端頁面圖表上使用基于用戶鼠標點擊的交互式事件,建議在WebForm上使用WebChart組件。
2.6 安全問題
通過安裝程序安裝的默認TeeChart for .NET會創(chuàng)建足以訪問TeeChart附帶的ASP.NET示例的文件夾和IIS虛擬文件夾。WebForm應用程序假定在IIS中激活會話支持以移動臨時圖表信息??梢栽赩isual Studio.NET中修改示例項目,以使用“文件”作為臨時存儲圖表的媒介。在Windows 2000中令人滿意的測試中。在Windows 2003中,默認安裝的其他安全限制限制了使用默認“_chart_temp”文件夾的可能性(臨時文件夾的名稱和位置是可配置的)。在Win2003服務器中,系統(tǒng)管理員必須修改安全權限,以允許相關ASP.NET應用程序?qū)⑴R時文件保存到磁盤。
(三)WebChart工具
WebChart工具可用于從“Editor Tools”選項板添加到WebChart。許多非WebChart特定工具可以與WebCharts一起使用,除了那些響應鼠標移動的工具(除了下面介紹的WebChart工具之外)。下面描述的所有工具技術都包含在TeeChart WebChart演示的實例中。
3.1 HotspotTool
以最簡單的形式,此工具激活數(shù)據(jù)點鼠標懸停標簽,當鼠標在點上傳遞時顯示。Hotspot工具也適用于Winform Charts,但WebChart的操作性質(zhì)因此處所述而異,WebChart Hotspot Tool生成與每個數(shù)據(jù)點關聯(lián)的mapregion,可以從以下選項中選擇地圖操作:
- 標記——根據(jù)所選樣式選項顯示點標記
- URL——單擊數(shù)據(jù)點時連接到URL
- 腳本——單擊數(shù)據(jù)點時運行自定義Javascript
3.2 Mark——標記
使用“Style——樣式”屬性定義“Mark Style——標記樣式”,代碼:
Steema.TeeChart.Tools.SeriesHotspot hotspotTool = ((Steema.TeeChart.Tools.SeriesHotspot)WebChart1.Chart.Tools[0]); hotspotTool.MapAction = Steema.TeeChart.Styles.MapAction.Mark; hotspotTool.Style = Steema.TeeChart.Styles.MarksStyles.LabelPercentTotal;
3.3 URL
使用GetHTMLMap事件設置從數(shù)據(jù)點調(diào)用的URL,URL選項,但必須對事件進行編碼以設置正確的URL。
//init code.... Steema.TeeChart.Tools.SeriesHotspot hotspotTool = ((Steema.TeeChart.Tools.SeriesHotspot)WebChart1.Chart.Tools[0]); hotspotTool.GetHTMLMap += new Steema.TeeChart.Tools.SeriesHotspotEventHandler(hotspotTool_GetHTMLMap); //event code: private void hotspotTool_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e) { if (CheckBox1.Checked) //open new window? e.PointPolygon.Attributes="target='_blank'"; else e.PointPolygon.Attributes="target='_self'"; tab if (e.Series==WebChart1.Chart.Series[0]) e.PointPolygon.HREF="http://" + TextBox1.Text; //set URL according to textbox text + TextBox1.Text; //set URL according to textbox text if (e.Series==WebChart1.Chart.Series[1]) e.PointPolygon.HREF="http://" + TextBox2.Text; if (e.Series==WebChart1.Chart.Series[2]) e.PointPolygon.HREF="http://" + TextBox3.Text; + TextBox3.Text; if (e.Series==WebChart1.Chart.Series[3]) e.PointPolygon.HREF="http://" + TextBox4.Text; }
3.4 Script
腳本選項可用于處理希望通過Javascript添加到圖表中的任何自定義內(nèi)容或增值,選擇腳本作為選項時,TeeChart會添加使用幫助程序腳本的選項,當前可用:“注釋”(請參閱??Steema.TeeChart.Tools.HotspotHelperScripts),可以選擇不使用Helperscript并定義自己的輸出。
protected void Page_Load(object sender, System.EventArgs e) { //initialization Chart ch1 = WebChart1.Chart; Steema.TeeChart.Themes.ColorPalettes.ApplyPalette(ch1, 9); Steema.TeeChart.Tools.SeriesHotspot hotspot1 = new Steema.TeeChart.Tools.SeriesHotspot(); ch1.Legend.Visible = false; ch1.Tools.Add(hotspot1); hotspot1.MapAction = Steema.TeeChart.Styles.MapAction.Script; hotspot1.GetHTMLMap += new Steema.TeeChart.Tools.SeriesHotspotEventHandler(hotspot1_GetHTMLMap); //....etc... more init code } private void hotspot1_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e) { //This example calls a Bar Series but e.Series and e.PointPolygon.ValueIndex could be sent //as arguments for a drilldown query. //The prepared HelperScriptAnnotation text accepts your text as a variable for the Annotation //In the following case it calls an aspx script to generate and return a Chart as an image e.PointPolygon.Attributes=String.Format(Texts.HelperScriptAnnotation, ""); //The annotation could, alternatively, present text in the mouseover hint, eg.: //e.PointPolygon.Attributes=String.Format(Steema.TeeChart.Texts.HelperScriptAnnotation,"hello world."); }
上例中使用的HelperScriptAnnotation是: HelperScriptAnnotation =“onmouseover = \”ShowAnnotation('{0}'); \“onmouseout = \”ShowAnnotation(''); \“”; 如果要添加自己的輸出,則可以將調(diào)用替換為自己的代碼。
string myProcess = ="onmouseover=\"ShowAssociatedDataTable('{0}');\" onmouseout=\"ShowAssociatedDataTable('');\""; e.PointPolygon.Attributes=String.Format(myProcess,e.PointPolygon.ValueIndex.ToString());
然后,使用ShowAssociatedDataTable方法來執(zhí)行調(diào)用以顯示關聯(lián)的數(shù)據(jù)表。
3.5 ScrollTool
ScrollTool將滾動條添加到WebChart的底部,可以設置圖表的可見部分大小和起始位置。盡管可以取消激活功能,但圖表也可以拖動,ScrollTool可以與Hotspot Tool結合使用。使用編輯器添加ScrollTool會自動將圖表設置為2D并移動下軸以允許滾動條的空間,滾動條在設計時不可見。將ViewSegmentSize和StartPosition與SegmentViewUnits結合使用以設置可滾動大小。
Steema.TeeChart.Tools.ScrollTool scrollTool = ((Steema.TeeChart.Tools.ScrollTool)WebChart1.Chart.Tools [0]); scrollTool.StartPosition = 30; scrollTool.SegmentViewUnits = Steema.TeeChart.Tools.ScrollToolViewUnit.percent; scrollTool.ViewSegmentSize = 20;
3.6 ZoomTool
ZoomTool允許選擇要處理的圖表的子區(qū)域以進行縮放,可以通過圖表區(qū)域上的mousedrag選擇該區(qū)域,將縮放坐標返回到服務器以停止縮放區(qū)域,該區(qū)域可以通過相反方向的阻力來解除。 要使用ZoomTool,將以下方法添加到頁面代碼中。 Using Session: :
{ ArrayList zoomedState=(ArrayList)Session[wChart.ID+"Zoomed"]; zoomedState=((Steema.TeeChart.Tools.ZoomTool)wChart.Chart.Tools[0]).SetCurrentZoom(Request, zoomedState); if (zoomedState==null) Session.Remove(wChart.ID+"Zoomed"); else Session.Add(wChart.ID+"Zoomed",zoomedState); }
Page.Cache:
private void CheckZoom(WebChart wChart) { ArrayList zoomedState = (ArrayList)Page.Cache[wChart.ID + "Zoomed"]; zoomedState = ((Steema.TeeChart.Tools.ZoomTool)wChart.Chart.Tools[0]).SetCurrentZoom(Request, zoomedState); if (zoomedState == null) Page.Cache.Remove(wChart.ID + "Zoomed"); else Page.Cache.Add(wChart.ID + "Zoomed", zoomedState); }
在Page_Load方法的末尾調(diào)用方法,傳遞要縮放的圖表的名稱。
CheckZoom(WebChart1);
在沒有任何鼠標x或y位移的圖表上單擊/拖動會導致單擊發(fā)送回服務器,而不是縮放,如果要求使用window onload事件。
3.7 Window onload事件
當WebChart添加了Zoom或Scroll Tool時,它需要使用Window.onload事件來初始化Tool的特征。如果需要根據(jù)自己的需要進一步使用onload事件,請在名為windowOnload的頁面中添加一個新函數(shù),并將代碼放在那里。例如:在頁面的HEAD部分中