AcrGIS for javascript api Info window with chart —— 带饼图的提示框

描述:在Info Window中显示饼图的示例

引用联接:

http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_infowindowchart

在线演示:

http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_infowindowchart/index.html

主要代码有:

(1)设置弹出框

var template = new esri.InfoTemplate();
template.setTitle("<b><img src='../images/flags/${STATE_ABBR}.png'/>  ${STATE_NAME}</b>");
template.setContent(<span style='background-color:yellow;'>getWindowContent</span>);

(2)设置选项卡和图标

var tc = new dijit.layout.TabContainer({
      style: "height: 100%; width: 100%;"
}, dojo.create("div"));

var cp2 = new dijit.layout.ContentPane({
      title: "Pie Chart"
});
    tc.addChild(cp2);

var chart = new dojox.charting.Chart2D(cp2.domNode);
    chart.addPlot("default",{type:"Pie"});
    chart.addSeries("PopulationSplit",[{y:male,text:'Male'},{y:female,text:'Female'}]);

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=7" />  
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->  
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
    <title>Info Window with Chart</title>  
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">  
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">  
    <style>  
      html, body {  
        height: 100%;  
        width: 100%;  
        margin: 0;  
        padding: 0;  
      }  
      #map {  
        padding:0;  
      }  
      .chart {  
        width:200px;  
        height:200px;  
        padding:0px !important;  
      }  
    </style>  
    <script>  
        var dojoConfig = {   
            parseOnLoad: true   // 解析器  
        };  
    </script>  
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>  
    <script>  
        // 导入包  
      dojo.require("dijit.layout.BorderContainer");  
      dojo.require("dijit.layout.ContentPane");  
      dojo.require("esri.map");  
      dojo.require("esri.layers.FeatureLayer");  
      dojo.require("dojox.charting.Chart2D");  
      dojo.require("dojox.charting.plot2d.Pie");  
      dojo.require("dojox.charting.action2d.Highlight");  
      dojo.require("dojox.charting.action2d.MoveSlice");  
      dojo.require("dojox.charting.action2d.Tooltip");  
      dojo.require("dojo.number");  
      dojo.require("dijit.layout.TabContainer");  
  
      var map;  
      // 其他主题 (Julie,CubanShirts, PrimaryColors, Charged, BlueDusk, Bahamation,Harmony,Shrooms)  
      var theme = 'Wetland';  
      dojo.require("dojox.charting.themes." + theme);  
  
  
      function init() {  
          // 创建地图  
        map = new esri.Map("map", {  
          basemap: "streets",  
          center: [-113.405, 43.521],  
          zoom: 6  
        });  
  
        var template = new esri.InfoTemplate();  
        // 标志图标是来自http://twitter.com/thefella,在Creative Commons发布  
        template.setTitle("<b><img src='images/flags/${STATE_ABBR}.png'/>  ${STATE_NAME}</b>");  
        template.setContent(getWindowContent);  // 内容使用函数来返回  
  
        var statesLayer = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5", {  
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND, // 选择模式  
          infoTemplate: template,   // 弹出框  
          outFields: ["*"]  // 指定的字段显示  
        });  
        var symbol = new esri.symbol.SimpleFillSymbol();  
        statesLayer.setRenderer(new esri.renderer.SimpleRenderer(symbol));  // 渲染器只使用一个符号  
  
        map.addLayer(statesLayer);  
        map.infoWindow.resize(275, 275);    // 弹出框尺寸  
      }  
  
      function getWindowContent(graphic) {  
        // 一个选项卡容器  
        var tc = new dijit.layout.TabContainer({  
          style: "width:100%;height:100%;"  
        }, dojo.create("div"));  
  
        // 显示属性信息  
        var cp1 = new dijit.layout.ContentPane({  
          title: "详细信息",  
          content: "<a target='_blank' href='http://en.wikipedia.org/wiki/" + graphic.attributes.STATE_NAME + "'>维基百科条目</a><br /><br />Median Age: " + graphic.attributes.MED_AGE + "<br />Median Age (Male): " + graphic.attributes.MED_AGE_M + "<br />Median Age (Female): " + graphic.attributes.MED_AGE_F  
        });  
  
        // 男/女比例显示Dojo 饼图  
        var cp2 = new dijit.layout.ContentPane({  
          title: "饼图"  
        });  
  
        tc.addChild(cp1);  
        tc.addChild(cp2);  
  
        // 创建图表将显示在第二个选项卡  
        var c = dojo.create("div", {  
          id: "demoChart"  
        }, dojo.create('div'));  
  
        var chart = new dojox.charting.Chart2D(c);  
  
        dojo.addClass(chart, 'chart');  
  
        // 适用图表的颜色主题  
        chart.setTheme(dojo.getObject("dojox.charting.themes." + theme));  
  
        chart.addPlot("default", {  
          type: "Pie",  
          radius: 70,   // 半径  
          htmlLabels: true    
        });  
        dojo.connect(tc,'selectChild',function(tabItem){  
          if(tabItem.title === "饼图"){  
          chart.resize(180,180);    // 重设尺寸  
          }  
        });  
        // 男女百分比%  
        var total = graphic.attributes.POP2000;  
  
        var male = dojo.number.round(graphic.attributes.MALES / total * 100, 2);  
        var female = dojo.number.round(graphic.attributes.FEMALES / total * 100, 2);  
        chart.addSeries("PopulationSplit", [{  
          y: male,  
          tooltip: male,  
          text: 'Male(男)'  
        }, {  
          y: female,  
          tooltip: female,  
          text: 'Female(女)'  
        }]);  
        //当您将鼠标放在一个切片。突出的图表和显示工具提示,  
        new dojox.charting.action2d.Highlight(chart, "default");  
        new dojox.charting.action2d.Tooltip(chart, "default");  
        new dojox.charting.action2d.MoveSlice(chart, "default");  
  
        cp2.set('content', chart.node);  
        return tc.domNode;  
      }  
  
      dojo.ready(init);  
    </script>  
  </head>  
    
  <body class="claro">  
    <div id="mainWindow"   
         data-dojo-type="dijit.layout.BorderContainer"   
         data-dojo-props="design:'headline', gutters:false"   
         style="width: 100%; height: 100%; margin: 0;">  
  
      <div id="map"   
           data-dojo-type="dijit.layout.ContentPane"   
           data-dojo-props="region:'center'"   
           style="overflow:hidden;">  
      </div>  
    </div>  
  </body>  
</html>

效果如图:

AcrGIS for javascript api Info window with chart —— 带饼图的提示框

AcrGIS for javascript api Info window with chart —— 带饼图的提示框



未经允许请勿转载:程序喵 » AcrGIS for javascript api Info window with chart —— 带饼图的提示框

点  赞 (1) 打  赏
分享到: