FusionCharts目前已更新至v3.10.0版本>>點擊了解FusionCharts v3.10.0更新詳情
< FusionChart最新版本下載>
Fusioncharts的提示工具就是當鼠標懸停在某個特定的數據點上時顯示的信息框，它顯示一些有價值的信息，例如：
- 在單一系列圖表中，它顯示數據列的名稱和數據值
- 在餅圖和環形圖中，它顯示名稱和數值/百分比
- 在多系列和組合圖表中，它顯示系列名稱、類別名稱和數據值
自定義提示工具
2D柱狀圖自定義提示工具邊框和背景效果圖如下：
下表是用于自定義圖表提示工具的屬性：
| 屬性名稱 |
描述 |
| showToolTip |
設置為1（默認）時啟用提示工具；設置為0時禁用提示工具。 |
| toolTipBgColor |
用于指定提示工具的背景顏色，用十六進制代碼。 |
| toolTipBorderColor |
用于指定提示工具的邊框顏色，用十六進制代碼。 |
| toolTipSepChar |
用于指定提示工具里顯示在名稱和值之間的字符。例如：“,”（默認）、“--” |
| showToolTipShadow |
設置為1（默認）時啟用提示工具陰影；設置為0時禁用。 |
上圖所示自定義提示工具邊框和背景數據結構如下：
JSON:
{
"chart": {
"caption": "Quarterly Sales Summary",
"subcaption": "For last year",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"toolTipBorderColor": "#FFFFFF",
"toolTipBgColor": "#666666",
"toolTipBgAlpha": "80",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "195000"
},
{
"label": "Q2",
"value": "155000"
},
{
"label": "Q3",
"value": "178000"
},
{
"label": "Q4",
"value": "192000"
}
]
}
XML:
<chart caption="Quarterly Sales Summary" subcaption="For last year" xaxisname="Quarter" yaxisname="Amount (In USD)" numberprefix="$" tooltipbordercolor="#FFFFFF" tooltipbgcolor="#666666" tooltipbgalpha="80" theme="fint">
< set label="Q1" value="195000" />
< set label="Q2" value="155000" />
< set label="Q3" value="178000" />
< set label="Q4" value="192000" />
</chart>
多行文本提示工具
2D柱狀圖的多行文本提示工具如下圖所示：
下表是用于設置多行文本提示工具的toolText屬性的詳細說明：
| 屬性名稱 |
描述 |
| toolText |
默認情況下FusionCharts的提示工具只顯示數據項名稱和值。如果你想在提示工具里顯示更多信息的話，可將提示工具的文本顯示為多行格式。例如：
Quarter 1{br}Total Sale: $195K{br}Rank: 1
|
渲染多行提示工具的數據結構如下：
JSON:
{
"chart": {
"caption": "Quarterly Sales Summary",
"subcaption": "For last year",
"xaxisname": "Quarter",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "195000",
"tooltext": "Quarter 1{br}Total Sale: $195K{br}Rank: 1"
},
{
"label": "Q2",
"value": "155000",
"tooltext": "Quarter 2{br}Total Sale: $155K{br}Rank: 4"
},
{
"label": "Q3",
"value": "178000",
"tooltext": "Quarter 3{br}Total Sale: $178K{br}Rank: 3"
},
{
"label": "Q4",
"value": "192000",
"tooltext": "Quarter 4{br}Total Sale: $192K{br}Rank: 4"
}
]
}
XML:
<chart caption="Quarterly Sales Summary" subcaption="For last year" xaxisname="Quarter" yaxisname="Amount (In USD)" numberprefix="$" theme="fint">
< set label="Q1" value="195000" tooltext="Quarter 1{br}Total Sale: $195K{br}Rank: 1" />
< set label="Q2" value="155000" tooltext="Quarter 2{br}Total Sale: $155K{br}Rank: 4" />
< set label="Q3" value="178000" tooltext="Quarter 3{br}Total Sale: $178K{br}Rank: 3" />
< set label="Q4" value="192000" tooltext="Quarter 4{br}Total Sale: $192K{br}Rank: 4" />
</chart>
引入宏
FusionCharts v3.4的提示工具中引入了宏動態配置和上下文內容。這使你可以在圖表上建立數據點的自定義工具文本，幫助你節省大量的手動工作量。
每個圖表都包含標簽、原始值、格式化值、顯示值等。這些作為變量可以與自定義文本配合使用以形成完整的提示工具文本。
在提示工具中使用宏時注意以下幾點：
- 宏不區分大小寫
- 不可用的宏將被當作字符串
- 要在提示工具里使用宏的名稱作為文本，需在$符號前使用雙引號。
- 提示工具文本也可從相應的父節點進行配置（即圖表、數據集等）。
在提示工具里添加HTML表格
使用plotToolText屬性，你可以在提示工具里添加動態HTML表格。箱線圖帶有表和宏的自定義提示工具如下圖所示：
下表是用到的屬性：
| 屬性名稱 |
描述 |
| plotToolText |
在plotToolText中不僅可以是文本或包含宏的文本，你還可以把HTML字符串作為其屬性值。示例：
<div id='headerdiv'>$label</div>
<div>
<table width='120' border='1'>
<tr>
<td class='labelDiv'>Total Sale</td>
<td class='allpadding'>$value</td>
</tr>
<tr>
<td class='labelDiv'>Quarter</td>
<td class='allpadding'>$label</td>
</tr>
</table>
</div>
|
自定義工具提示顯示表格的數據結構如下：
JSON:
{
"chart": {
"caption": "Distribution of annual salaries",
"subcaption": "By Gender",
"xAxisName": "Pay Grades",
"YAxisName": "Salaries (In USD)",
"theme": "fint",
"showValues": "0",
"numberPrefix": "$",
"legendPosition": "right",
"plottooltext": "<div id='headerdiv'>$label</div><div><table width='120' border='1'><tr><td class='labelDiv'>Maximum</td><td class='allpadding'>$maxDatavalue</td></tr><tr><td class='labelDiv'>Q3</td><td class='allpadding'>$Q3</td></tr><tr><td class='labelDiv'>Median</td><td class='allpadding'>$median</td></tr><tr><td class='labelDiv'>Q1</td><td class='allpadding'>$Q1</td></tr><tr><td class='labelDiv'>Minimum</td><td class='allpadding'>$minDataValue</td></tr></table></div>"
},
"categories": [
{
"category": [
{
"label": "Grade 1"
},
{
"label": "Grade 2"
},
{
"label": "Grade 3"
}
]
}
],
"dataset": [
{
"seriesname": "Males",
"data": [
{
"value": "2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000"
},
{
"value": "7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500"
},
{
"value": "15000,19000,25000,32000,50000,65000"
}
]
},
{
"seriesname": "Females",
"data": [
{
"value": "1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000"
},
{
"value": "7000,8000,8300,8700,9500,11000,15000, 17000, 21000"
},
{
"value": "24000,32000,35000,37000,39000, 58000"
}
]
}
]
}
XML:
<chart caption="Distribution of annual salaries" subcaption="By Gender" xaxisname="Pay Grades" yaxisname="Salaries (In USD)" theme="fint" showvalues="0" numberprefix="$" legendposition="right" plottooltext="<div id='headerdiv'>$label</div><div><table width='120' border='1'><tr><td class='labelDiv'>Maximum</td><td class='allpadding'>$maxDatavalue</td></tr><tr><td class='labelDiv'>Q3</td><td class='allpadding'>$Q3</td></tr><tr><td class='labelDiv'>Median</td><td class='allpadding'>$median</td></tr><tr><td class='labelDiv'>Q1</td><td class='allpadding'>$Q1</td></tr><tr><td class='labelDiv'>Minimum</td><td class='allpadding'>$minDataValue</td></tr></table></div>">
<categories>
< category label="Grade 1" />
< category label="Grade 2" />
< category label="Grade 3" />
</categories>
<dataset seriesname="Males">
< set value="2400,2000,2500,2800,3500,4000, 3700, 3750, 3880, 5000,5500,7500,8000,8200, 8400, 8500, 8550, 8800, 8700, 9000, 14000" />
< set value="7500,9000,12000,13000,14000,16500,17000, 18000, 19000, 19500" />
< set value="15000,19000,25000,32000,50000,65000" />
</dataset>
<dataset seriesname="Females">
< set value="1900,2100,2300,2350,2400,2550,3000,3500,4000, 6000, 6500, 9000" />
< set value="7000,8000,8300,8700,9500,11000,15000, 17000, 21000" />
< set value="24000,32000,35000,37000,39000, 58000" />
</dataset>
</chart>
提示工具宏的高級用法
你可以使用FusionCharts v3.4引入的新屬性plotToolText在你的圖表中使用宏以提供更多信息。
可通過在餅圖的每一個數據圖上使用rollover ()和rollout ()事件，當鼠標懸停在各數據圖上時，顯示相應的信息。
在數據圖的自定義提示工具里顯示圖表詳細信息的數據結構如下：
JSON:
{
"chart": {
"caption": "Visitor Composition by Age Group",
"subCaption": "Last year",
"enableSmartLabels": "0",
"startingAngle": "0",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"plottooltext": "<div id='nameDiv'>$label :</div>{br}No. Of Visitors : <b>$dataValue</b> of the total <b>$sum</b> visitors{br}In Percentage : <b>$percentValue</b>",
"theme": "fint"
},
"data": [
{
"label": "Teenage",
"value": "1250400"
},
{
"label": "Adult",
"value": "1463300"
},
{
"label": "Middle-age",
"value": "1050700"
},
{
"label": "Senior Citizen",
"value": "491000"
}
]
}
XML:
<chart caption="Visitor Composition by Age Group" subcaption="Last year" enablesmartlabels="0" startingangle="0" showpercentvalues="1" showpercentintooltip="0" decimals="1" plottooltext="<div id='nameDiv'>$label :</div>{br}No. Of Visitors : <b>$dataValue</b> of the total <b>$sum</b> visitors{br}In Percentage : <b>$percentValue</b>" theme="fint">
< set label="Teenage" value="1250400" />
< set label="Adult" value="1463300" />
< set label="Middle-age" value="1050700" />
< set label="Senior Citizen" value="491000" />
</chart>
購買最新正版授權！詳情請""
迎春納福，金猴獻瑞，革新之年雙節同慶，惠享不停驚喜連連！優惠詳情點擊查看>>
標簽：
JavaScript 圖表圖表庫數據可視化圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網上直營 
19次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線