Question

我正在使用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>

Answer 1

您想在绘图之前在DataTable上设置style。

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

1 个答案: