提示点自定义

待我称王封你为后i 2023-10-09 11:18 40阅读 0赞

## 1. 描述 ##

新图表还可以对提示点的显示内容进行自定义， 数据点提示和标签提供内容和样式的完全自定义，用户甚至可以将其设置为 HTML 内容，这里设置的数据点提示，与标签设置方式相同。

### 1.1 提示点自定义之样式 ###

效果如下图：

![format_png][]

### 1.2 提示点自定义之图片 ###

效果如下图：  
![format_png 1][]

### 1.3 提示点自定义之内容 ###

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

![format_png 2][]

### 1.4 提示点自定义之内容格式 ###

甘特图自带提示点可能不够简洁，此时就可以使用自定义的方式去除不必要的“开始”、“结束”等文字描述，修改数据格式，效果如下图：

![format_png 3][]

### 1.5 提示点自定义之分类下系列求和 ###

堆积柱形图，鼠标移动到最上面的柱子，显示系列和，移动到其他柱子时，显示柱子本身实际值，效果如下图：

![aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA3LzIwMTgwNzA2MTU1MDU4XzcyMzEuZ2lm][]

### 1.6 提示点自定义之显示父节点 ###

多层饼图，鼠标移动到最外层节点，显示所有当前节点的父节点名，效果如下图：  
![format_png 4][]

## 2. 示例一提示点自定义之样式 ##

### 2.1 准备数据 ###

新建普通报表，添加内置数据集 Embedded1，分别记录不同日期的访问量，如下图：

![format_png 5][]

### 2.2 插入图表 ###

以悬浮图表为例，点击插入>悬浮元素>插入图表，选择柱形图-柱形图。

![format_png 6][]

### 2.3 图表数据设置 ###

选中图表，在右侧选择数据，如下图所示：

![format_png 7][]

### 2.4 图表样式设置 ###

选中样式>提示，勾选上使用数据点提示，点击自定义，输入 JS 代码，选择使用 HTML 解析文本内容，如下图：

![format_png 8][]

HTML 代码如下：

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><tdstyle="color:white;">' + this.value + '</td></tr></table>';
    }

### 2.5 保存与预览 ###

保存模板，点击分页预览，效果即如上 1.1。

已完成模板可参考%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\Advanced\\Chart\\ColumnChart\\提示点自定义柱形图.cpt

点击下载：[提示点自定义柱形图.cpt][.cpt]

## 3. 示例二提示点自定义之图片 ##

### 3.1 打开模板 ###

打开%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\Advanced\\Chart\\PieChart\\常规饼图.cpt

点击下载：[常规饼图.cpt][.cpt 1]

### 3.2 图表属性设置 ###

选中饼图，勾选上使用数据点提示，点击自定义，输入 JS 代码，选择使用 HTML 解析文本内容，如下图：

![format_png 9][]

JS 代码如下：

function() {
    return '<p><img src ="../../help/picture/logo-ch.png" align="middle"></p>';
    }

### 3.3 保存与预览 ###

保存模板，点击分页预览，效果即如上 1.2。

已完成模板可参考%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\Advanced\\Chart\\PieChart\\自定义提示点图片饼图.cpt

点击下载模板：[自定义提示点图片饼图.cpt][.cpt 2]

## 4. 示例三提示点自定义之内容 ##

### 4.1 打开模板 ###

打开%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\ doc\\Advanced\\Chart\\PieChart\\悬浮元素饼图.cpt

点击下载模板：[悬浮元素饼图.cpt][.cpt 3]

![format_png 10][]

现在数据点提示还需要显示同期比

### 4.2 报表设计 ###

首先先将字段拖到单元格中，如下图：

![format_png 11][]

注:默认字段是纵向扩展的，这里需要设置下不扩展，因为需要显示成数组格式

### 4.3 图表样式 ###

点击样式>提示，勾选上使用数据点提示，点击自定义，输入 JS 代码，选择使用 HTML 解析文本内容，如下图：

![format_png 12][]

具体代码如下：

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 行隐藏：

![format_png 13][]

设置图表的标题，如下图：

![format_png 14][]

注：圆环内的文字是通过插入悬浮元素：普通文本实现的

![format_png 15][]

### 4.4 保存和预览 ###

保存模板，点击填报预览，效果即如上 1.3。

