1. 概述编辑
1.1 问题描述
地图中我们可以使用自定义地图,通过提示点等直接与图片进行交互。
地图中我们可以直接在设计器中进行自定义地图,只需导入自己的图片,进行描边或者放置标记点,即可使用。
地图选择自定义图片,自定义地图编辑界面。
2. 示例编辑
2.1 自定义图片 JSON
制作地图 JSON 的目的是为了自定义图片,只需导入自己的图片,进行描边或者放置标记点。
2.2 新建自定义图片
1)进入数据决策系统,点击管理系统>地图配置>自定义图片,新建自定义图片地图2Fmarket,如下图所示:
2)点击2Fmarket,点击导入图片按钮上传图片,如下图所示:
3)点击右侧的绘图工具,共有两种方式进行设置区域名,设置完成后点击弹窗的保存按钮,再点击右上角保存按钮,如下图所示:
第一种方式,对图片进行描边,描边完成后,设置对应的区域名;
第二种方式,在图片中,点击放置标记点,标记点放置完成后,设置对应标记点的区域名;
注:标签会自动显示在区域中心,当中心点自定义的时候,就会显示在对应的位置
注:需要重启一下服务器,自定义地图才可以生效
2.2 准备数据
新建普通报表,添加内置数据集 market,分别记录各个商铺对应的商品和品牌,如下图所示:
2.3 插入图表
以单元格图表为例,合并一片单元格,点击插入>单元格元素>插入图表,选择地图,如下图:
选中图表,在右侧选择类型,地图边界选择刚刚自定义好的 2Fmarket,如下图所示:
2.4 图表数据设置
选中图表,在右侧选择 数据,如下图所示:
2.5 图表样式设置
1)选择样式>图例,取消勾选图例可见,如下图所示:
2)选择样式>系列,自定义配色,如下图所示:
3)选择样式>标签,勾选使用标签,内容勾选区域名,自定义设置样式,如下图:
按照需要可在图表属性表中进一步设置图表样式,例如设置标题,字体大小颜色,图例,系列配色,提示等,这里不再一一介绍
2.6 效果预览
1)PC端
保存模板,点击分页预览,效果如下图所示:
2)移动端
3. 模板下载编辑
已完成模板可参考%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\Map\商场自定义地图.cpt
点击下载模板: