如图所示,我在垂直轴上的值不可见。我的代码可能是什么问题?
function drawVisualization() {
google.visualization.drawChart({
containerId: 'visualization',
dataSourceUrl: 'http://www.google.com/fusiontables/gvizdata?tq=',
query: 'SELECT Environment, GirlPupils, BoyPupils, FemaleTeachers, MaleTeachers FROM 1eC4sIAgVXfFj01mOM2cDiyW2nly7TcFeIXj1G3s',
chartType: 'BarChart',
options: {
title: 'Number of Students and Teachers',
vAxis: {
title: 'Environment'
},
hAxis: {
title: 'Number'
}
}
});
}
最佳答案
从图像中可以看出,垂直值实际上已显示!问题是
您为图表容器设置了一个很小的高度,试图显示很多条形图
vAxis的fontSize相对较大
经常会出现左侧空间不足的问题
将<div>
-容器的高度更改为实际上可以容纳许多条的高度:
<div id="visualization" style="height:1000px;"></div>
更改vAxis的fontSize并在chartArea左侧添加一些空间
options: {
title: 'Number of Students and Teachers',
vAxis: {
title: 'Environment',
textStyle : { fontSize : 7 }
},
hAxis: {
title: 'Number'
},
chartArea: {left: "150",top: 0 }
}
编辑:
为了仅选择
Environment
为“农村”,“城市”或“城市边缘”的列,请将查询更改为SELECT Environment, GirlPupils, BoyPupils, FemaleTeachers, MaleTeachers
FROM 1eC4sIAgVXfFj01mOM2cDiyW2nly7TcFeIXj1G3s
WHERE Environment IN ('Rural', 'Urban','Peri Urban')
请注意,FusionTables不支持普通的SQL语法
OR
,您必须使用IN
。字符串也必须用单引号''
引起来。