历史版本3 :自定义提示点 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑

新图表还可以对提示点的显示内容进行自定义， 数据点提示和标签提供内容和样式的完全自定义，用户甚至可以将其设置为html内容，这里设置的数据点提示，与标签设置方式相同。在这个自定义函数里，this指代的是当前的数据点对象，常用的属性说明如下：

  属性类型  说明  
  this.category  String  当前数据点所在的分类的名字
  this.seriesName  String  当前数据点所在的系列的名字
  this.name  String  对于地图来说，name表示当前数据点的区域名，比如江苏省，南通市等等
  this.percentage  Number  表示当前数据点所占的百分比
  this.getTargetValue()  Function  调用这个方法能取到当前数据点的指标值
  this.points  Array  这个参数比较重要，对于有坐标轴的图表，这个参数表示当前数据点所在的分类上的所有的点；对于地图，这个参数表示同一个区域上的不同的系列的点
  this.series   Object  当前数据点所在的系列

1.1 提示点自定义之样式

效果如下图：

222

1.2 提示点自定义之图片

效果如下图：

222

1.3 提示点自定义之内容

有时候我们数据提示点需要显示每个月份的所占的比例, 以及对应块的同比变化值，效果如下图：

222

2. 示例一编辑

2.1 准备数据

新建工作薄，添加内置数据集Embedded1，分别记录不同日期的访问量，如下图：
222
2.2 插入图表
以悬浮图表为例，点击插入>悬浮元素>插入图表，选择柱形图（新特性）-柱形图
2.3 图表数据设置
选中图表，在右侧图表属性表中选择图表属性表-数据，如下图所示：
2.4 图表样式设置
选中图表属性表-样式-提示，勾选上“使用数据点提示”前面的选项，点击自定义，如下图：
222
function(){ return '<h2 align="center">'+ this.category+ '</h2><table border="1"cellspacing="0" cellpadding="0" bordercolor="#FFFFFF"> <tr> <td style="color:white;">type</td> <td style="color:white;"> '+this.seriesName+' </td> </tr> <tr> <td style="color:white;">amount</td> <td style="color:white;">'+this.value+'</td> </tr> </table>';}
2.5 保存与预览
保存模板，点击分页预览，效果即如上1.1。
在线查看模板效果请点击：CustomAxisLabel2.cpt
已完成模板可参考%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\NewColumnChart\CustomAxisLabel2.cpt

3. 示例二编辑

3.1 打开模板
打开%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\NewPieChart\PieChart.cpt
3.2 图表属性设置
选中饼图，点击图表属性表-样式>提示，勾选“使用数据点提示”，内容选择“自定义”，html代码如下：
function(){return'<p><img src ="picture/logo-ch.png" align="middle"><br>帆软软件</p>';}
具体设置如下图：
222
3.3 保存与预览
保存模板，点击分页预览，效果即如上1.2。
在线查看模板效果请点击:CutPointimage.cpt
已完成模板可参考%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\NewPieChart\CutPointimage.cpt

4. 示例编辑

4.1 打开模板
打开%FR_HOME%\WebReport\WEB-INF\reportlets\ doc\Advanced\Chart\NewPieChart\PieChartBeigin.cpt
222
现在数据点提示还需要显示同期比
4.2 报表设计
首先先将字段拖到单元格中，如下图：
222
注:默认字段是纵向扩展的，这里需要设置下不扩展，因为需要显示成数组格式
4.3 图表样式
点击图表属性表-样式>提示>自定义，输入自定义代码
222
具体代码如下：
function(){ var m = contentPane.getCellValue(0,0,2); var z = contentPane.getCellValue(0,1,2); var t = contentPane.getCellValue(0,2,2); var j= m.length; for(var i=0;i<j;i++){ if(this.seriesName ==m[i]){ return '<div style="color:white;">月份：'+m[i]+' 占比：'+z[i]+' 同比：'+t[i]+'</div>' } } }
获取月份、占比和同期比，获取月份数组的长度，通过for循环，if判断，当系列名称等于月份时，数据点提示返回之前获取到的单元格字段。为了美观，这里还通过div将字的颜色设置为白色。
同时为了显示美观，将123行隐藏，设置图表的标题，如下图：
222
注：圆环内的文字是通过插入悬浮元素：普通文本实现的
4.4 保存和预览
保存模板，点击分页预览，效果即如上1.3。
在线查看模板效果请点击Tooltip.cpt
已完成模板请参照%FR_HOME%\WebReport\WEB-INF\reportlets\ doc\Advanced\Chart\NewPieChart\Tooltip.cpt