首页 > 代码库 > dojo chart生成函数

dojo chart生成函数

2024-07-26 18:19:42   213人阅读

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

/**
 * 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://www.mamicode.com/"http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>>

dojo chart生成函数


联系
我们