温馨提示
本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。
地图分析报表，在每个区块上显示了该地区对应的指标值，而用户还希望看到各个地区的汇总值，比如要求在报表的左下角区域显示一个浮动的表格，上面逐行显示各个指标的地区汇总值。该需求如何实现呢，其实也很简单，可以用宏代码的方式实现上述需求，完整的操作步骤如下。
1. 我们可以在地图分析报表的表尾部分添加一个表格，然后将其移动到报表的左下角，并浮动显示。设计这个表格，不太容易，有个小技巧，可以在Word中把表格样式设置好，如下图所示。
2. 然后将表格拷贝到剪贴板。在Smartbi“定制 -> 展现定制”模块打开地图分析报表，点击工具栏上“地图设置”按钮，切换到“设置表尾”，把拷贝的表格粘贴过来。此时地图分析报表如下图。
3. 选中地图分析，右键选择 编辑宏 进入报表宏界面。然后在左侧的“客户端模块”上点击鼠标右键，选择“新建模块”菜单项。在出现的“新建模块”对话框上选择对象和事件。
4. 宏代码类型、对象和事件。
类型 | 对象 | 事件 |
|---|---|---|
ClientSide | chart | afterRenderer |
5. 在宏代码编辑框中输入如下的代码段。
/**
* 在地图分析报表上显示一个浮动的表格展示各地区汇总值
*/
function main(chartView) {
//debugger;
// 执行SQL语句，查询各地区的汇总值
var data = getAreaSumValue(chartView);
if (!data || data.length < 1) {
return;
}
// 先找到表尾部分对应的DOM对象
var domutils = jsloader.resolve("freequery.lang.domutils");
var vTailEle = domutils.findElementByBofid(chartView.getContext().elemVTail, "vTail");
// 获取表格上的数据行，然后逐个修改汇总值列的各个单元格数值
var rows = vTailEle.getElementsByTagName("TR");
for (var i = 1; i < rows.length; i++) {
// 获取每行上的第二个单元格，并设置单元格数值
var row = rows[i];
var sumValueTd = row.firstChild.nextSibling;
sumValueTd.firstChild.innerHTML = data[0][i - 1].displayValue;
}
// 然后把表尾部分的这个表格移动到地图的左下角
var highMap = chartView.getChartObject().getChart();
var text2 = highMap.renderer.text(vTailEle.outerHTML, 10, 370).css({
color: '#4572A7',
fontSize: '16px'
}).attr({
zIndex: 0
}).add();
};
/**
* 执行SQL语句，查询各地区的汇总值
*/
function getAreaSumValue(chartView) {
// 获取两个参数的当前值，以便传入到SQL语句中
var yearVal = chartView.getContext().getCurrentParamValue("销售时间");
var monthVal = chartView.getContext().getCurrentParamValue("销售月份");
var util = jsloader.resolve("freequery.common.util");
var ret = util.remoteInvoke("DataSourceService", "getDataByQuerySql", ["DS.northwind", "select SUM(T7.Quantity * T7.UnitPrice * (1 - T7.Discount)) as F1, SUM(T7.Quantity) as F2, SUM(T8.Freight) as F3 from orders T8 right outer join orderdetails T7 on T8.OrderID = T7.OrderID inner join maparea T6 on T8.ShipCity = T6.c_title where left(T8.OrderDate, 4) = '" + yearVal + "'" + " and substring(T8.OrderDate, 6, 2) = '" + monthVal + "'", 0, 1000]);
if (ret.succeeded && ret.result) {
var data = ret.result.data;
return data;
}
};
6. 点击地图分析工具栏上的“视图”按钮，将“显示表尾”设置为未选中状态。然后在浏览界面打开该地图分析报表，查看效果，如下图所示。当切换参数的时候，浮动表格中的“各地区汇总值”也会同步变化。
附录：利用Word生成表格的HTML代码时，里面会包含大量的无效HTML标记，不便于在JS代码中对其DOM对象进行操作。我们可以直接在JS代码手动拼写HTML内容，宏代码示例如下：
/**
* 在地图分析报表上显示一个浮动的表格展示各地区汇总值
*/
function main(chartView) {
debugger;
// 手动拼写浮动表格的HTML
var gridHTML = ['<table border="1" style="border-collapse: collapse;">', '<tr><td colspan="2" align="center">全国汇总值（万元）</td></tr>', '<tr><td align="right">销售额：</td><td>1</td></tr>', '<tr><td align="right">销售量：</td><td>2</td></tr>', '</table>'].join("");
// 然后把这个表格HTML添加到地图的左下角
var highMap = chartView.getChartObject().getChart();
var text2 = highMap.renderer.text(gridHTML, 130, 330, true).css({
color: '#4572A7',
fontSize: '16px'
}).attr({
zIndex: 0
}).add();
// 执行SQL语句，查询各地区的汇总值
var data = getAreaSumValue(chartView);
if (!data || data.length < 1) {
return;
}
// 先找到表尾部分对应的DOM对象
var domutils = jsloader.resolve("freequery.lang.domutils");
debugger;
var vTailEle = text2.element; // 获取表格上的数据行，然后逐个修改汇总值列的各个单元格数值
var rows = vTailEle.getElementsByTagName("tr");
for (var i = 1; i < rows.length; i++) {
// 获取每行上的第二个单元格，并设置单元格数值
var row = rows[i];
var sumValueTd = row.firstChild.nextSibling;
sumValueTd.firstChild.nodeValue = data[0][i - 1].displayValue;
}
};
/**
* 执行SQL语句，查询各地区的汇总值
*/
function getAreaSumValue(chartView) {
debugger;
// 获取两个参数的当前值，以便传入到SQL语句中
var yearVal = chartView.getContext().getCurrentParamValue("销售年份");
var monthVal = chartView.getContext().getCurrentParamValue("销售月份");
if (monthVal < 10) {
monthVal = "0" + monthVal;
}
var util = jsloader.resolve("freequery.common.util");
var ret = util.remoteInvoke("DataSourceService", "getDataByQuerySql", ["DS.northwind", "select SUM(T48.Quantity * T48.UnitPrice * (1 - T48.Discount)) as F27, SUM(T48.Quantity) as F26 from orders T49 right outer join orderdetails T48 on T49.OrderID = T48.OrderID inner join maparea T47 on T49.ShipCity = T47.c_title where left(T49.OrderDate, 4) = '" + yearVal + "'" + " and substring(T49.OrderDate, 6, 2) = '" + monthVal + "'", 0, 1000]);
if (ret.succeeded && ret.result) {
var data = ret.result.data;
return data;
}
};
示例运行效果如下图：
原始文档：http://pan.baidu.com/s/1tO42a
