Question

我正在构建一个站点，我需要构建一个流程图/图表，其中包含我将从mysql数据库获取的数据，因此，我得到了数据，我想把它放在一个流程图中。

像这样的东西 http://philogb.github.io/jit/static/v20/Jit/Examples/Spacetree/example2.html

但我希望“值”为表格，包含4个coluns和2行;

像这样，值将来自我的mysql数据库。

类似这样的事情

    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:'OMT', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMT</td><td>02:05:13</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>50</td><td>52</td><td>54</td></tr></table>'}, '', ''],
    [{v:'OMTC', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMTC</td><td>00:35:12</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>20</td><td>22</td><td>24</td></tr></table>'}, 'OMT', 'OMTC'],
    [{v:'OMTJ', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMTJ</td><td>00:00:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>00</td><td>00</td><td>00</td></tr></table>'}, 'OMT', 'OMTJ'],
    [{v:'OMTR', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMTR</td><td>01:05:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>22</td><td>24</td><td>26</td></tr></table>'}, 'OMT', 'OMTR'],
    [{v:'OMTS', f:'<table border="1" style="width:100%"><tr><td rowspan="2">OMTS</td><td>00:25:01</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>04</td><td>06</td><td>08</td></tr></table>'}, 'OMT', 'OMTS'],
    [{v: 'NMTF6-01' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">NMTF6-01</td><td>00:35:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>06</td><td>08</td><td>10</td></tr></table>'}, 'OMTR', ''],
    [{v: 'BPCL6-03' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">BPCL6-03</td><td>00:22:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>02</td><td>04</td><td>06</td></tr></table>'}, 'OMTR', ''],
    [{v: 'BPCL6-02' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">BPCL6-02</td><td>00:08:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>10</td><td>12</td><td>14</td></tr></table>'}, 'OMTR', ''],
    [{v: 'CXAT6-04' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">CXAT6-04</td><td>00:10:00</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>04</td><td>06</td><td>08</td></tr></table>'}, 'OMTC', ''],
    [{v: 'CXAT6-03' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">CXAT6-03</td><td>00:13:02</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>12</td><td>14</td><td>16</td></tr></table>'}, 'OMTC', ''],
    [{v: 'CXAT6-02' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">CXAT6-02</td><td>00:12:10</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>00</td><td>02</td><td>04</td></tr></table>'}, 'OMTC', ''],
    [{v: 'SPAT6-02' ,f:'<table border="1" style="width:100%"><tr><td rowspan="2">SPAT6-02</td><td>00:25:01</td><td>00:25:00</td><td>00:25:00</td></tr><tr><td>04</td><td>06</td><td>08</td></tr></table>'}, 'OMTS', ''],           

    ]);

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

http://jsfiddle.net/a4tzhtos/16/ 但我希望像第一个例子一样充满活力，我希望图表能够增长，因为这将是一个非常大的图表。

即时通讯使用php，mysql和javascript。

Answer 1

在商业场景中，您可能需要查看yFiles for HTML。它是一个Javascript / HTML5图表库，可以满足您的需求：

据我了解您的要求，这两个演示的组合应该与您正在寻找的完全相同：

data table node style演示演示了如何创建数据表可视化，collapsible tree demo显示了请求的动画展开/折叠功能。在此演示中，数据全部保存在内存中，但也可以根据需要从服务器动态获取。 GWT演示也是该软件包的一部分，它显示了这一特定方面，例如

^{免责声明：我为创建上述库的公司工作。不过，我并不代表我的雇主。我的帖子和评论都是我自己的。}

使用php / mysql / js创建流程图/图表

1 个答案: