图表的更新通过以上几节，我们已经完成的图标的基本绘制，下面我们来讨论如何进行图标的更新，以及其性能测试结果。
Chart 更新创建图 1 中的 chart 时，使用 JSON 对象的数组作为 chart 的 series 数据，更新 chart 时，可以使用 updateSeries()。
chart.updateSeries() 参数介绍如下：
updateSeries: function(name, data, offsets) ：用指定数组，更新所选图形序列数据。
- name: addSeries 时定义的 series 名称；
- data : Array, 待更新图形的数据数组, 经过清单 4 中的函数转换过的数据；
- offsets : Boolean。如果 true，根据新数据，重新计算数据偏移量，当数据范围变化很大时，需要重新计算数据便宜量。
当更新示例图 1 中的 chart 时，每次服务器返回追加的数据，例如，每次只追加一个点。
清单 9.REST API 返回的更新数据1
2
3
4
5
6
7
8
| var latestData = {
lastest:{
"id": 6,
"healthState": "WARN",
"message": "Pass the warn threshold!",
"captureTime": "2013-08-13 10:02:10",
"value": 10
}};
|
需要将上述数据转换成含有 y,tooltip 的对象，用 Array.push，追加到之前的 series 数组后，再调用 mychart.updateSeries(‘seriesName’,arrNewSeries);
在实时更新的图表中，只需要使用 setTimeInterval()定时获取新数据，更新图形数据序列。
Chart 和 store在 Dojo 中，经常使用 store 使数据和视图分离，在使用 Dojo chart 过程中尝试过以下和 store 相关的使用方法。
- dojox.charting.DataChartDataChart 以 Chart2D 为基类，将 chart 和 data store 联合使用。创建 DataChart 时，store 一般可以选择 ItemFileReadStore 或者 ItemFileWriteStore，但是 DataChart 没有提供重置 store 的接口，setStore()方法只能调用一次，同时也不能通过直接修改 store，使 store 的变化反应到 chart 视图中，因此 DataChart 在 Dojo 1.8 中，没有找到能实现实时更新的方法。
- dojox.charting.StoreSeries 和 dojo.store.Observable 实现数据和视图的分离使用 store 时，数据不需要做复杂转换，storeSeries 根据 store 数据中的‘label’值作为横坐标，以构造 StoreSeries 时的第三个参数，作为纵坐标。
仍然使用清单 3 中的数据，添加 series 过程如下
清单 10.使用 StoreSeries1
2
3
4
5
6
7
8
9
10
11
| var memStore = new dojo.store.Memory({
label : "captureTime",
data : rawData.statistics
});
var obstore = dojo.store.Observable(memStore);
var seriesStore = new dojox.charting.StoreSeries(obstore,{ query: {} },"value");
myChart.addSeries("storeSeries",seriesStore).render();
使用 Observable 和 Memory，数据更新时，只需要更新 Observable，然后使 StoreSeries 再次读取 Observable 数据即可。
|
清单 11.使用 StoreSeries 更新 Dojo Chart1
2
3
4
5
6
7
8
| rawData.push(latestData.latest);
obstore.setData({
'label':'captureTime',
'items': rawData.statistics
});
seriesStore.fetch();
也可以使用 DataChart 和 StoreSeries 联合使用，实现图表的实时更新。
|
|
