• 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>


  • 相关阅读:
    重读金典------高质量C编程指南(林锐)-------第四章 表达式和基本语句
    重读金典------高质量C编程指南(林锐)-------第三章 命名规则
    重读金典------高质量C编程指南(林锐)-------第二章 程序的板式
    重读金典------高质量C编程指南(林锐)-------第一章 文件结构
    链表的基本操作---创建
    实现两个数的互换算法小结
    C++中引用与指针的区别
    以前写的一些小程序总结
    OPENCV中数字图像处理知识运用
    常见的论文查找办法
  • 原文地址:https://www.cnblogs.com/lzugis/p/6539893.html
Copyright © 2020-2023  润新知