JS图表控件FusionCharts使用教程：自定义图表的工具提示

什么是FusionCharts的工具提示

当鼠标指示到FusionCharts图表中一个特定的数据点时所显示出来的信息就是工具提示。提示的信息可以是以下内容:

• 单系列图(除了饼图和环图):名称和值
• 饼图和环图:名称和值/百分比
• 多系列和组合图:系列名称、类别名称、数据值

如何禁用图表中的工具提示

用户可以通过设置showToolTip='0'选择禁用图表上的工具提示。

示例：

?

1	< chart showToolTip = '0' ...>

如何为图表上的数据点设置自定义文本

用户可以使用<set>元素的tooltext属性为数据点设置自定义工具提示,用于定义单个数据元素。

示例：

?

1 2 3 4 5 6

< chart caption = 'Monthly Revenue' xAxisName = 'Month' yAxisName = 'Revenue' numberPrefix = '$ showValues=' 0'>      < set label = 'Jan' value = '220000' toolText = 'Highest' />      < set label = 'Feb' value = '90000' />      ... </ chart >

将输出以下结果

如何自定义图表中的工具提示文本背景和边界颜色

用户可以使用<chart>元素的toolTipBorderColor和toolTipBgColor属性定制工具提示的背景和边框颜色。颜色不应包括“#”符号。

示例：

?

1	< chart ...  toolTipBorderColor = '6D86D5' toolTipBgColor = 'F7D7D1' >

输出结果如下：

如何使用Styles指定图表工具提示的字体属性

使用STYLES,用户可以为图表不同的文本设置单独的字体属性。

示例：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

< chart caption = 'Quarterly Sales Summary' subcaption='Figures in xAxisName = 'Quarter' yAxisName = 'Sales' showValues = '0' >      < set label = 'Qtr 1' value = '420500' />      < set label = 'Qtr 2' value = '295400' />      < set label = 'Qtr 3' value = '523400' />      < set label = 'Qtr 4' value = '465400' />      < styles >          < definition >              < style name = 'myToolTipFont' type = 'font'                     font = 'Verdana' size = '12' color = 'C57B64' />          </ definition >          < application >              < apply toObject = 'ToolTip' styles = 'myToolTipFont' />          </ application >      </ styles > </ chart >

如何在图表中显示多行工具提示

FusionCharts允许用户通过一个小手工调整跨行显示工具提示。

示例：

?

1 2 3 4 5

< chart >      < set label = 'John' value = '420' tooltext = 'John Miller{br}Score: 420{br}Rank:2' />      < set label = 'Mary' value = '295' tooltext = 'Mary Evans{br}Score: 295{br}Rank:3' />      < set label = 'Tom' value = '523' tooltext = 'Tom Bowler{br}Score: 523{br}Rank:1' /> </ chart >