Question

以下代码生成一个水平堆叠条形图，如下所示：

enter image description here

如果我将高度属性更改为50而 groupWidth 更改为40％，则图例会消失，图表如下所示： enter image description here

问题1：如何设置条形的高度并仍然显示图例？
问题2：如何让水平轴和垂直轴消失？

我真正想要完成的是这样的图片：

enter image description here

  <html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          [' ', 'Sales', 'Expenses'],
          [0 ,  1000,      400],
        ]);

        var options = {
          isStacked: true,
          width:    200,
          height: 60,
          vAxis: {gridlines: {count: 0}},                    
          hAxis: {gridlines: {count: 0}},          
          bar: {groupWidth: "90%"},
          legend: {position: 'top'}

        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" ></div>
  </body>
</html>

Answer 1

设置chartArea.top选项以向下移动图表区域并为图例空间绘制：

chartArea: {
    top: 15
}

jsfiddle

在水平堆积条形图上设置垂直轴的垂直高度

1 个答案: