dojo chart生成函数

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

/**
 * 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.f2er.com/dojo/291122.html

猜你在找的Dojo相关文章