写了一个函数,就是通过传递参数,生成图表,代码如下:
/** * created by LZUGIS * @param container * @param type * @param data * @constructor */ function AddChart(container, type, data){ require([ "dojox/charting/Chart2D", "dojox/charting/themes/PlotKit/blue", "dojox/charting/action2d/Highlight", "dojox/charting/action2d/Tooltip", "dojox/charting/action2d/MoveSlice" ], function( Chart2D, themes, Highlight, Tooltip, MoveSlice ){ var chart = new dojox.charting.Chart2D(container); chart.setTheme(dojox.charting.themes.PlotKit.blue);//设置主题 switch(type){ case "bar":{//柱状图 chart.addPlot("default", { type: "Columns", gap: 8//控制柱子之间的间隔 }); break; } case "pie":{//饼状图 chart.addPlot("default", { type: "Pie", labelOffset: 40//控制标注显示位置,“+”为里面,“-”为外面 }); break; } case "line":{//线形图 chart.addPlot("default", { type: "Lines", markers:true,//数据点是否显示 tension:"X"//曲线圆滑,"X"与“S”类似,“x”为闭合圆滑 }); break; } case "stack":{//堆积图 chart.addPlot("default",{ type: "StackedColumns", gap: 8 }); break; } default :{ break; } } var xStr = ["周一","周二","周三","周四","周五","周六","周日"]; // Add axes var myLabelFunc = function(text, value, precision){ return xStr[text-1]; }; chart.addAxis("x", { labelFunc: myLabelFunc }); chart.addAxis("y", { vertical:true, fixLower: "major", fixUpper: "major" }); chart.addSeries("Series A", data); new Highlight(chart, "default", {highlight: "lightskyblue"}); new Tooltip(chart, "default"); new MoveSlice(chart, "default"); // new Legend({chart: chart}, "legend"); chart.render(); }); }使用方法很简单,如下:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>dojo chart test</title> <style type="text/css"> @import "dojo/dojo/resources/dojo.css"; @import "dojo/dijit/themes/dijit.css"; @import "dojo/dijit/themes/tundra/tundra.css"; </style> <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script> <script src="js/dojochart.js"></script> <script type="text/javascript"> var chartData = [40000,9200,11811,12000,8662,12000,8662]; AddChart("chart","bar",chartData); </script> </head> <body class="tundra"> <div id="chart" style=" 400px; height: 400px;"> </div> <div id="legend"></div> </body> </html>