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

标签 jquery html css javascript

我有一组 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

最佳答案

d3.js 提供类似的东西:http://bl.ocks.org/gencay/4629518

关于jquery - HTML 表格中堆叠和分组的条形图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15451109/

相关文章:

css - 如何在 ng-bootstrap 中更改模态框的位置

html - 固定横幅中的图片

javascript - 警告 javascript 生成的 div id

jquery - 无法让 jquery 工作

javascript - 如何使用 noUiSlider 调用更改函数?

html - 从 HTML 表单中使用 c 程序获取数据

javascript - 如何移动图像的位置?

javascript - 突出显示滚动上的当前部分 - 部分之间的间隙

javascript - 如何防止javascript冒泡

javascript - 滚动经过某个元素后,相同的导航栏变得固定