当前位置 : 主页 > 网页制作 > Dojo >

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

来源:互联网 收集:自由互联 发布时间:2021-06-15
在 UI 设计中,Chart(图表)的出现为用户提供了一种可以直观分析数据的手段,Chart 在很多系统中应用甚广。Dojo 对 Chart 的支持非常强大,对于用户在 UI 上动态更新 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;width: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 构建单线图

使用 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/

网友评论