一个完整的图表,冒泡提示和文字提示是很有必要的,冒泡提示是鼠标移动到每个point上时会有提示,而文字提示是在每个point上面显示用户自定义的文字。
如下图所示,这是一个比较全面的例子:有的柱子有冒泡/文字提示,有的柱子没有,有的柱子是统一的冒泡/文字提示,有的柱子是额外自定义的提示。我们在项目会遇到各种需求,AnyChart基本都能满足。下面会根据此图介绍如何设置冒泡和文字提示。
- 冒泡提示
冒泡提示的设置是需要定义一个<tooltip>标签,目前已知的冒泡提示有三种方式:第一种是基于全局的提示,如果设置了这种全局tooltip,那么该图所有的冒泡提示都是统一的;第二种是基于series级别的,如果设置了这种series的tooltip,那么该series下的图冒泡都会遵循该规则;第三种是基于point级别的,这是最小级别,如果这样设置,该point会应用这种提示。值得一提的是,这三种冒泡提示可以混合存在,优先级一次是第三种>第二种>第一种,也就是说如果你设置了一个全局的tooltip,又给point name="张飞"的节点设置了另一种tooltip,那么除了张飞这个point外,其他的point都是应用的全局tooltip。
第一种基于全局的提示设置如下:
<data_plot_settings default_series_type="Bar"> <bar_series> <tooltip_settings enabled="true"> <format>{%YValue}</format> </tooltip_settings> </bar_series> </data_plot_settings>需要注意的是不同图的全局tooltip需要放在不同的<xx_series>标签下:
<bar_series>柱状、条形图
<area_series>面积图
<line_series>线形图、雷达图
<pie_series>饼图
<marker_series>标记图(点状图)
<line_series>折线、曲线图
第二种基于series的tooltip配置没有全局那么麻烦,只需要在<series>标签下添加一个<tooltip>标签即可,配置如下(如果设置tooltip enabled="false"表示该series都不显示tooltip,即使设置了全局的tooltip):
<series name="Quarter 2"> <tooltip enabled="false" /> </series>
第三种基于point的tooltip与series类似----只需要在<point>标签下添加<tooltip>标签即可:
<point name="Peter" y="16000"> <tooltip enabled="true">Custom tooltip</tooltip> </point>
<tooltip>标签下有很多子标签用于定义冒泡提示的格式和样式,其中用得最多的是<format>标签,它是用来定义冒泡提示的内容格式的。
AnyChart提供了很多内置变量用开发使用,比如你鼠标移动到图上就显示该节点的值,那么就需要用到{%YValue}或{%Value}变量,这两个在常规下都是一个意思,就是节点的值;而{%Name}变量是获得point name的值;{%SeriesName}变量是获得series name的值。值得一提的是,如果是设置了{%Value}变量,则最终冒泡提示会在值得后面默认添加两个小数位,这个是AnyChart的默认设置,可以修改的,如果你不希望显示小数位则可以这样设置{%Value}{numDecimals:0},numDecimals后面跟的数字就表示保留多少小数位。
冒泡提示还可以换行,比如第一行显示Series name,第二行显示point name,第三行显示point value,则可以这样配置:
<bar_series> <tooltip_settings enabled="true"> <format>Series name: {%SeriesName} Point name: {%Name} Point value: {%YValue} </format> </tooltip_settings> </bar_series>如果你的XML是通过后台代码拼接起来的字符串,那么可以通过"\n"换行符来进行换行,这种方式我通过java代码测试是可行的。
<tooltip>标签除了<format>定义提示格式外,还支持定义文字大小颜色,背景色等等功能,详细配置请参见官方的XML格式文档,更多冒泡提示的功能和内置变量可参见官方帮助文档:http://www.anychart.com/products/anychart/docs/users-guide/index.html?tooltip-text-formatting.html
- 文字提示
文字提示的配置与冒泡提示几乎一模一样,唯一的区别就是使用的标签不同,文字提示同样直接全局的、基于series的和基于point的配置。文字提示使用的标签是<label_settings>,示例如下:
<bar_series> <label_settings enabled="true"> <format>{%YValue}</format> </label_settings> </bar_series> <series name="Quarter 2"> <label enabled="false" /> </series> <point name="Jake" y="15000"> <label enabled="true">Label: {%YValue}</label> </point>
文字提示使用的内置变量与冒泡提示也基本一致,这里不做赘述。
文字提示支持设置显示位置,你可以在图上面显示,也可以在图外面显示,文字提示默认是图外显示的,如果你希望在图内显示,就需要设置一个<position>标签定义其显示位置:
<bar_series> <label_settings enabled="true"> <position anchor="Center" halign="Center" valign="Center"/> <format>Call {%Name}: {%phone} ({%location})</format> </label_settings> </bar_series>
还有一个额外的小功能,有时候我们会说默认在图外的文字提示离图的间距太远了(如下图所示),那么AnyChart提供了一个设置间距的功能<position padding="-2"/>,position标签的padding属性即可解决间距太远的问题,可以设置间距为负数,这样两者间距会更近一些。
文字提示的内容页就介绍到这,想了解更多内容请参见官方文档地址:http://www.anychart.com/products/anychart/docs/users-guide/index.html?label-text-formatting.html
- 综合示例
介绍完冒泡提示和文字提示,最后给一个完整的示例,帖上文章开头那张图的XML配置。
<?xml version="1.0" encoding="UTF-8"?> <anychart> <charts> <chart> <data_plot_settings default_series_type="Bar"> <bar_series> <tooltip_settings enabled="true"> <format>{%YValue}</format> </tooltip_settings> <label_settings enabled="true"> <format>{%YValue}</format> </label_settings> </bar_series> </data_plot_settings> <data> <series name="Quarter 1"> <point name="John" y="10000" /> <point name="Jake" y="12000" /> <point name="Peter" y="18000" /> </series> <series name="Quarter 2"> <tooltip enabled="false" /> <label enabled="false" /> <point name="John" y="12000" /> <point name="Jake" y="15000" > <label enabled="true"> <format>Label: {%YValue}</format> </label> </point> <point name="Peter" y="16000"> <tooltip enabled="true"> <format>Custom tooltip: {%YValue}</format> </tooltip> </point> </series> </data> <chart_settings> <title enabled="false" /> <axes> <y_axis enabled="true"> <scale minimum="0" /> </y_axis> <x_axis enabled="true" /> </axes> </chart_settings> </chart> </charts> </anychart>
相关推荐
AnyChart图表个人总结,学习了一周,个人作的一个总结文档,希望对大家有用。
使用AnyChart控件,可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用,可用于仪表盘、报表、数据分析、统计学、金融等领域。 AnyChart 可以被用于Web、桌面和移动应用程序,...
很实用的anychart图表api,免费的 很实用的anychart图表api,免费的 很实用的anychart图表api,免费的 很实用的anychart图表api,免费的
Anychart XMLReference配置的文档说明,离线模式
NULL 博文链接:https://zhuhm.iteye.com/blog/1452059
AnyChart图形配置说明。AnyChart FLash Chart是一款基于Flash/JavaScript的图表...使用Anychart可创建跨浏览器和跨平台的交互式图表和仪表。Anychart图表可以用于仪表盘的创建、报表、数据分析、统计学,金融等领域。
Flex 去除 AnyChart 图表组件 水印显示 Watermark
anychart 图表 XML节点属性值详细解释
Android基本示例本示例说明如何使用组件在Android应用程序中使用AnyChart图表库。在您的Android设备上运行要在您的Android设备上运行AnyChart示例,只需在设备浏览器中打开 URL。 该示例应用程序将自动下载并开始...
EXCEL之图表系列课程(4) 动态图表
Delphi实现鼠标悬停时显示文字提示的功能范例,在一个图表中显示数据,teechart建立曲线图,编辑图表-〉系列-〉标记-〉-〉样式,选择标签和值。鼠标在图上移动,会适时显示数据,无三方控件,D7直接编译。代码无效...
使用AnyChart JS图表与Go和MySQL进行数据可视化的集成模板
Iphone开发系列源码——图表和报表的统计功能Iphone开发系列源码——图表和报表的统计功能Iphone开发系列源码——图表和报表的统计功能Iphone开发系列源码——图表和报表的统计功能Iphone开发系列源码——图表和报表...
Highcharts多个图表共用一个提示框,每个图表多条曲线,下载后直接使用,如有问题欢迎咨询。
Excel模板之办公系列、个人系列、图表系列,个人收集,如有雷同请见谅。
现在搜索不到没有对AnyChart控件的.net事例,漂亮的图表控件动态的控件。 本人原创。
AnyChart6.1.0 无水印版. 强大的Flash图表控件。
Antv静态图表整理自蚂蚁数据可视化团队发布的相关图表设计资源,支持文字、色彩等元素修改。动态图表来自于Axhub Charts,支持图表配置和动态展示效果,详细的配置说明请查看下方链接。地图组件元素来自于Datav全国...