如何更改Google Organization Chart链接线的颜色和粗细?

爱因赫

我在用javascript摆弄Google的组织结构图,但是我不知道如何更改链接线的颜色和粗细。该文档仅讨论样式设置节点,但没有任何连接它们的链接。

如何为链接设置样式?

白帽

连接节点的线路没有配置选项

但您可以覆盖用于设置这些行样式的css

在这里,厚度和颜色使用cssborder属性进行更改

#chart_div .google-visualization-orgchart-linebottom {
  border-bottom: 4px solid magenta;
}

#chart_div .google-visualization-orgchart-lineleft {
  border-left: 4px solid magenta;
}

#chart_div .google-visualization-orgchart-lineright {
  border-right: 4px solid magenta;
}

#chart_div .google-visualization-orgchart-linetop {
  border-top: 4px solid magenta;
}

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['orgchart']
}).then(function () {
  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', '']
  ]);

  var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
  chart.draw(data, {allowHtml:true});
});
#chart_div .google-visualization-orgchart-linebottom {
  border-bottom: 4px solid magenta;
}

#chart_div .google-visualization-orgchart-lineleft {
  border-left: 4px solid magenta;
}

#chart_div .google-visualization-orgchart-lineright {
  border-right: 4px solid magenta;
}

#chart_div .google-visualization-orgchart-linetop {
  border-top: 4px solid magenta;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用apex-d3-organization-chart插件

更改单选按钮外边框颜色和粗细

是否可以在HTML中更改字体颜色和字体粗细

在grid.curve中更改线的颜色和粗细。[R

如何更改Google Chart API条形图上的标签颜色?

如何更改Google搜索建议的字体颜色?

如何更改标签颜色-Donutchart Google API

如何更改Google Maps标记的颜色?

使用 jQuery 在 textarea 中匹配和突出显示标签/单词(更改颜色和字体粗细)

isActive时如何更改链接和图标的颜色?

使用 oDATA REST 和 JavaScript 从 Organization-Service 获取 EntityReference

如何更改外部链接的颜色?

如何更改活动链接的颜色?

更改ID中的链接和字体颜色

如何更改某些xticklables matlab的字体粗细和大小?

如何更改返回的Google地图路线上的虚线的颜色

Google React Maps-如何更改控件颜色?

如何更改Google Map API可拖动标记的颜色?

快速选择时如何更改Google Maps标记的颜色?

如何使用 Vue JS 更改 Google Map 标记的颜色

Google图表:如何更改百分比标签颜色?

如何在Google气泡图中更改气泡颜色

Google图表:如何在注释图表中更改负值的颜色

如何使用事件(Google图表)更改图表颜色

如何在Google地图中更改特定道路的颜色?

ggRadar - 如何更改绘图线粗细和网格线粗细?

如何在Google图表中更改所选列边框的颜色和宽度?

如何更改Angular-Chart.js的颜色

如何更改ng2-chart的颜色?