• 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,12000,8662];
            AddChart("chart","bar",chartData);
        </script>
    </head>
    <body class="tundra">
        <div id="chart" style=" 400px; height: 400px;">
        </div>
        <div id="legend"></div>
    </body>
    </html>


  • 相关阅读:
    Codeforces ECR 83 C. Adding Powers (位运算)
    Codeforces Round #636div3 D. Constant Palindrome Sum (划分区间,差分)
    Codeforces Round #603 C. Everyone is a Winner!
    Centos7 下搭建SVN + Apache 服务器 风行天下
    完整部署CentOS7.2+OpenStack+kvm 云平台环境(1)基础环境搭建 风行天下
    云计算的理解 风行天下
    Python之路3【知识点】白话Python编码和文件操作 风行天下
    C#中TreeView组件使用方法初步
    复制文件时explorer.exe出错解决方法
    C# 里TreeView绑定数据库实现分类
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539893.html
Copyright © 2020-2023  润新知