javascript - 在 HTML 表格中选择行以更新图表选择？

Question

如何设置与图表（Flotr 或 D3）关联的数据的 HTML+JS 表；我可以在哪里多选行，这将更新图表中显示的内容？- 我可能会使用 AngularJS，所以他们的双向数据绑定可能会有所帮助......

例如：

<table>
    <thead>
         <tr><th>Vowel</th> <th>Amount</th></tr>
    <thead>
    <tbody>
         <tr> <td>A</td> <td>3</td> </tr>
         <tr> <td>E</td> <td>6</td> </tr>
         <tr> <td>I</td> <td>7</td> </tr>
         <tr> <td>O</td> <td>8</td> </tr>
         <tr> <td>U</td> <td>9</td> </tr>
    </tbody>
</table>

能够反向也很好，例如：在饼图上按E和A将刷新饼图+表格。

Answer 1

http://plnkr.co/edit/x1jGW0lqKyzV7EKsVAbJ?p=preview

这是您如何做到这一点的示例。

一旦你创建了一个指令来将你的数据与 DOM 连接起来，那么通过模板处理数据模型就很简单了。

我重用了用于其他项目的 flot 集成指令。（这种“可重用性”是我喜欢 AngularJs 的原因。）