大家好!
我使用谷歌可视化数据表来创建一个简单的组织结构图,但我想动态更改背景颜色,如下所示。
我对行索引进行了硬编码以更改背景颜色。如何使用for循环或其他方法获取此行索引?请帮忙!!!
function OnSuccess_getOrgData(responseData) {
var orgChartTable = new google.visualization.DataTable();
orgChartTable.addColumn('string', 'Division');
orgChartTable.addColumn('string', 'Department');
orgChartTable.addColumn('string', 'Section');
orgChartTable.addColumn('string', 'Team');
orgChartTable.addColumn('string', 'Leader');
var response = responseData.d;
for (var i = 0; i < response.length; i++) {
var row = new Array();
var divisionResult = response[i].Division;
var departmentResult = response[i].Department;
var sectionResult = response[i].Section;
var teamResult = response[i].Team;
var leaderResult = response[i].Leader;
orgChartTable.addRows([
[divisionResult, '', '', '', ''],
[departmentResult, divisionResult, '', '', ''],
[sectionResult, departmentResult, '', '', ''],
[teamResult, sectionResult, '', '', ''],
[leaderResult, teamResult, '', '', '']
]);
}
orgChartTable.setRowProperty(3, 'style', 'background:#A3A2A2 !important;background-image:none');
orgChartTable.setRowProperty(4, 'style', 'background:#A3A2A2 !important;background-image:none');
orgChartTable.setRowProperty(8, 'style', 'background:#98FB98 !important;background-image:none');
orgChartTable.setRowProperty(9, 'style', 'background:#98FB98 !important;background-image:none');
orgChartTable.setRowProperty(13, 'style', 'background:#E6E6FA !important;background-image:none');
orgChartTable.setRowProperty(14, 'style', 'background:#E6E6FA !important;background-image:none');
orgChartTable.setRowProperty(18, 'style', 'background:#f0f0f0 !important;background-image:none');
orgChartTable.setRowProperty(19, 'style', 'background:#f0f0f0 !important;background-image:none');
orgChartTable.setRowProperty(23, 'style', 'background:red !important;background-image:none');
orgChartTable.setRowProperty(24, 'style', 'background:red !important;background-image:none');
orgChartTable.setRowProperty(28, 'style', 'background:green !important;background-image:none');
orgChartTable.setRowProperty(29, 'style', 'background:green !important;background-image:none');
orgChartTable.setRowProperty(33, 'style', 'background:blue !important;background-image:none');
orgChartTable.setRowProperty(34, 'style', 'background:blue !important;background-image:none');
var chart = new google.visualization.OrgChart(document.getElementById('orgChartGeneration'));
chart.draw(orgChartTable, { allowHtml: true });
}
答案 0 :(得分:0)
addRows
方法返回添加的最后一行的行索引
使用返回的行索引,
您只需将该值分配给变量
var rowIndex = orgChartTable.addRows(...
然后您可以在设置属性时再次使用
orgChartTable.setRowProperty(rowIndex, 'style'...
因为你要添加多行,所以 您可以通过减少行索引来分配其余部分
orgChartTable.setRowProperty(rowIndex, 'style'...
orgChartTable.setRowProperty(rowIndex - 1, 'style'...
orgChartTable.setRowProperty(rowIndex - 2, 'style'...
orgChartTable.setRowProperty(rowIndex - 3, 'style'...