【问题标题】:vAxis Values not visible in bar chart : Google ChartsvAxis 值在条形图中不可见:谷歌图表
【发布时间】:2013-09-17 11:57:39
【问题描述】:

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

.

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

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

【问题讨论】:

    标签: javascript google-visualization dom-events google-fusion-tables


    【解决方案1】:

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

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

    2. vAxis的fontSize对对面比较大

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

    <div>-container 的高度更改为实际可以容纳许多条的高度:

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

    注意正常的SQL语法OR不被FusionTables支持,你必须使用IN。字符串也必须用单引号''

    【讨论】:

    • 你知道为什么我的价值观(环境)会重复吗?我只想显示三个值:Rural、Urban 和 Peri Urban?
    • 这是我的查询.. 查询:“SELECT Environment,'BoyPupils','GirlPupils','FemaleTeachers','MaleTeachers','BoardingPupils'" + "FROM 1eC4sIAgVXfFj01mOM2cDiyW2nly7TcFeIXj1G3s WHERE Environment IN('Rural ','Urban','Peri Urban')”,但它仍然无法正常工作!会不会是我的桌子的情况?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-07-08
    相关资源
    最近更新 更多