charts - 谷歌组织结构图 - 谷歌可视化

Question

我使用 orgchart 创建了一个类似于以下内容的图表。通过存储在mysql表中的数据生成图表（使用php）。

我的问题是我想在每个节点中显示深度级别以及其他详细信息。怎么做？

Example: Food -> Level 1 Vegetable and Meat -> Level 2 Vegetable 1, Vegetable 2 and Meat 1 -> Level 3

** 有api方法（data.getSelection.row）来获取所选节点的行（深度）。但它似乎总是给出所选节点的索引而不是所选节点的行。**

Answer 1

不知道你想如何显示它们，但这是我想出的想法：

      var depth = {}; // here we store node depths
      google.visualization.events.addListener(chart, 'ready', function () {
          for (var i = 0; i < data.getNumberOfRows(); i++) {
              depth[i] = 0; // we iniialize all in 0 depth
          }
          for (var i = 0; i < data.getNumberOfRows(); i++) { // for each row
              var childs = chart.getChildrenIndexes(i); // we check its descendants
              for (var child = 0; child < childs.length; child++) {
                  depth[childs[child]] += depth[i] + 1; // and add the parents depth+1
              }
          }
          console.log(depth) // here we have already all nodes depth
      });
      google.visualization.events.addListener(chart, 'select', function () {
          if (chart.getSelection().length > 0) {
              var node_row = chart.getSelection()[0].row;
              console.log(depth[node_row]) // now just show the depth of selected node
          }
      })
      chart.draw(data, {
          allowHtml: true
      });

工作小提琴：http: //jsfiddle.net/a2zwqf1r/