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

问题描述 投票：1回答：1

我一直在使用谷歌图表工具创建柱形图，但我很难在我的图表中添加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个回答
0
投票

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%'
}

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

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.