Javascript 如何直观地表示家长->；儿童->；小屏幕上的孙子

我正在寻找一个想法，为家长->孩子->孙子的小屏幕，如Iphone 5/6等的视觉表现

我想用fusion chart（我的另一个问题）来表示它[但我无法在使用javascript、CSS 3和HTML5时取得一些突破]

---

我正在寻找另一种在小屏幕上显示的方法。

您可以使用谷歌图表组织结构图的一些迭代，还是太宽了

google.setOnLoadCallback（绘图图）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Name'）；
data.addColumn（'string'，'Manager'）；
data.addColumn（'string'，'ToolTip'）；
data.addRows([
[{v:'Mike'，f:'MikeGrandfather'}，，'祖父母']，
[{v:'Rita'，f:'RitaGrandmother'，'GrandMother'，'GrandParent']，
[{v:'Jim'，f:'JimVice President'，'Mike'，'VP']，
[“爱丽丝”，“迈克”，“迈克]，
[“鲍勃”、“吉姆”、“鲍勃海绵”]，
[‘卡罗尔’、‘鲍勃’、“”]
]);
var chart=new google.visualization.OrgChart（document.getElementById（'chart_div'））；
chart.draw（数据，{allowtml:true}）；
}

我正在使用类似的图表来显示ipad这样的中屏幕。我需要一些小屏幕的图表。此外，我不能使用任何第三方库。感谢您查看。

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

    data.addRows([
      [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">Grandfather</div>'}, '', 'GrandParent'],
        [{v:'Rita', f:'Rita<div style="color:red; font-style:italic">Grandmother</div>'}, '', 'GrandParent'],
      [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', 'Bob Sponge'],
      ['Carol', 'Bob', '']
    ]);

    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    chart.draw(data, {allowHtml:true});
  }