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号
客服热线