彩票走势图

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

原创|使用教程|编辑:郝浩|2013-08-22 14:41:38.000|阅读 766 次

概述:当鼠标指示到FusionCharts图表中一个特定的数据点时所显示出来的信息就是工具提示。这里将对提示工具的使用方法做个详细的介绍。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

什么是FusionCharts的工具提示

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

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

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

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

示例:

<chart showToolTip='0'...>

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

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

示例:

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

将输出以下结果

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

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

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

示例:

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

输出结果如下:

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

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

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

示例:

<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>

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

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

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

示例:

<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>

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

》》》免费下载FusionCharts最新版


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP