如何在谷歌圖表中添加圖片

Question

function test() 
{ 
$array['cols'][] = array('type' => 'string'); 
$array['cols'][] = array('type' => 'string'); 
$array['cols'][] = array('type' => 'string'); 

$array['rows'][] = array('c' => array(array('v'=>'Name'), array('v'=>22))); 
$array['rows'][] = array('c' => array(array('v'=>'Name1'), array('v'=>26))); 
$array['rows'][] = array('c' => array(array('v'=>'Name2'), array('v'=>12))); 

return $array; 
} 
print json_encode(test()); 

我使用上面的代碼來構建使用谷歌圖表的組織結構圖。我想添加圖像和名稱的名稱。你能告訴我如何修改代碼嗎？

Answer 1

我試圖解決你的問題。

我們可以使用{allowHtml：true}來嵌入並處理帶有Google圖表的HTML代碼。

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

    data.addRows([ 
     [{ 
      v: 'parent_node', 
      f: 'Parent Node' 
     }, 
     null], 
     [{ 
      v: 'child_node_1', 
      f: '<b>Child Node</b> <img src="http://www.mapsysinc.com/wp-content/uploads/2013/08/oracle-logo.gif" height="42" width="50"> </img>' 
     }, 'parent_node'], 
     [{ 
      v: 'child_node_2', 
      f: 'Child Node' 
     }, 'parent_node'] 
    ]); 

    var chart = new google.visualization.OrgChart(document.querySelector('#chart_div')); 
    chart.draw(data, { 
     allowHtml: true 
    }); 
} 
google.load('visualization', '1', { 
    packages: ['orgchart'], 
    callback: drawChart 
}); 

在這裏，我創建的實例請查看：https://jsfiddle.net/1gvwLy8n/5/