向谷歌堆积柱形图添加 Y 轴答案

【问题标题】：Adding a Y Axis to a google stacked column chart向谷歌堆积柱形图添加 Y 轴
【发布时间】：2018-03-02 14:26:53
【问题描述】：

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

我能够创建和操作 X 轴，但由于某种原因 Y 轴不会出现。我确定这里缺少一些简单的东西。

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

<head>
 <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
  </script>
  <script type = "text/javascript">
        google.charts.load('current', {packages: ['corechart']});     
  </script>
    <script language = "JavaScript">
                     function drawChart() {
                            // Define the chart to be drawn.
                            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}},
            chartArea: {  width: "100%"},
    axes: {
      y: {
        0: { side: 'left', label: 'Count'} 
    }}

            };  

                        // Instantiate and draw the chart.
                        var chart = new google.visualization.ColumnChart(document.getElementById('publicbarchart'));
                        chart.draw(data, options);
                 }
                 google.charts.setOnLoadCallback(drawChart);
                </script>

</head>
<body>

<div id="publicbarchart" style="width: 900px; height: 300px;"></div>
</body>

提前致谢，

【问题讨论】：

标签： html google-visualization yaxis

【解决方案1】：

图表选项隐藏了 y 轴 --> chartArea: {width: "100%"}

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

在整个图表中使用height 和width 之外的chartArea

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

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

请参阅以下工作 sn-p...

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

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

【讨论】：