ArcGis API for JavaScript——动态图表

最新推荐文章于 2024-07-07 10:08:32 发布

会飞的马

最新推荐文章于 2024-07-07 10:08:32 发布

阅读量3k

点赞数 1

本文链接：https://blog.csdn.net/u010371710/article/details/78065323

版权

ArcGis API for JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

ArcGis API for JavaScript——动态图表

ArcGIS API for JS是基于Dojo的，Dojo提供了一系列对于图表的操作。在本例子中首先介绍一个简单的chart例子，再介绍动态加载数据源的chart例子。
Dojo Chart的官方文档：http://dojotoolkit.org/reference-guide/1.10/dojox/charting.html#using-dojo-store-and-dojo-data-data-sources-with-charts
1. 简单的Chart

<!DOCTYPE html>
<html >
<head>
        <!--使用的是本机离线部署的API-->
         <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.18/3.18/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" />
    <script src="http://localhost/arcgis_js_api/library/3.18/3.18/init.js" djConfig="parseOnLoad:true"></script>
    <script src='http://localhost/arcgis_js_api/library/3.18/3.18/dojo/dojo.js'></script>
         <style>
        #chartPanel{
            border-radius: 5px;
            border: 1px solid #57585A;
            background-color: #fff;
            display: block;
            padding: 5px;
            position: relative;
            text-align: center;
            width: 500px;
            height: 300px;
            z-index: 99;
            left: 50%;
        }
        #charts{
            position: fixed;
            font-size: 67px;
            line-height: 0;
            z-index: 100;
            width: 500px;
            height: 300px;
        }
    </style>
         <script>
                    require([
        "dojox/charting/Chart2D",
        "dojox/charting/plot2d/Columns",
        "dojox/charting/axis2d/Default",
        "dojox/charting/themes/Tufte",
        "dojo/domReady!"
    ], function(
        Chart2D,Columns,Default,Tufte,domReady
    ){
        var chart = new Chart2D("charts");
        chart.addPlot("default", {
            type: Columns,//Bars或者Colums
            gap: 8
        });
        var chartData=[12,54,53,86,65,2,7];
        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("num",chartData,{stroke: {color: "#5782AE"}, fill: "#5782AE"});
        chart.render();
    });
         </script>
</head>
<body class="claro">
    <div id="chartPanel">
                   <div id="charts"></div>
         </div>
</body>
</html>

运行结果：
这里写图片描述
注：若需要添加标题、单位等其他信息可参考上面官网文档进行添加。
2. 加载动态数据的Chart
配合时间间隔加载动态数据，每间隔几秒就加载一个新数据。对于时间的控制可以使用setInterval函数。

<!DOCTYPE html>
<html >
<head>
         <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.18/3.18/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" />
    <script src="http://localhost/arcgis_js_api/library/3.18/3.18/init.js" djConfig="parseOnLoad:true"></script>
    <script src='http://localhost/arcgis_js_api/library/3.18/3.18/dojo/dojo.js'></script>
         <style>
        #chartPanel{
            border-radius: 5px;
            border: 1px solid #57585A;
            background-color: #fff;
            display: block;
            padding: 5px;
            position: relative;
            text-align: center;
            width: 500px;
            height: 300px;
            z-index: 99;
            left: 50%;
        }
        #charts{
            position: fixed;
            font-size: 67px;
            line-height: 0;
            z-index: 100;
            width: 500px;
            height: 300px;
        }
    </style>
         <script>
                    require([
        "dojox/charting/Chart2D",
        "dojox/charting/plot2d/Columns",
        "dojox/charting/axis2d/Default",
        "dojox/charting/themes/Tufte",
        "dojo/domReady!"
    ], function(
        Chart2D,Columns,Default,Tufte,domReady
    ){
        var chart = new Chart2D("charts");
        chart.addPlot("default", {
            type: Columns,//Bars或者Colums
            gap: 8
        });
        var data1=[21,54,8,90,21,45,78];
        var data2=[51,14,76,98,2,75,57];
        var data3=[29,94,81,9,81,40,18];
        var data4=[11,74,8,10,51,95,38];
        var data5=[71,64,81,90,71,15,8];
        var chartDatas=[data1,data2,data3,data4,data5];

        var timesRun = 0;
        var interval = setInterval(function(){

            creatChart(chartDatas[timesRun]);
            timesRun=timesRun+1;
            if(timesRun === 5){
                clearInterval(interval);
            }
        }, 1000);

        function creatChart(chartData){
            console.log(chartData);
            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("num",chartData,{stroke: {color: "#5782AE"}, fill: "#5782AE"});
            chart.render();
        }



    });
         </script>
</head>
<body class="claro">
    <div id="chartPanel">
                   <div id="charts"></div>
         </div>
</body>
</html>