已完成模板请参照%FR\_HOME%\\webroot\\WEB-INF\\reportlets\\ doc\\Advanced\\Chart\\PieChart\\自定义提示点内容饼图.cpt

点击下载模板：[自定义提示点内容饼图.cpt][.cpt 4]

如果是frm的模板，获取单元格的格式需要改变下，需要把代码改成这段

function(){
    var a=$("td[id^=A3-]").text();var aa= a.split(",");
    var b=$("td[id^=B3-]").text();var bb= b.split(",");
    var c=$("td[id^=C3-]").text();var cc = c.split(",");
    var d=$("td[id^=D3-]").text();var dd= d.split(",");
    var j= aa.length;for(var i=0;i<j;i++){
    if (this.category == aa[i]){
    return  '级客户:\n'+aa[i] + '当月实际:' + bb[i] + '\n当月计划:' + cc[i] + '\n达成率:' + dd[i];
    }
    }
    }

## 5. 示例四提示点自定义之内容格式 ##

### 5.1 打开模板 ###

打开%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\ doc\\Advanced\\Chart\\GanttChart\\机器状态甘特图.cpt

点击下载模板：[机器状态甘特图.cpt][.cpt 5]

### 5.2 图表属性设置 ###

选中甘特图，点击样式>提示，勾选上使用数据点提示，点击自定义，输入 JS 代码，选择使用 HTML 解析文本内容，如下图：

![format_png 16][]

JS 代码如下：

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。

已完成模板请参照%FR\_HOME%webapps\\webroot\\WEB-INF\\reportlets\\ doc\\Advanced\\Chart\\GanttChart\\提示点自定义甘特图.cpt

点击下载模板：[提示点自定义甘特图.cpt][.cpt 6]

## 6. 示例五提示点自定义之分类下系列求和 ##

### 6.1 打开模板 ###

打开%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\Advanced\\Chart\\ColumnChart\\自定义标签为系列和柱形图.cpt

点击下载模板：[自定义标签为系列和柱形图.cpt][.cpt 7]

### 6.2 图表属性设置 ###

选中图表，点击样式>提示，勾选上使用数据点提示，点击自定义，输入 JS 代码，选择使用 HTML 解析文本内容，如下图：

![format_png 17][]

JS 代码如下：

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。

## 7. 示例六提示点自定义之显示父节点 ##

### 7.1 打开模板 ###

打开%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\Advanced\\Chart\\MultiLevelPie\\多层饼图.cpt

点击下载模板：[多层饼图.cpt][.cpt 8]

### 7.2 图表属性设置 ###

选中图表，点击样式>提示，勾选上使用数据点提示，点击自定义，输入 JS 代码，选择使用 HTML 解析文本内容，如下图：

![format_png 18][]

代码如下：

function() {
    var currentNode = this,
    root = currentNode.series.root,
    nodePath = currentNode.name;
    while ((currentNode = currentNode.parent) && currentNode != root) {
    nodePath += ("的父节点是" + currentNode.name)
    }
    return nodePath;
    }

### 7.3 保存与预览 ###

保存模板，点击分页预览，效果即如上 1.6。

已完成模板请参照%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\ doc\\Advanced\\Chart\\MultiLevelPie\\提示点自定义显示父节点多层饼图.cpt。

