Google Visualization DataTable更改背景顏色

Question

大家！

我已經使用谷歌可視化數據表來創建一個簡單的orgchart，但我想像下面那樣動態更改背景色。

我對行索引進行了硬編碼以更改背景色。 如何使用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'...