Google 未使用完整的可视化 space（永远）

Question

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

此图的左侧和右侧至少有 75 个像素，顶部和底部还有 30-40 个像素。当我提供大量 space.

时，没有理由馅饼本身不能更大，也没有理由让右边的图例像那样包装

我该如何解决这个问题？

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>

Google 未使用完整的可视化 space（永远）

Google Visualization not using full space (ever)

html

javascript

charts

dashboard

google-visualization