1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <div id="chartOne" style="width: 400px; height: 240px; margin: 10px auto 0px auto;"></div> <script> require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/StackedAreas", "dojox/charting/themes/Wetland" , "dojo/ready" ], function(Chart, Default, StackedAreas, Wetland){ var chart = new Chart("chartOne"); chart.addPlot("default", {type: StackedAreas, tension:3}) .addAxis("x", {fixLower: "major", fixUpper: "major"}) .addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0}) .setTheme(Wetland) .addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4]) .addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2]) .render(); }); </script> |
1 | 下面介绍如何创建示例图 1 中,用于实时更新的图表。 |
1 | Dojox.charting 参数介绍: |
1 2 3 | Var myChart = new Chart(domNode, { margins: {l: 40,r: -60,t: 0,b: 0}, }); |
1 | 实时上,我们使用 REST 服务返回的数据进行绘图时,服务器返回的数据往往是 JSON 格式的坐标值,例如: |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | var rawData = { "statistics": [{ "id": 1, "healthState": "OK", "captureTime": "2013-08-13 10:00:40", "value": 0 },{ "id": 2, "healthState": "OK", "captureTime": "2013-08-13 10:01:10", "value": 3 },{ "id": 3, "healthState": "ERROR", "message": "Pass the error threshold!", "captureTime": "2013-08-13 10:01:40", "value": 6 }] } |
1 2 3 4 5 6 7 8 9 10 11 12 | _valTrans = function (arrData,yName){ var series = []; for(var obj in arrData){ var tmpItem = {}; if(arrData[obj][yName]!==undefined){ tmpItem.y = parseFloat(arrData[obj][yName]); }else{ console.warn('series:',yName,'not exist.'); } series.push(tmpItem); }; return series; }, |
1 2 | myChart.addSeries(‘value’,_valueTrans(rawData,’value’)); myChart.addSeries(‘id’,_valueTrans(rawData,’id’)); |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |