調整手機屏幕上的dojox圖表

我正在使用這個Info window with chart ESRI教程。調整手機屏幕上的dojox圖表

而且我想定製DojoX中餅圖的小屏幕：

@media only screen 
    and (max-device-width: 320px) { 
    ... 
    }

是否可以使用自定義圖表DojoX中尺寸定製的屏幕尺寸？

例如餅圖爲{width：60px; height：60px}僅當在max-device-width：320px的屏幕上加載時纔有效？

來源

2017-05-14 Michelle

是的，這是可能的。

但是恐怕你不僅可以通過CSS實現這一目標，因爲圖表的大小取決於多種因素。像chart radius，map infoWindow size，container size等

解決方案 - 可以改變上述基礎上，屏幕大小動態值，可以使用window resize event它..這是你如何能做到這一點。

下面是工作代碼 -

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
 
    
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
 
    <title>Info Window with Chart</title> 
 
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css"> 
 
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css"> 
 
    <style> 
 
     html, body, #map { 
 
     height: 100%; 
 
     width: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     .chart { 
 
     width:100px; 
 
     height:100px; 
 
     padding:0px !important; 
 
     } 
 
    </style> 
 
    <script src="https://js.arcgis.com/3.20/"></script> 
 
    <script> 
 
     var map; 
 
     // Try other themes: Julie, CubanShirts, PrimaryColors, Charged, BlueDusk, Bahamation, Harmony, Shrooms 
 
     var theme = "Wetland"; 
 
     require([ 
 
     "esri/map", "esri/layers/FeatureLayer", 
 
     "esri/dijit/InfoWindow", "esri/InfoTemplate", 
 
     "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer", 
 
     "dijit/layout/ContentPane", "dijit/layout/TabContainer", 
 
     "dojox/charting/Chart2D", "dojox/charting/plot2d/Pie", 
 
     "dojox/charting/action2d/Highlight", "dojox/charting/action2d/MoveSlice", "dojox/charting/action2d/Tooltip", 
 
     "dojox/charting/themes/" + theme, 
 
     "dojo/dom-construct", "dojo/dom-class", 
 
     "dojo/number", "dojo/domReady!" 
 
     ], function(
 
     Map, FeatureLayer, 
 
     InfoWindow, InfoTemplate, 
 
     SimpleFillSymbol, SimpleRenderer, 
 
     ContentPane, TabContainer, 
 
     Chart2D, Pie, 
 
     Highlight, MoveSlice, Tooltip, 
 
     dojoxTheme, 
 
     domConstruct, domClass, 
 
     number, parser 
 
    ) { 
 
     // Use the info window instead of the popup. 
 
     var infoWindow = new InfoWindow(null, domConstruct.create("div")); 
 
     infoWindow.startup(); 
 

 
     map = new Map("map", { 
 
      basemap: "streets", 
 
      center: [-113.405, 43.521], 
 
      infoWindow: infoWindow, 
 
      zoom: 6 
 
     }); 
 
     map.infoWindow.resize(180, 200); 
 

 
     var template = new esri.InfoTemplate(); 
 
     // Flag icons are from http://twitter.com/thefella, released under creative commons. 
 
     template.setTitle("<b><img src='flags/${STATE_ABBR}.png'> ${STATE_NAME}</b>"); 
 
     template.setContent(getWindowContent); 
 

 
     var statesLayer = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5", { 
 
      mode: FeatureLayer.MODE_ONDEMAND, 
 
      infoTemplate: template, 
 
      outFields: ["*"] 
 
     }); 
 
     var symbol = new SimpleFillSymbol(); 
 
     statesLayer.setRenderer(new SimpleRenderer(symbol)); 
 

 
     map.addLayer(statesLayer); 
 

 
     function getWindowContent(graphic) { 
 
      // Make a tab container. 
 
      var tc = new TabContainer({ 
 
      style: "width:100%;height:100%;" 
 
      }, domConstruct.create("div")); 
 

 
      // Display attribute information. 
 
      var cp1 = new ContentPane({ 
 
      title: "Details", 
 
      content: "<a target='_blank' href='https://en.wikipedia.org/wiki/" + 
 
       graphic.attributes.STATE_NAME + "'>Wikipedia Entry</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 
 
      }); 
 
      // Display a dojo pie chart for the male/female percentage. 
 
      var cp2 = new ContentPane({ 
 
      title: "Pie Chart" 
 
      }); 
 
      tc.addChild(cp1); 
 
      tc.addChild(cp2); 
 

 
      // Create the chart that will display in the second tab. 
 
      var c = domConstruct.create("div", { 
 
      id: "demoChart" 
 
      }, domConstruct.create("div")); 
 
      var chart = new Chart2D(c); 
 
      domClass.add(chart, "chart"); 
 

 
      // Apply a color theme to the chart. 
 
      chart.setTheme(dojoxTheme); 
 
      chart.addPlot("default", { 
 
      type: "Pie", 
 
      radius: 45, 
 
      htmlLabels: true 
 
      }); 
 
      tc.watch("selectedChildWidget", function(name, oldVal, newVal){ 
 
      if (newVal.title === "Pie Chart") { 
 
       chart.resize(100,100); 
 
      } 
 
      }); 
 

 
      // Calculate percent male/female. 
 
      var total = graphic.attributes.POP2000; 
 
      var male = number.round(graphic.attributes.MALES/total * 100, 2); 
 
      var female = number.round(graphic.attributes.FEMALES/total * 100, 2); 
 
      chart.addSeries("PopulationSplit", [{ 
 
      y: male, 
 
      tooltip: male, 
 
      text: "Male" 
 
      }, { 
 
      y: female, 
 
      tooltip: female, 
 
      text: "Female" 
 
      }]); 
 
      //highlight the chart and display tooltips when you mouse over a slice. 
 
      new Highlight(chart, "default"); 
 
      new Tooltip(chart, "default"); 
 
      new MoveSlice(chart, "default"); 
 

 
      cp2.set("content", chart.node); 
 
      return tc.domNode; 
 
     } 
 
     }); 
 
    </script> 
 
    </head> 
 

 
    <body class="claro"> 
 
    <div id="map"></div> 
 
    </body> 
 
</html>

希望這將幫助你:)

來源

2017-05-15 13:18:47

嗨@Developerrrr謝謝！更改腳本中的值將定位加載Web應用程序的所有屏幕。所以基本上你不能只爲小型手機屏幕定製dojox圖表，並保持其較大屏幕的初始尺寸。試圖瞭解這是如何工作的......我的評估是否正確？ – Michelle

你的觀點是正確的。我建議根據屏幕大小更改這些值。使用JavaScript代碼代替CSS。 https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onresize ---這個示例顯示瞭如何檢查設備或瀏覽器的寬度/高度......所以基本上你必須添加一個「onresize 「在你的代碼上，並調用一個函數，該派將根據屏幕大小更改這些值... –

這不是直接實現，我只是建議你如何實現這一目標..另一種方法來做到這一點......如果在你的項目中它的重要性，你可以使用這種替代方法... –

調整手機屏幕上的dojox圖表

回答

相關問題