使用 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, 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;400px;" data-dojo-type="dojox.grid.EnhancedGrid" 
   id="chartGrid" structure= "[
{id:'month', field:'month', name:’月份’,editable:true,'25%'},
{id:'index1',field:'index1',name:’指数 1’,editable: true,'25%'},
{id:'index2',field:'index2',name:’指数 2’,editable: true,'25%'},
{id:'index3',field:'index3',name:’指数 3’,editable: true,'25%'}]" >
</div>
</td>
<td><div id="chart1" style="height:350px;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 构建单线图

回页首

使用 DataSeries 来实现多线图

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

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

function lineChart()
{
chart = new dojox.charting.DataChart("chart1", {type: "Lines", comparative:true });
chart.addSeries("index1", new dojox.charting.DataSeries( 
store, {query: {month: "*"}}, "index1"),{stroke: "red"}); 
chart.addSeries("index2", new dojox.charting.DataSeries(
store, {query: {month: "*"}}, "index2"),{stroke: "gold"}); 
chart.addSeries("index3", new dojox.charting.DataSeries(
store, {query: {month: "*"}}, "index3"),{stroke: "green"}); 
chart.render();  
}

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

图 2. 使用 DataSeries 构建多线图

回页首

使用 Store 中的数据创建标签

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

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

function lineChart()
{
chart = new dojox.charting.DataChart("chart1", {
type: "Lines",
xaxis:{labelFunc:"seriesLabels"},
 comparative:true });
chart.setStore(store, {month:"*"},"index1");
chart.addSeries("index1", new dojox.charting.DataSeries(
store, {query: {month: "*"}}, "index1"),{stroke: "red"}); 
chart.addSeries("index2", new dojox.charting.DataSeries(
store, {query: {month: "*"}}, "index2"),{stroke: "gold"}); 
chart.addSeries("index3", new dojox.charting.DataSeries(
store, {query: {month: "*"}}, "index3"),{stroke: "green"}); 
chart.render();  
}

上面代码中的黑色斜体字是所添加的内容，其中{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/