javascript - 谷歌可视化不使用完整空间(曾经)

Question

当我使用 Google 可视化库创建可视化时，这是一个持续的恶化:

此图的左侧和右侧至少有 75 像素，顶部和底部还有 30-40 像素。馅饼本身没有理由不能更大，当我提供足够的空间时，右边的图例也没有理由像那样包装。

我该如何解决这个问题？

Answer 1

PieChart 最不适合调整大小

但您可以使用 --> chartArea

选项进行细微调整

请参阅以下工作片段...

有调整

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['cateory', 'value'],
    ['1 - snail mail', 100],
    ['2 - de-elevatd', 200],
    ['3 - default', 900],
    ['4 high', 100],
  ]);

  var chart = new google.visualization.PieChart(document.getElementById('chart'));
  chart.draw(data, {
    chartArea: {
      height: '100%',
      width: '100%',
      // prevent highlight color of slice from being cutoff on hover
      top: 8,
      bottom: 8
    }
  });
}

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

---

没有调整

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['cateory', 'value'],
    ['1 - snail mail', 100],
    ['2 - de-elevatd', 200],
    ['3 - default', 900],
    ['4 high', 100],
  ]);

  var chart = new google.visualization.PieChart(document.getElementById('chart'));
  chart.draw(data);
}

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