javascript - Google 可视化数据表更改背景颜色

Question

大家!

我使用谷歌可视化数据表创建一个简单的组织结构图，但我想动态更改背景颜色，如下所示。

我对行索引进行了硬编码以更改背景颜色。如何使用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 });
    }

Answer 1

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'...