本文将介绍一种实现此场景的方法，通过使用 DataChart 绑定 Dojo Grid 与 Dojo Chart 来实现这一需求。在文章开始前，我们先来介绍一下下文中将要使用的 Dojo 插件：
DataChart(dojox.charting.DataChart)是 Chart2D 的一个扩展，它使用 Dojo Store 作为数据的存储结构。DataChart 会监听 Dojo Store 的‘onSet’事件，每当 Dojo Store 中的数据发生变化时，DataChart 会">自动更新图表。 ItemFileWriteStore（dojo.data.ItemFileWriteStore）是 Dojo Store 中的一种，它是 ItemFileReadStore 的一个扩展，即可以作为 Grid 的数据结构，也可以用作 DataChart 的数据结构。ItemFileWriteStore 的特性是可以接收用户在 UI 上的输入，其它 Dojo Store 是不能接收 UI 输入的。 DataSeries(dojox.charting.DataSeries)是一个非常特殊的 Series，它可以用来绑定 Dojo Chart 和 Dojo Store，后文会介绍详细的
6.53.html">使用方法。
创建数据源
首先我们创建数据源，本文使用 ItemFileWriteStore 作为 Chart 和 Grid 的共同数据源，通过使用共同的数据源来实现 Chart 和 Grid 的联动。下面我们创建一个示例数据：
清单 1. 示例数据的代码片段
var itemStore = { identifier: "id", label: "month",items:[ {id:1, month:"Jan", index1:3.52, index2:3.52,index3:7.48},{id:2, month:"Feb", index1:6.76, index2:3.52,index3:7.48},{id:3, month:"May", index1:3.98, index2:3.52,index3:7.48}, {id:4, month:"Apr", index1:5.60, index2:3.52,index3:7.48}, {id:5, month:"Mar", index1:8.44, index2:3.52,index3:7.48}, {id:6, month:"Jun", index1:2.47, index2:3.52,index3:7.48}, {id:7, month:"Jul", index1:8.44, index2:4.52,index3:7.48}, {id:8, month:"Aug", index1:8.44, index2:5.52,index3:7.48}, {id:9, month:"Sep", index1:8.44, index2:6.52,index3:7.48}, {id:10, month:"Oct", index1:8.44, index2:7.52,index3:7.48}, {id:11, month:"Nor", index1:8.44, index2:8.52,index3:7.48},{id:12, month:"Dec", index1:8.44, index2:9.52,index3:7.48}]};
在上面的代码中，identifier 标识了哪个字段可作为主键，该字段的值是不可重复的。label 标识了哪个字段可以作为标签名，我们可以使用这个字段来为图表的轴标签赋值，后文将有详细介绍。接下来我们使用这个示例数据生成 Dojo Store：
var store = new dojo.data.ItemFileWriteStore({data:itemStore});
创建 Data Grid
创建了数据源，我们还需要创建一个 Grid 来展示数据，因此我们在 HTML 页面中建立两个节点，一个挂载 Grid，另一个预留给 Chart。
清单 2. HTML 页面的代码片段
<td><div style="height:350px;w
idth:400px;" data-dojo-type="dojox.grid.EnhancedGrid" id="chartGrid" structure= "[{id:'month', field:'month', name:’月份’,editable:true,width:'25%'},{id:'index1',field:'index1',name:’指数 1’,editable: true,width:'25%'},{id:'index2',field:'index2',name:’指数 2’,editable: true,width:'25%'},{id:'index3',field:'index3',name:’指数 3’,editable: true,width:'25%'}]" ></div></td><td><div id="chart1" style="height:350px;width:550px;"></div></td>
Grid 创建成功后，将上节生成的 Dojo Store 赋给 Grid：
dijit.byId('chartGrid').setStore(store);
使用 DataChart 来实现线图
接下来我们就可以创建 Chart 了，下面以线图（Line Chart）为例，展示如何创建一个 DataChart。
清单 3. 创建 DataChart 的代码片段
function lineChart(){chart=new dojox.charting.DataChart("chart1",{type: "Lines", comparative:true});chart.setStore(store, {month:"*"},"index1"); chart.render(); }
在这段代码中，DataChart 构造方法的第一个参数是 Chart 在页面上的挂载节点，在这里，我们使用上一节预留的 chart1 节点。第二个参数为 Chart 的各种属性，其中 type 是 Chart 的类型，而 comparative 代表着数据与 Series 所对应的方式，如果将 comparative 设置成 true，那么一个 item 个体将对应 Series 中的一个节点，如果设置成 false，那么每一个 item 个体将对应一条 Series。
在 setStore 方法中，第一个参数是数据源，第二个参数是过滤条件（这里我们要显示所有的数据，所以用*代表选择所有），第三个参数指明了应该显示数据源中的哪一个字段。
最后的效果如下图所示，Data Chart 会自动监听 store 中的‘onSet‘方法，一旦 store 内的数据有所变化，图表也会随之刷新。修改红框内的数据，右边的图表会跟随修改进行变化。
图 1. 使用 DataChart 构建单线图