[新]提示点自定义
1. 描述
新图表还可以对提示点的显示内容进行自定义， 数据点提示和标签提供内容和样式的完全自定义，用户甚至可以将其设置为html内容，这里设置的数据点提示，与标签设置方式相同。
1.1 提示点自定义之样式
效果如下图：
1.2 提示点自定义之图片
效果如下图：
1.3 提示点自定义之内容
有时候我们数据提示点需要显示每个月份的所占的比例, 以及对应块的同比变化值，效果如下图：
1.4 提示点自定义之内容格式
甘特图自带提示点可能不够简洁，此时就可以使用自定义的方式去除不必要的“开始”、“结束”等文字描述，修改数据格式，效果如下图：
1.5 提示点自定义之分类下系列求和
堆积柱形图，鼠标移动到最上面的柱子，显示系列和，移动到其他柱子时，显示柱子本身实际值
2. 示例一提示点自定义之样式
2.1 准备数据
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"></p>';}
具体设置如下图：
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
现在数据点提示还需要显示同期比
4.2 报表设计
首先先将字段拖到单元格中，如下图：
注:默认字段是纵向扩展的，这里需要设置下不扩展，因为需要显示成数组格式
4.3 图表样式
点击图表属性表-样式>提示>自定义，输入自定义代码
具体代码如下：
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行隐藏，设置图表的标题，如下图：
注：圆环内的文字是通过插入悬浮元素：普通文本实现的
4.4 保存和预览
保存模板，点击分页预览，效果即如上1.3。
在线查看模板效果请点击Tooltip.cpt
已完成模板请参照%FR_HOME%\WebReport\WEB-INF\reportlets\ doc\Advanced\Chart\NewPieChart\Tooltip.cpt
5. 示例四提示点自定义之内容格式
5.1 打开模板
打开%FR_HOME%\WebReport\WEB-INF\reportlets\ doc\Advanced\Chart\NewGanttChart\GanttMachineState.cpt
5.2 图表属性设置
选中甘特图，点击图表属性表-样式>提示，勾选“使用数据点提示”，内容选择“自定义”，html代码如下：
function () {
var processes = this.processes.map(function(p){return p.name}).join(' - ');
var startTime = FR.contentFormat(+this.startTime, 'Dyyyy-MM-dd HH:mm:ss');
var finishTime = FR.contentFormat(+this.finishTime, 'Dyyyy-MM-dd HH:mm:ss');
var duration = this.duration.as('day');
return processes + '</br>' + startTime + '</br>' + finishTime + '</br>' + duration }
1)甘特图支持的参数包括this.seriesName, this.processes[](是一个数组形式)，this.startTime, this.finishTime, this.duration ,this.progress, this.id ，this.processesId
2)this.startTime, this.finishTime使用了FR的时间格式，需要注意前面有个 + 号
3)this.duration.as('day')表示时长加单位，可以是year, month, day, hour, minute, second
5.3 保存和预览
保存模板，点击分页预览，效果即如上1.4。
在线查看模板效果请点击GanttCustomizeTips.cpt
已完成模板请参照%FR_HOME%\WebReport\WEB-INF\reportlets\ doc\Advanced\Chart\NewGanttChart\GanttCustomizeTips.cpt
6. 示例五提示点自定义之分类下系列求和
6.1 打开模板
打开%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\NewColumnChart\CustomLabelSeriesSum.cpt
6.2 图表属性设置
选中图表，点击图表属性表-样式>提示点，勾选“使用数据点提示”，内容选择“自定义”，html代码如下：
function()
{
var vanchart = this.series.vanchart, series = vanchart.series;
if(!vanchart.seriesOfType){
series = series.column; }
var ser;
for(var i = series.length - 1; i >= 0; i--){
if((ser = series[i]).visible && this.points[i].getTargetValue() != 0){
break; } }
if(ser && ser == this.series){
var points = this.points, value = 0;//获取当前分类下所有提示点
for(var i = 0, len = points.length; i < len; i++) {
if(points[i].series.visible){
value += points[i].getTargetValue()//获取提示点的值
} }
return value; }//返回相加后的值
else{
return this.value; } }//返回各个提示点的值
注：复制代码后建议把注释去除，以免造成语句格式混乱
6.3 保存与预览
保存模板，点击分页预览，效果即如上1.5。
附件列表
标签：
已验证
文档内容仅供参考，如果你需要获取更多帮助，付费/准付费客户请咨询帆软技术支持
关于技术问题，您还可以前往帆软社区，点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题，可以联系帆软传说哥（qq：1745114201）