Google Visualization DataTable 更改背景颜色答案

【问题标题】：Google Visualization DataTable Change background colorGoogle Visualization DataTable 更改背景颜色
【发布时间】：2018-06-24 19:34:01
【问题描述】：

大家！

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

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

【问题讨论】：

addRows 方法返回添加的最后一行的行索引，您可以使用它来知道要设置哪个行属性 -- 使用 addRow 方法可能更容易，它也返回行索引，但一次只返回一行...
orgChartTable.addRows([ [divisionResult, '', '', '', ''], [departmentResult, divisionResult, '', '', ''], [sectionResult, departmentResult, ' ', '', ''], [teamResult, sectionResult, '', '', ''], [leaderResult, teamResult, '', '', ''] ]);我已经使用了上面的 addRows 方法，但我不知道如何返回行索引。你能举个例子吗？

标签： javascript ajax datatable google-visualization

【解决方案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'...

【讨论】：