dojo chart生成函数

来源：互联网发布：口算生成器软件下载编辑：程序博客网时间：2024/05/15 23:47

写了一个函数，就是通过传递参数，生成图表，代码如下：

/** * 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="width: 400px; height: 400px;">    </div>    <div id="legend"></div></body></html>

0 0