/** * 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>
原文地址:https://www.jb51.cc/dojo/291122.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。