Question

我有一个图表，其值如下一列有多个带正斜杠的值。

但我想像这张图片一样改变它。

这是我的图表代码

while(start<=end)
       {
         orgcode=org_hi.substring(start,org_hi.indexOf('-',start));

         /* code add by sim*/
       /*    var res = orgcode.split("/");
           if(res.length!=0)
           {
            var i = 0;
            res.forEach(function(entry) {


             var sim =  "[{v:'"+entry+"', f:'"+entry+"<div style='color:red; font-style:italic'>President</div>'},'', 'The President']";

                extndOrg.push(sim);

                i++;
              });
          }*/
         /* end code*/
     /*    if(res.length!=0)
         {
       var arr1d=new Array(extndOrg,orghead);
         }
         else
         {
         var arr1d=new Array(orgcode,orghead);
       }*/
       var arr1d=new Array(orgcode,orghead);
         arr2d.push(arr1d);
         start=start+orgcode.length+1;
       }
     }
     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Node');
     data.addColumn('string', 'Parent');
     data.addRows(arr2d);
     var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    // chart.draw(data);
      chart.draw(data, {allowHtml:true});

和orgcode有一个动态值，用' - '分割这是动态价值 XPHNG / XPHNG-DDPOA / XPHNG / DDPOA-RUDCP / XPHNG / DDPOA / RUDCP-DCCBA-XENMD-EEPD2 / XPHNG / DDPOA / RUDCP / DCCBA / XENMD / EEPD2-DICAM-ZSBAM / XPHNG / DDPOA / RUDCP / DCCBA / XENMD / EEPD2 / DICAM / ZSBAM-ARCS8 / XPHNG / DDPOA / RUDCP / DCCBA / XENMD / EEPD2 / DICAM / ZSBAM / ARCS8-GMHRA-WAKFA-DTPMB / XPHNG / DDPOA / RUDCP / DCCBA / XENMD / EEPD2 / DICAM / ZSBAM / ARCS8 / GMHRA / WAKFA / DTPMB

Answer 1

为了在节点上使用html ......

1）需要设置以下选项......

allowHtml: true

e.g。

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

2）需要对单元格值使用对象表示法

其中v:是值，而f:是格式化的值，例如

{v: 'Mike', f: '<div><a href="mailto:Mike@somedomain.com">Email Mike</a></div>'}

图表将使用该值作为构建关系的id 但在节点上显示格式化的值

如果您不想提供对象表示法，
您也可以在数据表

上使用setFormattedValue方法

data.setFormattedValue(1, 0, namesHtml);

3）请参阅以下工作代码段

对象表示法用于提供'Mike'

的链接稍后使用方法'Jim'

使用拆分字符串更新

setFormattedValue

google.charts.load('current', {
  callback: drawChart,
  packages: ['orgchart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('string', 'Manager');

  data.addRows([
    [{v: 'Mike', f: '<div><a href="mailto:Mike@somedomain.com">Email Mike</a></div>'}, ''],
    ['Jim', 'Mike'],
    ['Alice', 'Mike'],
    ['Bob', ''],
    ['Carol', 'Bob']
  ]);

  var splitStr = 'XPHNG/XPHNG-DDPOA/XPHNG/DDPOA-RUDCP/XPHNG/DDPOA/RUDCP-DCCBA-XENMD-EEPD2/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2-DICAM-ZSBAM/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM-ARCS8/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM/ARCS8-GMHRA-WAKFA-DTPMB/XPHNG/DDPOA/RUDCP/DCCBA/XENMD/EEPD2/DICAM/ZSBAM/ARCS8/GMHRA/WAKFA/DTPMB';
  var names = splitStr.split('-');
  var namesHtml = '';

  names.forEach(function (name) {
    namesHtml += '<div><a href="mailto:' + name + '@somedomain.com">' + name + '</a></div>'
  });

  // change Jim
  data.setFormattedValue(1, 0, namesHtml);

  var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
  chart.draw(data, {
    allowHtml: true
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

如何在Google图表API

1 个答案: