Google饼图更改文本对齐方式

时间:2019-11-22 12:02:56

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

这是我的报告,

enter image description here

如何一次而不是滚动地更改我的最低值。

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

1 个答案:

答案 0 :(得分:1)

为了在图例上允许多行,
您必须使用图例位置-> 'top'
那么您可以增加-> maxLines

的数量
legend: {
  position: 'top',
  maxLines: 3
},

来自documentation ...

  

legend.maxLines-图例中的最大行数。将此数字设置为大于1的数字可向图例添加行。仅当legend.position'top'时,此选项才有效。

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

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>

相关问题