谷歌饼图更改文本对齐方式答案

【问题标题】：Google Pie Chart Change Text Alignment谷歌饼图更改文本对齐方式
【发布时间】：2019-11-22 12:02:56
【问题描述】：

这是我的报告，

如何一一更改我的底部值而不是滚动。

 var options = {
                legend:'bottom',
                is3D: true
                }

【问题讨论】：

标签： javascript charts google-visualization google-pie-chart

【解决方案1】：

为了允许图例上有多行，
你必须使用图例位置 --> 'top'
那么你可以增加数量 --> maxLines

legend: {
  position: 'top',
  maxLines: 3
},

来自documentation...

legend.maxLines - 图例中的最大行数。将此设置为大于一的数字以向图例添加线条。此选项仅在 legend.position 为 'top' 时有效。

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart', 'table']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['category', 'value'],
    ['Category 1', 34],
    ['Category 2', 18.7],
    ['Category 3', 18.6],
    ['Category 4', 18.6],
    ['Category 5', 10]
  ]);

  var pie = new google.visualization.PieChart(document.getElementById('chart-pie'));
  pie.draw(data, {
    legend: {
      position: 'top',
      maxLines: 3
    },
    height: 400,
    is3D: true,
    width: 400
  });
});

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

【讨论】：

如何一一对齐底部，如上图左3和右图2。如何一一对齐底部。谢谢。 @WhiteHat
底部对齐时，图例只能有一行，而不是顶部对齐时的多行。因此，图表必须足够宽，以便为所有标签留出空间。您还可以减小图例的字体大小以腾出更多空间。