点击下载模板：[提示点自定义显示父节点多层饼图.cpt][.cpt 9]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA3LzIwMTgwNzA2MTU1MDU3XzQ4MDEucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA3LzIwMTgwNzA2MTU1MDU4XzI4NDEuanBn?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA3LzIwMTgwNzA2MTU1MDU4XzIyMzIucG5n?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA3LzIwMTgwNzA2MTU1MDU4XzkwNDYucG5n?x-oss-process=image/format,png
[aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA3LzIwMTgwNzA2MTU1MDU4XzcyMzEuZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA3LzIwMTgwNzA2MTU1MDU4XzcyMzEuZ2lm
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA3LzIwMTgwNzA2MTU1MDU4XzY2NDcucG5nP3ZlcnNpb249MSZtb2RpZmljYXRpb25EYXRlPTE1MTAyODM2OTYwMDAmYXBpPXYy?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA3LzIwMTgwNzA2MTU1MDU4Xzc1NzEucG5nP3ZlcnNpb249MSZtb2RpZmljYXRpb25EYXRlPTE1MTAyODM2OTUwMDAmYXBpPXYy?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA4LzE1MzU3MDkxMzRmSVBkNmlOQS5wbmc?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA3LzIwMTgwNzA2MTU1MDU4Xzg4NzAucG5nP3ZlcnNpb249MSZtb2RpZmljYXRpb25EYXRlPTE1MTAyODM2OTUwMDAmYXBpPXYy?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA4LzE1MzU3MDkyNTBQb2ZXMDJIUi5wbmc?x-oss-process=image/format,png
[.cpt]: https://help.finereport.com/doc-download-/uploads/file/20190924/%E6%8F%90%E7%A4%BA%E7%82%B9%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9F%B1%E5%BD%A2%E5%9B%BE.cpt
[.cpt 1]: https://help.finereport.com/doc-download-/uploads/file/20190924/%E5%B8%B8%E8%A7%84%E9%A5%BC%E5%9B%BE.cpt
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA5LzE1MzU5NDE3MzllbnhJMHNhbS5wbmc?x-oss-process=image/format,png
[.cpt 2]: https://help.finereport.com/doc-download-/uploads/file/20190924/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8F%90%E7%A4%BA%E7%82%B9%E5%9B%BE%E7%89%87%E9%A5%BC%E5%9B%BE.cpt
[.cpt 3]: https://help.finereport.com/doc-download-/uploads/file/20190924/%E6%82%AC%E6%B5%AE%E5%85%83%E7%B4%A0%E9%A5%BC%E5%9B%BE.cpt
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA3LzIwMTgwNzA2MTU1MDU4XzExMjIucG5nP3ZlcnNpb249MSZtb2RpZmljYXRpb25EYXRlPTE1MTAyODM2OTQwMDAmYXBpPXYy?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA5LzE1MzU5NDE5MjZaTjlRa1dZNS5wbmc?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA5LzE1MzU5NDIwMDhZVG81OVp5WS5wbmc?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA4LzE1MzU3MDk3OThSZjF6cnJTQy5wbmc?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA4LzE1MzU3MDk4MzY1WXNyZmppWi5wbmc?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA4LzE1MzU3MDk4NDVXNlpXeVZiRS5wbmc?x-oss-process=image/format,png
[.cpt 4]: https://help.finereport.com/doc-download-/uploads/file/20190924/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8F%90%E7%A4%BA%E7%82%B9%E5%86%85%E5%AE%B9%E9%A5%BC%E5%9B%BE.cpt
[.cpt 5]: https://help.finereport.com/doc-download-/uploads/file/20190924/%E6%9C%BA%E5%99%A8%E7%8A%B6%E6%80%81%E7%94%98%E7%89%B9%E5%9B%BE.cpt
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA5LzE1MzU5NDMyNzhCU2FqUkUyZy5wbmc?x-oss-process=image/format,png
[.cpt 6]: https://help.finereport.com/doc-download-/uploads/file/20190924/%E6%8F%90%E7%A4%BA%E7%82%B9%E8%87%AA%E5%AE%9A%E4%B9%89%E7%94%98%E7%89%B9%E5%9B%BE.cpt
[.cpt 7]: https://help.finereport.com/doc-download-/uploads/file/20190924/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%87%E7%AD%BE%E4%B8%BA%E7%B3%BB%E5%88%97%E5%92%8C%E6%9F%B1%E5%BD%A2%E5%9B%BE.cpt
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODEyLzE1NDM3OTY3MjBtOTBXNEd4Zy5wbmc?x-oss-process=image/format,png
[.cpt 8]: https://help.finereport.com/doc-download-/uploads/file/20190924/%E5%A4%9A%E5%B1%82%E9%A5%BC%E5%9B%BE.cpt
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9oZWxwLmZpbmVyZXBvcnQuY29tL3VwbG9hZHMvMjAxODA5LzE1MzU5NDIzNzNxYjhESUloYS5wbmc?x-oss-process=image/format,png
[.cpt 9]: https://help.finereport.com/doc-download-/uploads/file/20190924/%E6%8F%90%E7%A4%BA%E7%82%B9%E8%87%AA%E5%AE%9A%E4%B9%89%E6%98%BE%E7%A4%BA%E7%88%B6%E8%8A%82%E7%82%B9%E5%A4%9A%E5%B1%82%E9%A5%BC%E5%9B%BE.cpt