Javascript 在移动屏幕上调整dojox图表的大小
我正在使用此ESRI教程 我想为更小的屏幕定制dojox饼图：Javascript 在移动屏幕上调整dojox图表的大小,javascript,css,dojo,arcgis-js-api,dojox.charting,Javascript,Css,Dojo,Arcgis Js Api,Dojox.charting,我正在使用此ESRI教程 我想为更小的屏幕定制dojox饼图： @media only screen and (max-device-width: 320px) { ... } 是否可以将自定义dojox图表大小用于自定义屏幕大小 例如，仅当在最大设备宽度为320px的屏幕上加载时，饼图才为{width:60px；height:60px}？是的，这是可能的 然而，我恐怕你不能仅仅通过CSS来实现这一点，因为图表的大小取决于各种因素。如图表半径，地图信息窗口大小，集装箱大小等
@media only screen
and (max-device-width: 320px) {
...
}
图表半径地图信息窗口大小集装箱大小窗口大小调整事件
带图表的信息窗口
html，body，#map{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
.图表{
宽度：100px；
高度：100px；
填充：0px！重要；
}
var映射；
//尝试其他主题：朱莉、古巴艺术家、原色、荷电、蓝色黄昏、巴哈马、和声、Shrooms
var theme=“湿地”；
要求([
“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/”+主题，
“dojo/dom构造”、“dojo/dom类”，
“dojo/number”、“dojo/domReady！”
]，功能(
地图，特征层，
信息窗口，信息模板，
SimpleFillSymbol，SimpleRenderer，
ContentPane、TabContainer、，
查特，派，
高亮显示、移动切片、工具提示、，
多约克斯泰姆，
domConstruct，domClass，
数字，解析器
) {
//使用信息窗口而不是弹出窗口。
var infoWindow=newinfowindow（null，domConstruct.create（“div”）；
infoWindow.startup（）；
地图=新地图（“地图”{
基本地图：“街道”，
中间：[113.405,43.521]，
infoWindow:infoWindow，
缩放：6
});
map.infoWindow.resize（180200）；
var template=新的esri.InfoTemplate（）；
//旗帜图标来自http://twitter.com/thefella，根据知识共享发布。
setTitle（“${STATE_NAME}”）；
template.setContent（getWindowContent）；
var statesLayer=新功能层（“https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5", {
模式：FeatureLayer.mode\u ONDEMAND，
infoTemplate:template，
外场：[“*”]
});
var symbol=新的SimpleFillSymbol（）；
setRenderer（新的SimpleRenderer（符号））；
map.addLayer（statesLayer）；
函数getWindowContent（图形）{
//制作一个标签容器。
var tc=新标签容器({
样式：“宽度：100%；高度：100%；”
}，domConstruct.create（“div”）；
//显示属性信息。
var cp1=新内容窗格({
标题：“详情”，
内容：“
中位年龄：”+
graphic.attributes.MED_年龄+“
中位年龄（男性）：”+
graphic.attributes.MED_AGE_M+“
中位年龄（女性）：”+
graphic.attributes.MED\u AGE\u F
});
//显示男女比例的dojo饼图。
var cp2=新内容窗格({
标题：“饼图”
});
tc.addChild（cp1）；
tc.addChild（cp2）；
//创建将显示在第二个选项卡中的图表。
var c=domConstruct.create（“div”{
id:“人口统计图”
}，domConstruct.create（“div”）；
var图表=新图表2D（c）；
添加（图表，“图表”）；
//将颜色主题应用于图表。
图表.设置主题（dojoxTheme）；
chart.addPlot（“默认值”{
键入：“馅饼”，
半径：45，
htmlLabels：是的
});
tc.watch（“selectedChildWidget”，函数（名称、旧值、新值）{
如果（newVal.title==“饼图”）{
调整图表大小（100100）；
}
});
//计算男性/女性的百分比。
var total=graphic.attributes.POP2000；
var male=整数（graphic.attributes.MALES/总数*100,2）；
var female=number.round（graphic.attributes.FEMALES/total*100,2）；
chart.addSeries（“PopulationSplit”[{
y:男，
提示：男性，
正文：“男性”
}, {
y:女,，
提示：女性，
文本：“女性”
}]);
//将鼠标悬停在切片上时，高亮显示图表并显示工具提示。
新突出显示（图表“默认”）；
新工具提示（图表，“默认”）；
新的MoveSlice（图表，“默认”）；
cp2.set（“content”，chart.node）；
返回tc.domNode；
}
});