对齐Google可视化饼图，使图表位于页面中心

Question

这就是饼图目前的样子

这是我使用的代码：

<div id="{{ question.0.name }}" style="width: 100%; height: 400px;"></div>

<script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        var data = google.visualization.arrayToDataTable([
            ['Score', 'Amount'],
            ['1', {{ question.1.0}}],
            ['2', {{ question.1.1}}],
            ['3', {{ question.1.2}}],
            ['4', {{ question.1.3}}],
            ['5', {{ question.1.4}}]
        ]);

        var chart = new google.visualization.PieChart(document.getElementById('{{ question.0.name }}'));

        chart.draw(data);
    }
</script>

我正在使用Jinja2变量填充字段，但它们似乎正在工作。我想对齐饼图，使其位于页面中间。任何想法我怎么能这样做？

Answer 1

PieChart在调整大小和放置时可能是最困难的

将馅饼放在容器的中心，
最简单的改变是将图例放在顶部或底部。

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

＆＃13;

＆＃13;

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['3', 33.3],
    ['5', 66.7]
  ]);

  var options = {
    height: 400,
    legend: {
      alignment: 'center',
      position: 'top'
    }
  };

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

否则，您可以尝试调整chartArea.width ...

var options = {
  chartArea: {
    width: '40%',
  },