一个完整的图表,冒泡提示和文字提示是很有必要的,冒泡提示是鼠标移动到每个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>