gpt4 book ai didi

javascript - Google图表/可视化中绘制的节点和数据节点之间的关系

转载 作者:行者123 更新时间:2023-11-28 08:41:55 26 4
gpt4 key购买 nike

我正在使用 Google 组织结构图来显示网站的页面层次结构。

我想根据其他一些因素为框着色 - 特别是页面的上次更新时间,但这个问题更为笼统。

我可以加载数据并绘制图表。

我在数据中添加了一个额外的列并绘制了图表。

然后 document.querySelectorAll('.google-visualization-orgchart-node'); 为我提供图表节点列表。

但我不知道如何将其连接回数据。我可以解析文本内容,但这看起来真的很困惑/hacky。

绘制的节点和数据节点没有关系吗?

我编辑了一个 Google 示例以包含一个额外的数据列,它位于 jsfiddle http://jsfiddle.net/adrianjmartin/4Xadv/

 <!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['orgchart'] });
</script>
<script type="text/javascript">
function drawVisualization() {

// Create and populate the data table.
var data = new google.visualization.DataTable;

data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
data.addColumn('string' , 'extraData')

var r;

r = data.addRow(['Mike', null, 'The President','a']);
data.addRow([{ v: 'Jim', f: 'Jim<br/><font color="red"><i>Vice President<i></font>' }, 'Mike', null,'b']);
data.addRow(['Alice', 'Mike', null,'c']);
data.addRow(['Bob', 'Jim', 'Bob Sponge','d']);
data.addRow(['Carol', 'Bob', null,'e']);


// Create and draw the visualization.
var v = document.getElementById('visualization');

var orgChart = new google.visualization.OrgChart(v);


orgChart.draw(data, { allowHtml: true });

var nodes = document.querySelectorAll('.google-visualization-orgchart-node');
for (var i = 0 ; i < nodes.length; i++) {
console.log(nodes[i]);
}


}




google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
</body>
</html>

最佳答案

您想要设置 style在绘制之前在数据表上。

关于javascript - Google图表/可视化中绘制的节点和数据节点之间的关系,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20377448/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com