谷歌可视化：节点的组织图背景颜色不起作用答案

【问题标题】：Google Visualization: Organizational Chart background color for Node not working谷歌可视化：节点的组织图背景颜色不起作用
【发布时间】：2014-06-09 17:32:09
【问题描述】：

我正在使用 Google 组织结构图创建组织结构图，并为每个人使用不同颜色的框。但是，我无法让“样式”或“选定样式”在 data.setRowProperty 中用于背景颜色。它适用于边框属性。我是 javascript 和 google 可视化的新手，如果这很明显，我深表歉意。

<head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Name');
      data.addColumn('string', 'Manager');
      data.addColumn('string', 'ToolTip');
      data.addRows([
        [{v:'Row0', f:'Row0'}, '', 'The President'],
        [{v:'Row1', f:'Row1<div style="color:red; font-style:italic">Vice
                President</div>'}, 'Row0', 'VP'],
          ['Row2', 'Row0', ''],
          ['Row3', 'Row0', ''],
          ['Row4', 'Row0', ''],
          ['Row5', 'Row0', ''],
          ['Row6', 'Row1', 'Bob Sponge']
          ]);
// This works and puts a border round the node
        data.setRowProperty(3, 'style', 'border: 1px solid red');

// Neither of these work
        data.setRowProperty(4, 'style', 'background-color:red');
        data.setRowProperty(5, 'selectedStyle', 'background-color:red');

        var chart = new 
           google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
    }
    </script>
</head>
<body>
    <div id='chart_div'></div>
</body>
</html>

【问题讨论】：

太棒了！有用。非常感谢。

标签： javascript charts google-visualization

【解决方案1】：

它工作正常，问题是节点有背景图像属性，所以你看不到它是红色的。因此，为了能够查看红色节点，您还需要将背景图像设置为无。这应该有效：

      data.setRowProperty(4, 'style', 'background-color:red;background-image:none');
      data.setRowProperty(5, 'selectedStyle', 'background-color:red;background-image:none');

【讨论】：

【解决方案2】：

你应该使用 background:red 而不是 background-color:red

【讨论】：

我正在谷歌可视化表上尝试同样的解决方案。但这似乎不起作用。有什么想法吗？