Anychart图表系列七之冒泡提示和文字提示

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