Question

如何增加材料条形图中轴和第一列之间的空间？我尝试了很多东西

options.chartArea = { left: '8%', top: '8%', width: "70%", height: "70%" };

它不起作用。

Answer 1

没有选项来调整您引用的空间

必须插入空白行

调整chartArea只会移动轴和第一列，
但他们仍然会彼此相邻

此外，chartArea选项根本不适用于材料图表以及其他几个人

请参阅以下工作代码段

空行用于创建空格，
您可以在核心图表上看到chartArea.left的差异但如上所述，轴仍然非常接近而没有空白行

还有一个选项 - theme: 'Material' - 用于核心图表

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['ID', 'Col A'],
      [' ', null],
      ['1000', 4],
      ['1001', 4],
      ['1002', 6]
    ]);

    var options = {
      chartArea: {
        left: 140
      },
      height: 400,
      vAxes: {
        0: {
          format: 'currency',
          title: 'Labor Cost per Invoice'
        }
      },
      width: 600
    };

    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));

    options.theme = 'material';
    var chart1 = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
    chart1.draw(data, options);
  },
  packages:['bar', 'corechart']
});

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

轴与第一列之间的谷歌条形图边距

1 个答案: