Google 图表图例标签被截断

Question

当标签太长时，我的饼图的图例标签被截断了。我已经尝试将宽度设置为“100%”，但我的传说太大了，无法解决这个问题。有没有办法离散定义饼图大小和图例大小？有人可以分享一个相同的工作示例吗？

Link 对于 JS Fiddle：https://jsfiddle.net/2nzzLe18 容器 div 尺寸和图例标签字体大小是我要求的一部分。

下面还有代码，

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['info regarding task Work',     11],
      ['info regarding task Eat',      2],
      ['info regarding task Commute',  2],
      ['info regarding task Watch TV', 2],
      ['info regarding task Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities',
      chartArea: {left: -100, width: '100%'},
      legend: {textStyle: {fontSize: 15}},

    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }

谢谢，法汉

Answer 1

正确调整饼图的大小可能很麻烦，
但它归结为调整整体图表div,
的大小以及绘制饼图的 chartArea 的大小（与图例分开）

它可能会很棘手，因为它并不总是按照您认为应该的方式响应，
但我能够显示整个图例

请参阅以下工作片段，
从 div
上的 style 属性移动了总体大小到图表的选项，然后调整 chartArea

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day'],
    ['info regarding task Work',     11],
    ['info regarding task Eat',      2],
    ['info regarding task Commute',  2],
    ['info regarding task Watch TV', 2],
    ['info regarding task Sleep',    7]
  ]);

  var options = {
    backgroundColor: 'cyan',
    title: 'My Daily Activities',
    chartArea: {
      left: 0,
      height: 250,
      width: 600
    },
    height: 300,
    width: 600,
    legend: {
      maxLines: 1,
      textStyle: {
        fontSize: 15
      }
    },
  };

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

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

Google 图表图例标签被截断

Google Charts Legend labels cut off

charts

google-visualization

google-pie-chart