自定义提示添加千分符并换行

1.1 版本

1.2 预期效果

在制作图表时，遇到系列名称太长或值太长，此时用户希望希望鼠标移动到图形上时，数据点提示中的数字能有千分位辅助展示，并保留两位小数展示。如下图所示：

1.3 解决方案

图表提示内容选择「自定义」，通过 HTML 代码实现，输入代码后，需选中「使用html解析文本内容」。如下图所示：

2.1 准备数据

点击设计器左上角「文件>新建普通报表」，新建数据库查询 ds1，输入 SQL 语句：

SELECT 

货主地区||货主省份||货主地址 AS 地址,

ROUND(SUM(应付金额*10000),2) AS 应付金额 --保留两位小数

FROM [订单]

WHERE 货主省份 = '湖南'

GROUP BY 货主地区||货主省份||货主地址

ORDER BY SUM(应付金额*10000) DESC

如下图所示：

2.2 插入图表

合并一片单元格区域，点击上方工具栏插入图表按钮，插入「饼图」。如下图所示：

2.3 绑定数据

选中图表，点击右侧属性面板「单元格元素>数据」，绑定数据集数据，分类选择「无」，系列名使用字段值，系列名选择「地址」，值选择「应付金额」，汇总方式选择「求和」。如下图所示：

2.4 设置图表样式

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.5 效果预览

2.5.1 PC 端

保存报表，点击「分页预览」，效果如 1.2 节所示。

2.5.2 移动端

注：FVS 可视化看板与决策报表均不支持移动端，普通报表同时支持 App 端和 HTML 端。

效果如下图所示：

点击下载模板：自定义换行千分符提示饼图.cpt