繁体   English   中英

vAxis 值在条形图中不可见:谷歌图表

[英]vAxis Values not visible in bar chart : Google Charts

如图所示,我在垂直轴上的值不可见:

在此处输入图片说明 .

我的代码可能有什么问题?

      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'
        }
      }
    });
  }

正如我从图像中可以看出的,实际上显示了垂直值! 问题是

  1. 您为图表容器设置的高度很小,试图显示很多条形

  2. vAxis 的 fontSize 相对较大

  3. 通常会出现左侧空间不足的问题

<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为 Rural、Urban 或 Peri Urban 的列,请将查询更改为

SELECT Environment, GirlPupils, BoyPupils, FemaleTeachers, MaleTeachers 
FROM 1eC4sIAgVXfFj01mOM2cDiyW2nly7TcFeIXj1G3s 
WHERE Environment IN ('Rural', 'Urban','Peri Urban')

请注意,FusionTables 不支持普通 SQL 语法OR ,您必须使用IN 字符串也必须用单引号''

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM