WebChart工具可以從Editor Tools調色板中添加一個WebChart。許多non-WebChart專用工具可用于WebCharts，除了那些響應鼠標移動（除WebChart工具本身所涵蓋的）。所有工具的技術都在TeeChart 漢化版的WebChart示例中進行了描述。

HotspotTool

該工具用最簡單的形式激活一個鼠標懸停在數據點的標簽，顯示為鼠標通過了一點。HotspotTool也可用于WinForm Charts，但操作性質不同于此處所描述的WebChart。WebChart HotspotTool生成與每個數據點相關聯的 區域。一個Map Action 可以從下面的選項中來選擇：

• Mark － 根據選擇的Style選項顯示一個Point Mark。
• URL － 當一個數據點被點擊時連接到URL。
• Script － 當一個數據點被點擊時運行客戶端腳本。

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;

URL

使用GetHTMLMap事件來設置的一個被數據點調用的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="//" + 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選項可以用來處理客戶端內容或者您通過JavaScript想要添加到圖表的value-add。當Script被當作一個選項選擇時，TeeChart添加此選項來使用一個輔助腳本，現有的：‘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('');\"";

如果你要添加您自己的輸出，您需要調用自己的代碼。

例子

string myProcess = ="onmouseover=\"ShowAssociatedDataTable('{0}');\"
 onmouseout=\"ShowAssociatedDataTable('');\"";

e.PointPolygon.Attributes=
 String.Format(myProcess,e.PointPolygon.ValueIndex.ToString());

于是你可以自定義ShowAssociatedDataTable方法以顯示相關的數據表。

ScrollTool

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

使用編輯器添加一個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;

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

ZoomTool

ZoomTool允許選擇一個圖表子區域進行縮放處理。該區域可以通過在圖表上拖動鼠標來進行選擇，Zoom co-ordinates被返回到服務器用來創建一個可縮放區域。如果反方向拖動那么該區域是不可以縮放的。

為了能夠使用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,

        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方法結束后調用此方法，傳遞您想要縮放的圖表的名稱。

例子

CheckZoom(WebChart1)

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

Window onload事件

當一個Zoom或者Scroll Tool添加到您的WebChart時，您需要使用Window.onload事件來初始化Tool的特性。如果您想要進一步根據自己的需求來使用onload事件，那么請在頁面上添加一個新功能來調用windowOnload事件并在事件中使用您自己的代碼。

例如：在頁面的<HEAD>標簽中添加windowOnload事件

<script language=javascript>

function windowOnload()  

{

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

}

</script>