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

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

javascript charts google-visualization

Javascript Google图表/可视化中绘制的节点和数据节点之间的关系,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我正在使用谷歌组织结构图来显示网站的页面层次结构我想根据一些其他因素给方框上色——特别是页面的最后更新时间，但这个问题更一般我可以加载数据并绘制图表我在数据中增加了一列，并绘制了图表然后document.querySelectorAll（'.google可视化orgchart节点'）为我提供了一个图表节点列表但是我不知道如何把这些数据连接起来。我可以解析文本内容，但这看起来真的很混乱绘制的节点和数据节点之间是否没有关系？我编辑了一个Google示例以包含一个额外的数据列，它位于JS

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

我想根据一些其他因素给方框上色——特别是页面的最后更新时间，但这个问题更一般

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

我在数据中增加了一列，并绘制了图表

然后

document.querySelectorAll（'.google可视化orgchart节点'）为我提供了一个图表节点列表
但是我不知道如何把这些数据连接起来。我可以解析文本内容，但这看起来真的很混乱
绘制的节点和数据节点之间是否没有关系？
我编辑了一个Google示例以包含一个额外的数据列，它位于JSFIDLE上

谷歌可视化API示例
load（'visualization'，'1'，{packages:['orgchart']}）；
函数drawVisualization（）{
//创建并填充数据表。
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']）；
addRow（[{v:'Jim'，f:'Jim
副总裁'}，'Mike'，null，'b']）；
addRow（['Alice'，'Mike'，null，'c']）；
addRow（['Bob'，'Jim'，'Bob Spoone'，'d']）；
addRow（['Carol'，'Bob'，null，'e']）；
//创建并绘制可视化。
var v=document.getElementById（'visualization'）；
var orgChart=newgoogle.visualization.orgChart（v）；
draw（数据，{allowtml:true}）；
var节点=document.querySelectorAll（'.google可视化orgchart节点'）；
对于（var i=0；i
您希望在绘图之前在数据表上设置。我注意到图表选择事件可以解析数据行和数据列。但是，试图通过混淆进行调试让我头疼。这一次，这将满足我的需要。遗憾的是，没有解决关系的开放式方法，也没有设置更多属性的能力。你能具体说明你觉得缺少什么吗？我们很乐意将错误/优先级归档。只要能够告诉绘制对象所代表的数据行或单元格即可。因此，一旦绘制了图表，我们就可以迭代document.queryselectoral（'chart_DATA_ITEM_SELECTOR'）并设置或调整html | svg |属性。现在我知道了设置样式的方法，我可以使用它了。但是能够设置其他属性可能会很有用。在我正在编写的报告中，我想使用组织结构图，并根据上次更新的日期设置背景颜色，以便最近未更新的项目显示为红色，并且随着它们的更新而变亮。
 <!--
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>