JS圖表控件FusionCharts使用教程：自定義圖表的工具提示

---

什么是FusionCharts的工具提示

當鼠標指示到FusionCharts圖表中一個特定的數(shù)據(jù)點時所顯示出來的信息就是工具提示。提示的信息可以是以下內(nèi)容:

• 單系列圖(除了餅圖和環(huán)圖):名稱和值
• 餅圖和環(huán)圖:名稱和值/百分比
• 多系列和組合圖:系列名稱、類別名稱、數(shù)據(jù)值

如何禁用圖表中的工具提示

用戶可以通過設置showToolTip='0'選擇禁用圖表上的工具提示。

示例：

<chart showToolTip='0'...>

如何為圖表上的數(shù)據(jù)點設置自定義文本

用戶可以使用<set>元素的tooltext屬性為數(shù)據(jù)點設置自定義工具提示,用于定義單個數(shù)據(jù)元素。

示例：

<chart caption='Monthly Revenue' xAxisName='Month' 
 yAxisName='Revenue' numberPrefix='$ showValues='0'>
     <set label='Jan' value='220000' toolText='Highest'/>
     <set label='Feb' value='90000' />
     ...
</chart>

將輸出以下結果

如何自定義圖表中的工具提示文本背景和邊界顏色

用戶可以使用<chart>元素的toolTipBorderColor和toolTipBgColor屬性定制工具提示的背景和邊框顏色。顏色不應包括&ldquo;#”符號。

示例：

<chart ...  toolTipBorderColor='6D86D5' toolTipBgColor='F7D7D1' >

輸出結果如下：

如何使用Styles指定圖表工具提示的字體屬性

使用STYLES,用戶可以為圖表不同的文本設置單獨的字體屬性。

示例：

<chart caption='Quarterly Sales Summary' subcaption='Figures in 
 xAxisName='Quarter' yAxisName='Sales' showValues='0' >
     <set label='Qtr 1' value='420500' />
     <set label='Qtr 2' value='295400' />
     <set label='Qtr 3' value='523400' />
     <set label='Qtr 4' value='465400' />
     <styles>
         <definition>
             <style name='myToolTipFont' type='font' 
                    font='Verdana' size='12' color='C57B64'/>
         </definition>
         <application>
             <apply toObject='ToolTip' styles='myToolTipFont' />
         </application>
     </styles>
</chart>

如何在圖表中顯示多行工具提示

FusionCharts允許用戶通過一個小手工調(diào)整跨行顯示工具提示。

示例：

<chart>
     <set label='John' value='420' tooltext='John Miller{br}Score: 420{br}Rank:2'/>
     <set label='Mary' value='295' tooltext='Mary Evans{br}Score: 295{br}Rank:3'/>
     <set label='Tom' value='523' tooltext='Tom Bowler{br}Score: 523{br}Rank:1'/>
 </chart>

》》》免費下載FusionCharts最新版