【TeeChart Pro ActiveX教程】(十):演示ASP示例
Web表單示例
如何創(chuàng)建動態(tài)WebChart
- 在您的服務(wù)器上創(chuàng)建一個新的WebForm應(yīng)用程序,并確保它在表單上沒有任何內(nèi)容正確運(yùn)行。
- 從Steema ToolBox選項(xiàng)卡中,選擇一個WebChart對象并將其拖動到WebForm上。
- 選擇新的WebChart1對象,然后在“屬性”窗口中導(dǎo)航到TempChart屬性并將其從“文件”更改為“會話”。這意味著WebChart生成的所有臨時(shí)圖表都將存儲在會話變量中,而不是存儲在臨時(shí)文件夾中
- 為了從會話變量中恢復(fù)臨時(shí)圖表,我們將添加一個新的表單,其中包含一些簡單的代碼。右鍵單擊您的ASP.NET項(xiàng)目并添加一個新的WebForm,命名為GetChart.aspx?,F(xiàn)在確保Page_Load事件如下所示:
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.OutputStream.Write(chartStream.ToArray(),0,(int)chartStream.Length); chartStream.Close(); Session.Remove(chartName); } }
繼續(xù)生成一些基本的HotSpot功能; 在我們原始WebForm的Form_Load事件中,我們可以添加類似于以下內(nèi)容的代碼:
private void Page_Load(object sender, System.EventArgs e) { //Let's work with the Chart object for convenience Steema.TeeChart.Chart Chart1 = WebChart1.Chart; //Add in a series and fill it Chart1.Aspect.View3D = false; Steema.TeeChart.Styles.Bubble bubble1 = new Steema.TeeChart.Styles.Bubble(Chart1); bubble1.FillSampleValues(); //Add a SeriesToolTip to the Chart Steema.TeeChart.Tools.SeriesHotspot seriesHotSpot1 = new Steema.TeeChart.Tools.SeriesHotspot(Chart1); //Steema.TeeChart.Styles.MapAction.Mark is the default value seriesHotSpot1.MapAction = Steema.TeeChart.Styles.MapAction.Mark; }
執(zhí)行此代碼并將鼠標(biāo)移到氣泡上將顯示系列標(biāo)記的值,在本例中為YValues。 要向圖表添加縮放功能,我們需要做的就是添加一個zoomtool和一些簡單的代碼來控制縮放狀態(tài):
private void Page_Load(object sender, System.EventArgs e) { //Let's work with the Chart object for convenience Steema.TeeChart.Chart Chart1 = WebChart1.Chart; //Add in a series and fill it Chart1.Aspect.View3D = false; Steema.TeeChart.Styles.Bubble bubble1 = new Steema.TeeChart.Styles.Bubble(Chart1); bubble1.FillSampleValues(); //Add a SeriesToolTip to the Chart Steema.TeeChart.Tools.SeriesHotspot seriesHotSpot1 = new Steema.TeeChart.Tools.SeriesHotspot(Chart1); //Steema.TeeChart.Styles.MapAction.Mark is the default value seriesHotSpot1.MapAction = Steema.TeeChart.Styles.MapAction.Mark; //Add a ZoomTool to the Chart Steema.TeeChart.Tools.ZoomTool zoomTool1 = new Steema.TeeChart.Tools.ZoomTool(Chart1); // *************** Code for zoom support *************** //check whether zoom request is being sent CheckZoom(WebChart1); } private void CheckZoom(WebChart wChart) { 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); }
我們現(xiàn)在有一個交互式圖表,可響應(yīng)鼠標(biāo)懸停和鼠標(biāo)點(diǎn)擊事件。SeriesHotSpot(在這種情況下與氣泡系列相關(guān)聯(lián))將在鼠標(biāo)移過它時(shí)顯示系列標(biāo)記的值。但是,通過MapAction屬性,我們可以在鼠標(biāo)移過它時(shí)自定義SeriesHotSpot的行為。例如,我們可能希望點(diǎn)擊其中一個氣泡將我們帶到指定的URL; 通過將MapAction屬性設(shè)置為URL,鏈接SeriesHotSpot事件并在其中指定URL,這是完全可能的:
在Page_Load事件中:
seriesHotSpot1.MapAction = Steema.TeeChart.Styles.MapAction.URL; seriesHotSpot1.GetHTMLMap += new Steema.TeeChart.Tools.SeriesHotspotEventHandler(seriesHotSpot1_GetHTMLMap);
GetHTMLMap方法:
private void seriesHotSpot1_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e) { e.PointPolygon.Title = "Go to the Steema web"; e.PointPolygon.HREF = "http://www.steema.com"; e.PointPolygon.Attributes = "target='_blank'"; }
有效地將MapAction屬性設(shè)置為Script允許您定義您喜歡的任何行為。TeeChart為您提供了一些有用的內(nèi)置腳本,可以通過HelperScripts枚舉來調(diào)用。例如,要在鼠標(biāo)懸停在其中一個氣泡序列點(diǎn)上時(shí)打開圖像文件,我們將添加以下代碼: 在Page_Load事件中:
seriesHotSpot1.MapAction = Steema.TeeChart.Styles.MapAction.Script; seriesHotSpot1.HelperScript = Steema.TeeChart.Tools.HotspotHelperScripts.Annotation;
這里的第二行確保將相關(guān)的JavaScript添加到客戶端瀏覽器中。GetHTMLMap方法:
private void seriesHotSpot1_GetHTMLMap(Steema.TeeChart.Tools.SeriesHotspot sender, Steema.TeeChart.Tools.SeriesHotspotEventArgs e) { e.PointPolygon.Attributes=String.Format(Steema.TeeChart.Texts.HelperScriptAnnotation, "<IMG SRC=Images/myimage.jpg>"); }
進(jìn)一步自定義行為只是意味著設(shè)計(jì)自己的JavaScript例程,將它們添加到客戶端瀏覽器,然后通過將它們及其參數(shù)添加到e.PointPolygon.Attributes來調(diào)用它們。
購買TeeChart Pro AciveX正版授權(quán),請點(diǎn)擊“咨詢在線客服”喲!