有没有可能对谷歌图表上的组织 struct 图的层次 struct 有更多的控制?

插图:

on website developers.google.com for the below example:
before

can Alice be placed vertically down to Bob's side (level) as below:
after

以下是示例代码

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        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', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true});
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

推荐答案

这里有一个可以做到这一点的黑客方法.创建一个 node ,您基本上可以在其中隐藏除左边框之外的所有内容,并将其定位为与图表的其余线条对齐.

唯一的 node ID应该以"__hideme"开头,这样除了左边框之外,这些ID都可以被检测和隐藏.

所以不是这个 node ,

          ['Alice', 'Mike', ''],

创建一个隐藏 node 并将其放置在Mike和Alice之间,如下所示:

          ['__hideme1', 'Mike', ''],
          ['Alice', '__hideme1', ''],

以下是完整的代码:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        const rows = [
          [{'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'],
          ['__hideme1', 'Mike', ''],
          ['Alice', '__hideme1', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ];
        data.addRows(rows);


        rows.forEach((value, index) => {
          if ((typeof value[0] === "string") && 
               value[0].startsWith("__hideme")) {
            // display all nodes that have an id that begins with "__hideme"
            // as a line
            data.setRowProperty(index, 'style', 'color: transparent; background: transparent; border: 0; border-left: 0.8px solid #3388dd; border-radius: 0; box-shadow: 0 0; position:relative; left: 41px; ');
          }
        });


        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true });
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Javascript相关问答推荐

单击按钮后未清除 Select

从外部访问组件变量-Vueejs

如何保持子画布元素的1:1宽高比?

在贝塞尔曲线的直线上找不到交叉点:(使用@Pomax的bezier.js)

Redux工具包查询(RTKQ)端点无效并重新验证多次触发

通过在页面上滚动来移动滚动条

IMDB使用 puppeteer 加载更多按钮(nodejs)

使用续集和下拉栏显示模型属性

编剧如何获得一个div内的所有链接,然后判断每个链接是否都会得到200?

ChartJs未呈现

使用getBorbingClientRect()更改绝对元素位置

Vaadin定制组件-保持对javascrip变量的访问

有没有一种直接的方法可以深度嵌套在一个JavaScript对象中?

为列表中的项目设置动画

如何使用画布在另一个内部绘制一个较小但相同的形状,同时保持恒定的边界厚度?

是否可以在不更改组件标识的情况下换出Reaction组件定义(以维护状态/引用等)?如果是这样的话,是如何做到的呢?

在ChartJS中使用spanGaps时,是否获取空值的坐标?

如何正确地在ComponentWillUnmount中卸载状态以避免内存泄漏?

JQuery使用选项填充HTMLSELECT并设置默认结果,默认结果显示为空

在执行console.log(new X())时记录一个字符串