原創(chuàng)|使用教程|編輯:鄭恭琳|2016-01-21 12:12:48.000|閱讀 1366 次
概述:提示工具——當(dāng)鼠標(biāo)懸停在某個(gè)特定的數(shù)據(jù)點(diǎn)上時(shí)出現(xiàn)的顯示數(shù)據(jù)的詳細(xì)信息的提示框。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
相關(guān)鏈接:
FusionCharts目前已更新至v3.10.0版本>>點(diǎn)擊了解FusionCharts v3.10.0更新詳情
Fusioncharts的提示工具就是當(dāng)鼠標(biāo)懸停在某個(gè)特定的數(shù)據(jù)點(diǎn)上時(shí)顯示的信息框,它顯示一些有價(jià)值的信息,例如:
2D柱狀圖自定義提示工具邊框和背景效果圖如下:

下表是用于自定義圖表提示工具的屬性:
| 屬性名稱 | 描述 |
| showToolTip | 設(shè)置為1(默認(rèn))時(shí)啟用提示工具;設(shè)置為0時(shí)禁用提示工具。 |
| toolTipBgColor | 用于指定提示工具的背景顏色,用十六進(jìn)制代碼。 |
| toolTipBorderColor | 用于指定提示工具的邊框顏色,用十六進(jìn)制代碼。 |
| toolTipSepChar | 用于指定提示工具里顯示在名稱和值之間的字符。例如:“,”(默認(rèn))、“--” |
| showToolTipShadow | 設(shè)置為1(默認(rèn))時(shí)啟用提示工具陰影;設(shè)置為0時(shí)禁用。 |
上圖所示自定義提示工具邊框和背景數(shù)據(jù)結(jié)構(gòu)如下:
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柱狀圖的多行文本提示工具如下圖所示:

下表是用于設(shè)置多行文本提示工具的toolText屬性的詳細(xì)說(shuō)明:
| 屬性名稱 | 描述 |
| toolText |
默認(rèn)情況下FusionCharts的提示工具只顯示數(shù)據(jù)項(xiàng)名稱和值。如果你想在提示工具里顯示更多信息的話,可將提示工具的文本顯示為多行格式。例如:
Quarter 1{br}Total Sale: $195K{br}Rank: 1
|
渲染多行提示工具的數(shù)據(jù)結(jié)構(gòu)如下:
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的提示工具中引入了宏動(dòng)態(tài)配置和上下文內(nèi)容。這使你可以在圖表上建立數(shù)據(jù)點(diǎn)的自定義工具文本,幫助你節(jié)省大量的手動(dòng)工作量。
每個(gè)圖表都包含標(biāo)簽、原始值、格式化值、顯示值等。這些作為變量可以與自定義文本配合使用以形成完整的提示工具文本。
在提示工具中使用宏時(shí)注意以下幾點(diǎn):
使用plotToolText屬性,你可以在提示工具里添加動(dòng)態(tài)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> |
自定義工具提示顯示表格的數(shù)據(jù)結(jié)構(gòu)如下:
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在你的圖表中使用宏以提供更多信息。

可通過(guò)在餅圖的每一個(gè)數(shù)據(jù)圖上使用rollover ()和rollout ()事件,當(dāng)鼠標(biāo)懸停在各數(shù)據(jù)圖上時(shí),顯示相應(yīng)的信息。
在數(shù)據(jù)圖的自定義提示工具里顯示圖表詳細(xì)信息的數(shù)據(jù)結(jié)構(gòu)如下:
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>
購(gòu)買(mǎi)最新正版授權(quán)!詳情請(qǐng)""
迎春納福,金猴獻(xiàn)瑞,革新之年雙節(jié)同慶,惠享不停驚喜連連!優(yōu)惠詳情點(diǎn)擊查看>>
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn