[新]地图标签和提示点位置自定义

编辑
  • 文档创建者:我从山中来
  • 浏览次数:4894次
  • 编辑次数:17次
  • 最近更新:Kevin-s 于 2019-06-04
  • 1. 问题描述

    我们在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行自定义。

    例如:在使用地图过程中,我们会发现很多地名显示的位置偏离。这时候我们都需要使用自定义功能进行调控。

    下面以黑龙江和内蒙古为例,调整后的效果如下,标签位置正确,提示采用了自定义格式:



    2. 示例

    2.1 新建地图

    新建决策报表,拖入地图组件,地图边界选择区域地图下的中国:



    2.2 数据准备

    新建工作薄,添加数据集 ds1:SELECT * FROM 地图1选中图表,选择图表属性表-数据,如下图所示:



    2.3 基础样式设置

    选择图表属性表- 样式>图例,形态设为区域段,主题颜色设为绿色,标签选择数字格式,如下图:


    选择图表属性表- 样式>系列,如下图设置,边框设为蓝色:




    2.4 自定义 JS 显示标签

    选择图表属性表-样式>标签,内容选择自定义,JS 如下:


    function(){
     var points = this.points; 
    var total = '<div style="width:100%;height:100%;">';
    if(this.name=="内蒙古自治区")
    {total += '<div align=center style="margin-top:30px"><span 
    style="font-size:25px;color:'+FR.contentFormat(points[1].value, 
    '')+'">' +FR.contentFormat(points[2].value, 
    '#0.00')+'</span>'+this.name+'</div>';}
    else if(this.name=="黑龙江省")
    {total += '<div align=center style="margin-top:100px;"><span 
    style="font-size:25px;color:'+FR.contentFormat(points[1].value, 
    '')+'">'+ FR.contentFormat(points[2].value, 
    '#0.00')+'</span>'+this.name+'</div>';}
    else{total += '<div align=center ><span 
    style="font-size:25px;color:'+FR.contentFormat(points[1].value, 
    '')+'">'+FR.contentFormat(points[2].value, 
    '#0.00')+'</span>'+this.name+'</div>';} 
    for(var i = 0, len = points.length-2; i < len; i++)
    {total += ('<div  align=center>'+FR.contentFormat(points[i].value,
     '#0.00')+'</div>');}
    total+='</div>'; return total;}

    div align=center style="margin-top当读取名字为内蒙古自治区时候,我们进行margin显示位置的调整,使其不显示偏离

    FR.contentFormat(value, '#.##%')进行数值格式自定义,后面的'#.##%'可以根据实际需求进行更改;

    this.points这个参数在地图中使用时表示同一个区域上的不同的系列的点

    其他标签自定义格式还可参考标签自定义



    2.5 自定义 JS 显示提示点

    选择图表属性表-样式>提示,内容选择自定义,JS 如下:



    function(){var
     points = this.points ;
    var total = '<div style="width:100%;
    background-color:#808080;color:white">';
    total +='<div align=left 
    style="font-size:16px">'+this.name+'</div>';
    for(var i = 0, len = points.length-1; i < len; i++) 
    {total +='<div align=left 
    style="font-size:13px">●'+points[i].seriesName+':'+FR.contentFormat(points[i].value,
     '')+'</div>';} 
    return total;}

    此处做一个简单的循环,循环展示我们前端设置的参数,并对参数做单独的处理,包括控制字体大小,以及显示格式

    其他提示点自定义格式还可参考 提示点自定义

    3. 保存预览

    点击预览,效果如上图。

    已完成模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\地图标签和提示点位置自定义.frm


    附件列表


    主题: 图表应用
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]