历史版本10 :地图自定义标签位置 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 问题描述编辑
我们在日常使用地图过程中，通常会遇到地图标签，提示点等显示不满足我们的需求，需要进行js代码编写。
例如：在使用地图过程中，我们会发现很多地名显示的位置偏离。这时候我们都需要使用js进行调控。
新图表支持全面自定义，使得用户可以在基础图表上做出更多注释型的图表。
在这个自定义函数里，this指代的是当前的数据点对象，常用的属性说明如下：
| 属性 | 类型 | 说明 |
|---|---|---|
| this.category | String | 当前数据点所在的分类的名字 |
| this.seriesName | String | 当前数据点所在的系列的名字 |
| this.name | String | 对于地图来说，name表示当前数据点的区域名，比如江苏省，南通市等等 |
| this.percentage | Number | 表示当前数据点所占的百分比 |
| this.getTargetValue() | Function | 调用这个方法能取到当前数据点的指标值 |
| this.points | Array | 这个参数比较重要，对于有坐标轴的图表，这个参数表示当前数据点所在的分类上的所有的点；对于地图，这个参数表示同一个区域上的不同的系列的点 |
| this.series | Object | 当前数据点所在的系列 |
下面以黑龙江和内蒙古为例，调整后的效果如下，标签位置正确，提示采用了自定义格式：
2. 示例编辑
2.1 新建地图
以区域地图为例，新建表单，拖入地图（新特性）组件，地图边界选择区域地图下的中国（省级）：
2.2 数据准备
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;}
此处做一个简单的循环，循环展示我们前端设置的参数，并对参数做单独的处理，包括控制字体大小，以及显示格式
其他提示点自定义格式还可参考坐标轴&标签&提示点自定义