谷歌组织结构图:具有多种属性的样式

Google organisational charts: styling with multiple attributes

本文关键字：属性 样式 结构图 谷歌      更新时间：2023-09-26

我使用谷歌组织结构图，我可以设置一个属性

data.setRowProperty(3, 'style', 'border: 1px solid green');

然而，我也想更改背景，但输入一个以上的属性对我来说不起作用

data.setRowProperty(0, 'style', 'background-color:red; border: 1px solid green');

有人知道这能不能做到吗？

问题真的是不能设置多个还是不能设置背景色？

如果我将您的代码应用于[documentation][1]中的示例，则会添加两种样式，但不会使用背景色，因为默认情况下也会设置背景色。

      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:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'],
          [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);
          
        data.setRowProperty(0, 'style', 'background-color:red; border: 1px solid green');
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
      }
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['orgchart']}]}"></script>
       <div id="chart_div""></div>

如果检查"Mike"，则样式属性添加错误。考虑上面的例子与你的线

data.setRowProperty(0, 'style', 'background-color:red; border: 1px solid green');

并使用这条线将其与相同的东西进行比较：

data.setRowProperty(0, 'style', 'background: none; background-color:red; border: 1px solid green');
相关文章：