WebChart工具可以從Editor Tools調(diào)色板中添加一個WebChart。許多non-WebChart專用工具可用于WebCharts，除了那些響應(yīng)鼠標(biāo)移動（除WebChart工具本身所涵蓋的）。所有工具的技術(shù)都在TeeChart 漢化版的WebChart示例中進(jìn)行了描述。

HotspotTool

該工具用最簡單的形式激活一個鼠標(biāo)懸停在數(shù)據(jù)點(diǎn)的標(biāo)簽，顯示為鼠標(biāo)通過了一點(diǎn)。HotspotTool也可用于WinForm Charts，但操作性質(zhì)不同于此處所描述的WebChart。WebChart HotspotTool生成與每個數(shù)據(jù)點(diǎn)相關(guān)聯(lián)的 區(qū)域。一個Map Action 可以從下面的選項(xiàng)中來選擇：

• Mark － 根據(jù)選擇的Style選項(xiàng)顯示一個Point Mark。
• URL － 當(dāng)一個數(shù)據(jù)點(diǎn)被點(diǎn)擊時連接到URL。
• Script － 當(dāng)一個數(shù)據(jù)點(diǎn)被點(diǎn)擊時運(yùn)行客戶端腳本。

Mark

使用Style屬性來定義Mark Style。

例子（通過代碼實(shí)現(xiàn)）

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;

URL

使用GetHTMLMap事件來設(shè)置的一個被數(shù)據(jù)點(diǎn)調(diào)用的URL。您可以通過編輯器來設(shè)置URL選項(xiàng)，但是您必須對事件進(jìn)行編碼來設(shè)置當(dāng)前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="//" + 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=";//" + TextBox2.Text;

     if (e.Series==WebChart1.Chart.Series[2]) e.PointPolygon.HREF="//" + TextBox3.Text; + TextBox3.Text;

   ;  if (e.Series==WebChart1.Chart.Series[3]) e.PointPolygon.HREF="//" + TextBox4.Text;

}

Script

Script選項(xiàng)可以用來處理客戶端內(nèi)容或者您通過JavaScript想要添加到圖表的value-add。當(dāng)Script被當(dāng)作一個選項(xiàng)選擇時，TeeChart添加此選項(xiàng)來使用一個輔助腳本，現(xiàn)有的：‘Annotation’（參考Steema.TeeChart.Tools.HotspotHelperScripts）。您也可以不選擇Helperscript并自己定義一個輸出。

Annotation示例：

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,

    "<IMG SRC=ShowSeries.aspx?seriestype=Bar&view=False&width=100&height=80>;");

     //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方法以顯示相關(guān)的數(shù)據(jù)表。

ScrollTool

ScrollTool向WebChart的底部添加一個滾動條。你可以設(shè)置圖表可見部分的大小和起始位置。圖表也可以拖動，雖然該功能可能會不盡人意。ScrollTool可于HotspotTool結(jié)合起來組合。

使用編輯器添加一個ScrollTool將自動設(shè)置圖表為2D并且移動較低的坐標(biāo)軸來空出滾動條的空間。在設(shè)計(jì)時，滾動條是不可見的。

ViewSegmentSize和StartPosition與SegmentViewUnits結(jié)合起來使用可以設(shè)置滾動的大小。

例子

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;

如果您想要使用Windows onload事件請參閱 Window onload事件 章節(jié)。

ZoomTool

ZoomTool允許選擇一個圖表子區(qū)域進(jìn)行縮放處理。該區(qū)域可以通過在圖表上拖動鼠標(biāo)來進(jìn)行選擇，Zoom co-ordinates被返回到服務(wù)器用來創(chuàng)建一個可縮放區(qū)域。如果反方向拖動那么該區(qū)域是不可以縮放的。

為了能夠使用ZoomTool，您需要在頁面代碼中添加下面的方法。

Using Session:

private void CheckZoom(WebChart wChart)

{

     ArrayList zoomedState=(ArrayList)Session[wChart.ID+"Zoomed"];

     zoomedState=((Steema.TeeChart.Tools.ZoomTool)
wChart.Chart.Tools[0]).SetCurrentZoom(Request,

&nbsp;       zoomedState);

     if (zoomedState==null)

        Session.Remove(wChart.ID+"Zoomed");

     else

       &nbsp;Session.Add(wChart.ID+"Zoomed",zoomedState);

}

或者Page.Cache:

private void CheckZoom(WebChart wChart)

{

  ArrayList zoomedState = (ArrayList)Page.Cache[wChart.ID + "Zoomed"];

&nbsp; zoomedState = ((Steema.TeeChart.Tools.ZoomTool)

wChart.Chart.Tools[0]).SetCurrentZoom(Request,

    zoomedState);

  if (zoomedState == null)

   &nbsp;Page.Cache.Remove(wChart.ID + "Zoomed");

  else

    Page.Cache.Add(wChart.ID + "Zoomed", zoomedState);

}

Page_Load方法結(jié)束后調(diào)用此方法，傳遞您想要縮放的圖表的名稱。

例子

CheckZoom(WebChart1)

圖表上任何沒有x或y位移的點(diǎn)擊/拖動都當(dāng)成一個點(diǎn)擊發(fā)送回服務(wù)器，而不是一個縮放。如果您想要使用Windows onload事件請參閱 Window onload event章節(jié)。

Window onload事件

當(dāng)一個Zoom或者Scroll Tool添加到您的WebChart時，您需要使用Window.onload事件來初始化Tool的特性。如果您想要進(jìn)一步根據(jù)自己的需求來使用onload事件，那么請?jiān)陧撁嫔咸砑右粋€新功能來調(diào)用windowOnload事件并在事件中使用您自己的代碼。

例如：在頁面的<HEAD>標(biāo)簽中添加windowOnload事件

<script language=javascript>

function windowOnload()  

{

   window.status = new Date().getTime();

}

</script>