Question

我有一组带有数字的html表，如下所示：

 <table border="1">
  <tr>
    <th>Day</th>
    <th>Time</th>
    <th>A</th>
    <th>B</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>0:00 - 8:00</td>
    <td>100</td>
    <td>120</td>
  </tr>
  <tr>
    <td></td>
    <td>8:00 - 18:00</td>
    <td>90</td>
    <td>100</td>
  </tr>
  <tr>
    <td></td>
    <td>18:00 - 0:00</td>
    <td>80</td>
    <td>60</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>0:00 - 8:00</td>
    <td>100</td>
    <td>120</td>
  </tr>
  <tr>
    <td></td>
    <td>8:00 - 18:00</td>
    <td>90</td>
    <td>100</td>
  </tr>
  <tr>
    <td></td>
    <td>18:00 - 0:00</td>
    <td>80</td>
    <td>60</td>
  </tr>
  </table>

请查看：http://jsbin.com/evakac/7/edit

我想创建一个漂亮的可视化表格，并在此表格中直接显示堆叠且同时分组的条形图。

我已经google了很多，那里有很多jquery可视化工具，但没有什么能做到这一点。

更新：直接在桌子外面这样的东西会很好：http://bl.ocks.org/gencay/4629518

Answer 1

d3.js提供类似的内容：http://bl.ocks.org/gencay/4629518

Answer 2

检查一下 magna charts

demo here

可能有帮助

HTML表中的堆叠和分组条形图

2 个答案: