1. 概述
1.1 版本说明
报表服务器版本 | JAR包版本 | 功能变动 |
---|---|---|
10.0,11.0 |
1.2 预期效果
在制作图表时,遇到系列名称太长或值太长,此时用户希望希望鼠标移动到图形上时,数据点提示中的数字能有千分位辅助展示,并保留两位小数展示。如下图所示:
1.3 解决方案
图表提示内容选择「自定义」,通过 HTML 代码实现,输入代码后,需选中「使用html解析文本内容」。如下图所示:
2. 示例
2.1 准备数据
点击设计器左上角「文件>新建普通报表」。
新建sql数据集,sql及查询结果如下图所示:
2.2 设计报表
2.2.1 插入图表
先选中一片单元格区域,点击上方工具栏「合并单元格」按钮,再点击「插入图表」按钮,选择「饼图」。如下图所示:
2.2.2 绑定数据
选中图表,点击右侧属性面板「单元格元素>数据」,绑定数据集数据,分类选择「无」,系列名使用字段值,系列名选择「地址」,值选择「占比」。如下图所示:
2.2.3 设置图表样式
1)设置标题
选中图表,选择「单元格元素>样式>标题」,输入文本「居民点应付金额占比」。如下图所示:
2)设置标签
选中图表,选择「单元格元素>样式>标签」,勾选「使用标签」,值标签内容选择「通用」,勾选「值」,设置值的格式为百分比。如下图所示:
3)设置系列
选中图表,选择「单元格元素>样式>系列」,修改系列颜色。如下图所示:
4)设置提示
选中图表,选择「单元格元素>样式>提示」,内容选择「自定义」,输入代码如下:
function(){
var aa = (this.value).toString();//给数据值转成字符串
var str = aa.substring(0,aa.length-3);//截取一下整数部分
var bb = aa.substring(aa.length-3,aa.length);//截取一下小数部分
var arr = [];
var num = str.length % 3;
if(num==0){
for (var i = 0; i < str.length / 3; i++) {
substr = str.substring(i*3, (i + 1) * 3);
arr.push(substr);
};
}else{
substr = str.substring(0, num);
arr.push(substr);
for (var i = 0; i < Math.floor(str.length / 3); i++) {
substr = str.substring(num + i * 3, num + (i + 1) * 3);
arr.push(substr);
};
} //给整数部分加个千分符
var cc = (this.seriesName+"</br>"+arr+bb+'万元');//换行输出系列名称及转换为千分符格式数字,并添加单位后缀
return cc;}
2.3 效果预览
2.3.1 PC 端
2.3.2 移动端
FVS 可视化看板与决策报表均不支持移动端,普通报表同时支持 App 端和 HTML 端。效果如下图所示:
3. 模板下载
自定义换行千分符提示饼图.cpt FVS 模板下载:自定义换行千分符提示饼图.fvs