介绍 在大数据时代，Visualization似乎很火。它让数据变得更直观、易理解。相应的，Dojo提供了一个专门针对 web 矢量图开发的控件包dojox.charting，提供了很多封装好的控件，比如线图、饼
介绍
在大数据时代，Visualization似乎很火。它让数据变得更直观、易理解。相应的，Dojo提供了一个专门针对 web 矢量图开发的控件包dojox.charting，提供了很多封装好的控件，比如线图、饼图、柱状图等等。试想，如果能够让后台实时更新的数据直接反映在web页面的一张图上，这张图还能随着数据的更新而变化，岂不是很有趣？关键有了dojox.charting，这样的功能就能轻松实现。
代码示例
这儿就用dojox.charting和dojox.timing来实现动态生成折线图的效果。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import "../js/dijit/themes/tundra/tundra.css";
@import "../css/main.css";
</style>
</head>
<body class="tundra">
<div data-dojo-type="dijit.layout.BorderContainer"
style="width: 100%; height: 100%; margin: 0px; padding: 0px; ">
<div data-dojo-type="dojox.layout.ContentPane"
data-dojo-props="region:'top'"
style="height:38px;width:100%;background-color: black; color: white;font-family: arial;font-size: 28px;">
消息监视器
</div>
<div data-dojo-type="dojox.layout.ContentPane"
data-dojo-props="region:'center', splitter: true"
style="width: 100%; height: 100%; border: none; padding: 0px; background-color: #ffffff;">
<div style="width: 99%; margin: -3px 0px -2px 2px;">
<button id="start_btn" data-dojo-type="dijit.form.Button"
class="menu_button" type="button">开始</button>
<button id="stop_btn" data-dojo-type="dijit.form.Button"
class="menu_button" type="button">停止</button>
</div>
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true"
style="width: 100%; height: 300px;">
<div data-dojo-type="dojox.layout.ContentPane" style="font-size: 16px;"
data-dojo-props="splitter:true,region:'center'">
<div class="statistic_div">
<div id="line_chart" style="width: 98%; height: 155px;"></div>
<center>
<div id="line_chart_legend"></div>
</center>
</div>
</div>
</div>
</div>
</div>
<script>
dojoConfig = {
isDebug : false,
parseOnLoad : true,
async : true
};
</script>
<script type="text/javascript" src="../js/dojo/dojo.js"></script>
<script>
require([ "dojo/parser", "dijit/form/Button",
"dijit/layout/BorderContainer", "dojox/layout/ContentPane",
"dojox/timing/_base"]);
</script>
<script>
require(
[ "dojo/ready",
"dijit/registry",
"dojo/dom",
"dojo/on",
"dojox/charting/Chart", "dojox/charting/plot2d/Pie",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/MoveSlice",
"dojox/charting/action2d/Magnify",
"dojox/charting/action2d/Tooltip",
"dojox/charting/themes/MiamiNice", "dojox/charting/widget/Legend",
"dojox/charting/axis2d/Default", "dojox/charting/plot2d/Columns",
"dojox/charting/plot2d/ClusteredColumns",
"dojox/charting/plot2d/Lines", "dojo/store/Observable",
"dojo/store/Memory", "dojo/data/ItemFileWriteStore",
"dojox/charting/StoreSeries", "dojox/charting/DataSeries"
],
function(ready, registry, dom, on, Chart, Pie,
Highlight, MoveSlice, Magnify, Tooltip, MiamiNice, Legend, Default,
Columns, ClusteredColumns, Lines, Observable, Memory,
ItemFileWriteStore, StoreSeries, DataSeries) {
ready(function() {
line_chart = new Chart("line_chart");
line_chart.setTheme(MiamiNice);
line_chart.addPlot("default", {
type : Lines,
markers : true
});
// Add axes
line_chart.addAxis("x", {
microTickStep : 1,
minorTickStep : 1
/*, max: 10*/});
line_chart.addAxis("y", { //min: 0,
//max: 15000,
vertical : true,
fixLower : "major",
fixUpper : "major"
});
// Initial data
var total_data = [
{id: 1, value: 0},
{id: 2, value: 13}
];
// Create the data store
total_store = new Observable(new Memory({
data : {
identifier : "id",
items : total_data
}
}));
// Adds a StoreSeries to the y axis, queries for all site 1 items
line_chart.addSeries("折线图",
new StoreSeries(total_store, "value"));
// Create the tooltip
new Tooltip(line_chart, "default");
// Create the magnifier
Magnify(line_chart, "default");
// Render the chart!
line_chart.render();
new Legend({
chart : line_chart
}, "line_chart_legend");
//创建定时器
var t = new dojox.timing.Timer();
//当点击开始时，触发定时器，更新消息
on(registry.byId("start_btn"), "click", function(e){
t.setInterval(2000);
t.onTick = update;
t.start();
});
//当点击停止时，停止定时器
on(registry.byId("stop_btn"), "click", function(e){
t.stop();
});
var value = 10;
var id = 3;
var update = function(aa){
total_store.notify({ value: value++, id: id++});
};
});
});
</script>
</body>
</html>
最终效果如下图所示。
总结
dojox.charting提供了各种图表控件，还可以组合tooltip、legend等等附加控件，也可以绑定任意样式风格，可以说是比较强大的了。如果用dojox.charting也不能满足要求，还可以尝试dojox.gfx，直接构造自己的矢量图。