使用 DataChart 实现 Dojo Chart 的自动更新

在 UI 设计中，Chart（图表）的出现为用户提供了一种可以直观分析数据的手段，Chart 在很多系统中应用甚广。Dojo 对 Chart 的支持非常强大，对于用户在 UI 上动态更新 Chart 的需求也提供了很多方法。在开发过程中，我们经常会遇到这样一种常见的场景，用户对 Chart 展现出的数据并不十分满意，用户希望能够通过在 UI 上修改数据来实现对 Chart 的修订，使 Chart 展现出其所期望的形态。本文将介绍一种实现此场景的方法，通过使用 DataChart 绑定 Dojo Grid 与 Dojo Chart 来实现这一需求。

与本文相关的 Dojo 插件

在文章开始前，我们先来介绍一下下文中将要使用的 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，后文会介绍详细的使用方法。

创建数据源

首先我们创建数据源，本文使用 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,{id:3,month:"May",index1:3.98,{id:4,month:"Apr",index1:5.60,{id:5,month:"Mar",index1:8.44,{id:6,month:"Jun",index1:2.47,{id:7,month:"Jul",index2:4.52,{id:8,month:"Aug",index2:5.52,{id:9,month:"Sep",index2:6.52,{id:10,month:"Oct",index2:7.52,{id:11,month:"Nor",index2:8.52,{id:12,month:"Dec",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 页面的代码片段

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 构建单线图

回页首

使用 DataSeries 来实现多线图

上文我们实现了单线图，那么有多条 Series 的图表，比如多线图应该如何实现呢？我们知道通过将 comparative 设置成 false，可以支持多个 Series，但是这种做法并不符合我们的场景，因为如果将 comparative 设置成 false，那么我们需要将 store 中的每一个 item 改成数组，而这样的 store 与 Grid 是没法兼容的。所以我们最好寻找其它途径，还好我们可以通过使用 DataSeries 来实现拥有多个 Series 的图表，下面就是一个多线图的例子。

清单 4. 使用 DataSeries 的代码片段

显示的效果如下图所示，修改红框内的数据，右边的图表会跟随修改值进行变化。

图 2. 使用 DataSeries 构建多线图

回页首

使用 Store 中的数据创建标签

到这里我们已经实现了 Grid 与 Chart 之间的联动，但我们还应该为 X 轴添加标签。DataChart 有一个简便的方法可以自动为图表的轴标签赋值，实现方法如下所示：

清单 5.添加 label 的代码片段

xaxis:{labelFunc:"seriesLabels"}, comparative:true }); chart.setStore(store,"index1"); chart.addSeries("index1",34); line-height:1.5em; font-size:1.166em!important"> 上面代码中的黑色斜体字是所添加的内容，其中{labelFunc:"seriesLabels"}是固定表达形式，这个方法是把 store 中标注为“label”字段的值作为标签显示出来，从清单 1 中可以看到我们已经把 month 字段设置为 label，因此 DataChart 就会自动使用月份名来填写 X 轴的标签，效果如下图所示，标签的值与 month 字段是一一对应的，尝试更改左手边 Grid 内的月份值，会发现右手边的标签也会跟随做相应的变化。

图 3. 为多线图的 X 轴添加标签

回页首

总结与补充

本文详细介绍了如何通过使用 DataChart 和 DataSeries 来绑定 Grid 与 Chart，最终实现 Dojo Chart 的动态更新，希望可以对初学 Dojo 的开发者予以帮助。但在有些时候，由于 DataChart 的样式（Style）相对固定不够灵活，可能无法满足用户对于页面样式的要求，此时开发者可以通过监控 Dojo Store 的“onSet”事件来绑定 Grid 与其它类型的 Dojo Chart，或者将 DataSeries 与其它类型的 Dojo Chart 搭配使用，两种方法均可实现以上目的。

原文链接：

http://www.ibm.com/developerworks/cn/web/1312_yuanlei_datachart/