FusionCharts目前已更新至v3.10.0版本>>點擊了解FusionCharts v3.10.0更新詳情
< FusionChart最新版本下載>
Fusioncharts的提示工具就是當鼠標懸停在某個特定的數(shù)據(jù)點上時顯示的信息框，它顯示一些有價值的信息，例如：
- 在單一系列圖表中，它顯示數(shù)據(jù)列的名稱和數(shù)據(jù)值
- 在餅圖和環(huán)形圖中，它顯示名稱和數(shù)值/百分比
- 在多系列和組合圖表中，它顯示系列名稱、類別名稱和數(shù)據(jù)值
自定義提示工具
2D柱狀圖自定義提示工具邊框和背景效果圖如下：
下表是用于自定義圖表提示工具的屬性：
| 屬性名稱 |
描述 |
| showToolTip |
設(shè)置為1（默認）時啟用提示工具；設(shè)置為0時禁用提示工具。 |
| toolTipBgColor |
用于指定提示工具的背景顏色，用十六進制代碼。 |
| toolTipBorderColor |
用于指定提示工具的邊框顏色，用十六進制代碼。 |
| toolTipSepChar |
用于指定提示工具里顯示在名稱和值之間的字符。例如：“,”（默認）、“--” |
| showToolTipShadow |
設(shè)置為1（默認）時啟用提示工具陰影；設(shè)置為0時禁用。 |
上圖所示自定義提示工具邊框和背景數(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屬性的詳細說明：
| 屬性名稱 |
描述 |
| toolText |
默認情況下FusionCharts的提示工具只顯示數(shù)據(jù)項名稱和值。如果你想在提示工具里顯示更多信息的話，可將提示工具的文本顯示為多行格式。例如：
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的提示工具中引入了宏動態(tài)配置和上下文內(nèi)容。這使你可以在圖表上建立數(shù)據(jù)點的自定義工具文本，幫助你節(jié)省大量的手動工作量。
每個圖表都包含標簽、原始值、格式化值、顯示值等。這些作為變量可以與自定義文本配合使用以形成完整的提示工具文本。
在提示工具中使用宏時注意以下幾點：
- 宏不區(qū)分大小寫
- 不可用的宏將被當作字符串
- 要在提示工具里使用宏的名稱作為文本，需在$符號前使用雙引號。
- 提示工具文本也可從相應(yīng)的父節(jié)點進行配置（即圖表、數(shù)據(jù)集等）。
在提示工具里添加HTML表格
使用plotToolText屬性，你可以在提示工具里添加動態(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在你的圖表中使用宏以提供更多信息。
可通過在餅圖的每一個數(shù)據(jù)圖上使用rollover ()和rollout ()事件，當鼠標懸停在各數(shù)據(jù)圖上時，顯示相應(yīng)的信息。
在數(shù)據(jù)圖的自定義提示工具里顯示圖表詳細信息的數(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>
購買最新正版授權(quán)！詳情請""
迎春納福，金猴獻瑞，革新之年雙節(jié)同慶，惠享不停驚喜連連！優(yōu)惠詳情點擊查看>>
標簽：
JavaScript 圖表圖表庫數(shù)據(jù)可視化圖表解決方案圖表控件FusionCharts圖表
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
金喜正規(guī)買球 
18次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線