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

这就是饼图目前的样子

这是我正在使用的代码：

<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变量来填充字段，但它们似乎在工作。我想把饼图对齐，使它位于页面的中间。你知道我该怎么做吗？

当涉及到尺寸和位置时，PieChart可能是最困难的

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

请参阅以下工作片段

google.charts.load'current'{ 软件包：['corechart'] }.Then函数{ var data=google.visualization.arrayToDataTable[ ['Label'，'Value']， ['3', 33.3], ['5', 66.7] ]; 变量选项={ 身高：400， 图例：{ 对齐：“中心”， 位置：'顶部' } }; var container=document.getElementById'chart_div'； var chart=new google.visualization.PieChartcontainer； 图表。绘图数据，选项； };

---

工作得很好！非常感谢！决定将图例移至顶部：