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

/**
 * 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. Python基础、判断、循环、列表、字典,day1

    一.Python 简介 1.介绍 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标 ...

  2. Java全局变量

    全局变量:Java程序中,不能在所有类之外定义全局变量,只能通过在一个类中定义公用.静态的变量来实现一个全局变量.例如:ClassGlobalVar{public static global_var; ...

  3. C# 复杂算法

    1.添加命名空间引用using Microsoft.JScript; //formula 是公式如:(1+2)*3/10 private double GetComputeValueByStringF ...

  4. Visual Studio各版本区别

    Visual Studio 是微软公司推出的开发环境,Visual Studio 可以用来创建 Windows 平台下的 Windows 应用程序和网络应用程序,也可以用来创建网络服务.智能设备应用程 ...

  5. APDU指令返回码及其代表含义

    9000 正常 成功执行6200 警告 信息未提供6281 警告 回送数据可能出错6282 警告 文件长度小于Le6283 警告 选中的文件无效6284 警告 FCI格式与P2指定的不符6300 警告 ...

  6. c语言URL通过Http下载mp3 格式

    通过http协议下载MP3的关键就是 整块打包,一块一块向文件里面存储.读取的时候用二进制 /***szWebAddr: 页面地址(包含host+addr) szMp3FileName:将要存储文件的 ...

  7. Spark机器学习6·聚类模型(spark-shell)

    K-均值(K-mean)聚类 目的:最小化所有类簇中的方差之和 类簇内方差和(WCSS,within cluster sum of squared errors) fuzzy K-means 层次聚类 ...

  8. Apache 源码包安装

    系统:Centos 7.4 服务:Apache 2.4.33.apr 1.5.2.apr-util 1.5.4 依赖包: pcre.x86_64 pcre-devel.x86_64 openssl.x ...

  9. django使用migrations迁移版本和数据库中报错解决方案

    1.到数据库表django_migrations中查看app中看看app列 2.到项目对应的app模块中打开migrations文件查看生成的文件与数据库app列中的是不是一样 3.找到哪里不一致的文 ...

  10. Spring_事务(1)