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

/**
 * 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>

dojo chart生成函数的更多相关文章

  1. Dojo Chart之常用统计图

    很多做web的都知道,在很多web系统中会涉及到一些统计图,例如饼状图,柱状图.趋势图.以及叠加图等.提到这儿,做web的都很熟悉的,jquery的highcharts就能搞定所有的涉及到统计图的功能 ...

  2. dojo chart详解

    Dojo提供了一套很完善的统计图(Chart)接口,在dojox/charting下面,可以支持很多种类型的. .简介 Dojo统计图提供快速的.简单的接口实现美观的.交互性强的web统计图表的实现. ...

  3. Dojo Chart之经常使用统计图

    非常多做web的都知道,在非常多web系统中会涉及到一些统计图.比如饼状图,柱状图.趋势图.以及叠加图等.提到这儿,做web的都非常熟悉的,jquery的highcharts就能搞定全部的涉及到统计图 ...

  4. Arcgis for Js之Graphiclayer扩展具体解释

    在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就具体的讲讲esri/la ...

  5. Arcgis for Js之Graphiclayer扩展详解

    在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就详细的讲讲esri/la ...

  6. （转）Arcgis for Js之Graphiclayer扩展详解

    http://blog.csdn.net/gisshixisheng/article/details/41208185 在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种 ...

  7. arcgis javascript dojo

    一.为什么说ArcGIS API for JavaScript是构建于Dojo之上的? 1. 编写ArcGIS API for JavaScript的ESRI开发者使用Dojo来简化他们的开发过程,同 ...

  8. dojo柱形图

    dojo柱形图添加属性 1.给柱状图的柱子填充颜色 .addSeries("A",[45,56,12,23,78,67],{stroke:{color:"#FF0000& ...

  9. dojo单柱状图

    dojo单柱状图 1.dojo单柱状图源码 column.html: <!DOCTYPE HTML> <html lang="en"> <head&g ...

随机推荐

  1. 236. Lowest Common Ancestor of a Binary Tree（最低公共祖先，难理解）

    Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...

  2. SLF4J日志系统在项目导入时频现的问题

    一.概述 近期在导入一个已有的项目时,日志系统出现了一个问题.错误信息如下: SLF4J问题 SLF4J: Failed to load class "org.slf4j.impl.Stat ...

  3. Linux设备驱动程序加载/卸载方法 insmod和modprobe命令

    linux加载/卸载驱动有两种方法. 1.modprobe 注:在使用这个命令加载模块前先使用depmod -a命令生成modules.dep文件,该文件位于/lib/modules/$(uname ...

  4. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  5. python——动态类型简介

    动态类型简介 类型属于对象,而不是变量 每一个对象都有两个标准的头部信息:类型标志符和引用计数器. 对象的垃圾收集,就是通过引用计数器实现的.可以在脚本中任意使用对象而不需要考虑释放内存空间. 循环饮 ...

  6. Rreact Native 常见错误总结

    1.invariant violation:expected a component class,got[object object]        创建自定义组件首字母要大写,否则会报错.     ...

  7. 近千节点的Redis Cluster高可用集群案例:优酷蓝鲸优化实战（摘自高可用架构）

    (原创)2016-07-26 吴建超 高可用架构导读:Redis Cluster 作者建议的最大集群规模 1,000 节点,目前优酷在蓝鲸项目中管理了超过 700 台节点,积累了 Redis Clus ...

  8. java基础(3)--8种基本类型

    八种基本类型 数据类型分为两大类:基本类型,引用类型 基本类型有8种,除了基本类型(8种)以外任何类型都是引用类型.如: String 是引用类型 基本类型有8种(首字母是小写): 整数:byte, ...

  9. java分页的实现（后台工具类和前台jsp页面）

    1.首先,新建一个类Page.java public class Page implements Serializable { private static final long serialVers ...

  10. JavaScript面向对象之Prototypes和继承

    本文翻译自微软的牛人Scott Allen Prototypes and Inheritance in JavaScript ,本文对到底什么是Prototype和为什么通过Prototype能实现继 ...