Question

我一直在使用谷歌图表工具创建柱形图，但我很难在我的图表中添加Y轴。我只需要在图表左侧的轴上显示一系列标准值。

我可以创建和操作X轴，但Y轴不会出现某些原因。我确信这里有一些简单的东西。

如果下面的代码很乱，我也很抱歉，我对此很陌生。

{{1}}

先谢谢，

Answer 1

y轴被图表选项隐藏 - ＆gt; chartArea: {width: "100%"}

chartArea控制条形中心部分的大小，
并且不包括任一轴或顶部的标签

使用height＆amp;整个图表的width以外chartArea

如果您想最大化图表区域，请在left，bottom，top和/或right上设置限制，建议替换以下......

height: '100%',
width: '100%',
chartArea: {
  top: 32,
  left: 32,
  bottom: 32,
  right: 12,
  height: '100%',
  width: '100%'
}

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Year','Orange','Orange2','Blue','Blue2','Green','Green2','Purple','Purple2','Brown','Brown2','Grey', 'Grey2', {role: 'annotation'}],
    ['2007',0,2,0,0,0,0,0,0,0,0,0,0,''],
    ['2008',0,0,0,1,0,0,0,0,0,0,1,0,''],
    ['2009',0,0,0,0,0,0,0,0,0,0,0,0,''],
    ['2010',0,0,0,1,0,0,1,0,0,0,0,1,''],
    ['2011',0,0,0,0,0,0,0,0,0,0,0,0,''],
    ['2012',0,0,0,0,0,0,0,0,1,0,5,0,''],
    ['2013',0,0,2,0,0,0,0,0,3,0,0,0,''],
    ['2014',0,0,0,0,0,0,0,0,0,0,0,0,''],
    ['2015',0,0,0,2,0,0,0,0,1,0,1,0,''],
    ['2016',0,2,0,0,0,1,0,0,4,0,0,0,''],
    ['2017',1,0,0,1,0,0,0,2,0,0,0,0,'']
  ]);

  var colors = [
    { color: 'ff884d' },
    { color: 'ffddcc' },
    { color: '3366ff' },
    { color: '99b3ff' },
    { color: '33ff77' },
    { color: 'b3ffcc' },
    { color: 'd633ff' },
    { color: 'f0b3ff' },
    { color: 'e6ccb3' },
    { color: 'ac7339' },
    { color: 'c0c0c0' },
    { color: 'e6e6e6' },
  ];

  var options = {
    isStacked:true,
    series: colors,
    bar: {groupWidth: "90%"},
    legend: {position:'top', textStyle: {fontSize: 9}},
    axes: {
      y: {
        0: { side: 'left', label: 'Count'}
      }
    },
    height: '100%',
    width: '100%',
    chartArea: {
      top: 32,
      left: 32,
      bottom: 32,
      right: 12,
      height: '100%',
      width: '100%'
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

将Y轴添加到Google堆积柱形图

1 个答案: