图表区域宽度和高度与图表选项宽度和高度

Question

我刚刚获得了一些使用 Google 图表的经验，但我很难理解在图表选项中设置宽度和高度与在图表区域设置中设置宽度和高度之间的区别。例如，我已经看到这样做了：

    var options = {
        width: '500px',
        height: '400px',
        chartArea: {
            left: "15%",
            top: "5%",
            height: "80%",
            width: "75%"
        },
        //chartArea: { top: 10, left: 80, bottom: 50 },
        legend: { position: 'bottom', alignment: 'start' },
        annotations: { alwaysOutside: true},
        hAxis: {
            gridlines: { count: 10 },
        },

如果我不得不猜测，这告诉 Google Charts 使用 500 x 400 像素的“画布”大小，但图表本身应该只占用 75% 的宽度和 80% 的高度。这是正确的吗？

Answer 1

图表选项height & width 是针对图表容器的整个图表，
包括轴标签、标题、图例等……

选项chartArea 用于图表的内部，
情节实际发生的地方，不包括边缘上的任何标签......

以下选项会将图表拉伸到图表容器的整个宽度和高度，
并将图表区域拉伸到图表的整个宽度和高度，
在标签边缘留出空间（top、left、bottom、right）

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

---

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

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var chart = new google.visualization.ChartWrapper({
    chartType: 'ScatterChart',
    containerId: 'chart',
    dataTable: google.visualization.arrayToDataTable([
      ['x', 'y'],
      [10, 15],
      [15, 13],
      [18, 20],
      [24, 26],
      [34, 30],
      [40, 43],
      [49, 48],
      [50, 55],
      [65, 67],
      [70, 70],
      [72, 70],
      [73, 70],
      [80, 85]
    ]),
    options: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 32,
        left: 32,
        bottom: 32,
        right: 16
      },
      height: '100%',
      width: '100%',
      legend: {
        position: 'top'
      }
    }
  });

  chart.draw();
  window.addEventListener('resize', function () {
    chart.draw();
  }, false);
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  height: 100%;
}

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