历史版本20 :自定义提示点 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
目录:
1. 描述编辑
新图表还可以对提示点的显示内容进行自定义, 数据点提示和标签提供内容和样式的完全自定义,用户甚至可以将其设置为html内容,这里设置的数据点提示,与标签设置方式相同。
1.1 提示点自定义之样式
效果如下图:
1.2 提示点自定义之图片
效果如下图:
1.3 提示点自定义之内容
有时候我们数据提示点需要显示每个月份的所占的比例, 以及对应块的同比变化值,效果如下图:
1.4 提示点自定义之内容格式
甘特图自带提示点可能不够简洁,此时就可以使用自定义的方式去除不必要的“开始”、“结束”等文字描述,修改数据格式,效果如下图:
1.5 提示点自定义之分类下系列求和
堆积柱形图,鼠标移动到最上面的柱子,显示系列和,移动到其他柱子时,显示柱子本身实际值,效果如下图:
1.6 提示点自定义之显示父节点
多层饼图,鼠标移动到最外层节点,显示所有当前节点的父节点名,效果如下图:
2. 示例一提示点自定义之样式编辑
2.1 准备数据
新建普通报表,添加内置数据集Embedded1,分别记录不同日期的访问量,如下图:
2.2 插入图表
以悬浮图表为例,点击插入>悬浮元素>插入图表,选择柱形图-柱形图。
2.3 图表数据设置
选中图表,在右侧选择数据,如下图所示:
2.4 图表样式设置
选中样式>提示,勾选上使用数据点提示,点击自定义,输入js代码,选择使用html解析文本内容,如下图:
2.5 保存与预览
保存模板,点击分页预览,效果即如上1.1。
在线查看模板效果请点击:提示点自定义柱形图.cpt
已完成模板可参考%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\提示点自定义柱形图.cpt
3. 示例二提示点自定义之图片编辑
3.1 打开模板
打开%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\PieChart\常规饼图.cpt
3.2 图表属性设置
选中饼图,勾选上使用数据点提示,点击自定义,输入js代码,选择使用html解析文本内容,如下图:
js代码如下:
function() {
return '<p><img src ="http://localhost:8075/webroot/help/picture/logo-ch.png" align="middle"></p>';
}
3.3 保存与预览
保存模板,点击分页预览,效果即如上1.2。在线查看模板效果请点击:自定义提示点图片饼图.cpt
已完成模板可参考%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\PieChart\自定义提示点图片饼图.cpt!!!此模板的js代码需要修改!!!
4. 示例三提示点自定义之内容编辑
4.1 打开模板
打开%FR_HOME%\webapps\webroot\WEB-INF\reportlets\ doc\Advanced\Chart\PieChart\悬浮元素饼图.cpt
现在数据点提示还需要显示同期比
4.2 报表设计
首先先将字段拖到单元格中,如下图:
注:默认字段是纵向扩展的,这里需要设置下不扩展,因为需要显示成数组格式
4.3 图表样式
点击样式>提示,勾选上使用数据点提示,点击自定义,输入js代码,选择使用html解析文本内容,如下图:
具体代码如下:
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。
在线查看模板效果请点击自定义提示点内容饼图.cpt
已完成模板请参照%FR_HOME%\webroot\WEB-INF\reportlets\ doc\Advanced\Chart\PieChart\自定义提示点内容饼图.cpt
5. 示例四提示点自定义之内容格式编辑
5.1 打开模板
打开%FR_HOME%\webapps\webroot\WEB-INF\reportlets\ doc\Advanced\Chart\GanttChart\机器状态甘特图.cpt
5.2 图表属性设置
选中甘特图,点击样式>提示,勾选上使用数据点提示,点击自定义,输入js代码,选择使用html解析文本内容,如下图:
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。
在线查看模板效果请点击提示点自定义甘特图.cpt
已完成模板请参照%FR_HOME%webapps\webroot\WEB-INF\reportlets\ doc\Advanced\Chart\GanttChart\提示点自定义甘特图.cpt
6. 示例五提示点自定义之分类下系列求和编辑
6.1 打开模板
打开%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\自定义标签为系列和柱形图.cpt
6.2 图表属性设置
选中图表,点击样式>提示,勾选上使用数据点提示,点击自定义,输入js代码,选择使用html解析文本内容,如下图:
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
7.2 图表属性设置
选中图表,点击样式>提示,勾选上使用数据点提示,点击自定义,输入js代码,选择使用html解析文本内容,如下图:
代码如下:
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。