javascript - 选择 HTML 表格中的行来更新图表选择？

Question

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

例如:

<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 的原因。)