dojo chart生成函数
发布时间:2020-12-16 21:25:55 所属栏目:百科 来源:网络整理
导读:写了一个函数,就是通过传递参数,生成图表,代码如下: /** * created by LZUGIS * @param container * @param type * @param data * @constructor */function AddChart(container,type,data){ require([ "dojox/charting/Chart2D","dojox/charting/themes/
写了一个函数,就是通过传递参数,生成图表,代码如下: /** * 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,8662]; AddChart("chart","bar",chartData); </script> </head> <body class="tundra"> <div id="chart" style="width: 400px; height: 400px;"> </div> <div id="legend"></div> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |