页面树结构
转至元数据结尾
转至元数据起始

温馨提示

本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配(如使用功能不一致,或多个宏代码冲突等),需根据实际需求开发代码。


地图分析报表,某个区域想突出标记,添加一个图片显示,显示效果如下

上述功能需要通过宏代码实现:

1.选中地图分析,右键选择 编辑宏 进入报表宏界面。然后在左侧的“客户端模块”上点击鼠标右键,选择“新建模块”菜单项。在出现的“新建模块”对话框上选择对象和事件。如下图所示。

2. 宏代码类型、对象和事件。

类型

对象

事件

ClientSide

chart

afterRenderer


3. 在宏代码编辑框中输入如下的代码段。

function main(chartView) {
    var chart = chartView.getChartObject(),
    map = chart.getChart(),
    points = map.series[0].points; //获取所有的区域节点
    for (var pi = points.length - 1; pi >= 0; pi--) {
        var point = points[pi],
        series = point.series;
        if (point.image) { //判断区域节点中是否有图片信息
            var img = point.image;
            var imgHeight = parseInt(img.height);
            var ret = series.translatePath([img.x, img.y + imgHeight]); //获取图片的位置信息
            if (!point.mySymbol) { //判断是否已经添加图片
                var indexi = img.src.indexOf("vision/");
                symbol = "url(" + img.src.substring(indexi + 7) + ")"; //获取具体的图片信息,并转化为地图接收的格式
                //添加图片到地图中
                point.mySymbol = map.renderer.symbol(symbol, ret[0], ret[1] - imgHeight, img.width, imgHeight).add(series.markerGroup);
            } else {
                //如果已经存在图片,则直接移动位置
                var ret = series.translatePath([img.x, img.y]);
                point.mySymbol.animate({
                    x: ret[0],
                    y: ret[1]
                });
            }
            break;
        }
    }
}
 

宏代码中的图片信息,是在svg地图文件中指定的,示例图形的svg部分代码如下:

注意:img图片的路径是相对于smartbi的vision目录,如下图,文件是在vsion目录下的img目录下。