FusionCharts目前已更新至v3.10.0版本>>點(diǎn)擊了解FusionCharts v3.10.0更新詳情
< FusionChart最新版本下載>
Fusioncharts的提示工具就是當(dāng)鼠標(biāo)懸停在某個(gè)特定的數(shù)據(jù)點(diǎn)上時(shí)顯示的信息框，它顯示一些有價(jià)值的信息，例如：
- 在單一系列圖表中，它顯示數(shù)據(jù)列的名稱和數(shù)據(jù)值
- 在餅圖和環(huán)形圖中，它顯示名稱和數(shù)值/百分比
- 在多系列和組合圖表中，它顯示系列名稱、類(lèi)別名稱和數(shù)據(jù)值
自定義提示工具
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)：
- 宏不區(qū)分大小寫(xiě)
- 不可用的宏將被當(dāng)作字符串
- 要在提示工具里使用宏的名稱作為文本，需在$符號(hào)前使用雙引號(hào)。
- 提示工具文本也可從相應(yīng)的父節(jié)點(diǎn)進(jìn)行配置（即圖表、數(shù)據(jù)集等）。
在提示工具里添加HTML表格
使用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>
提示工具宏的高級(jí)用法
你可以使用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)擊查看>>
標(biāo)簽：
JavaScript 圖表圖表庫(kù)數(shù)據(jù)可視化圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn
半島外圍網(wǎng)上直營(yíng) 
19次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營(yíng)相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線