Question

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

    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＆amp; width用于图表容器的整个图表，
包括轴标签，标题，图例等......

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

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

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

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

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>

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

1 个答案: