谷歌图表传奇标签被切断

Question

当标签太长时,我的饼图的图例标签会被切断.我已经尝试将宽度设置为'100%',但我的传说对抗这个问题很重要.有没有办法离散地定义饼图大小和图例大小？有人可以分享一个相同的工作实例.

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，其中，所述饼被吸入（单独从图例）

这可能很棘手，因为它并不总是响应您的想法，
但是我能够显示整个图例

请参阅以下工作片段，
将整体大小从的style属性移至div
图表的选项，然后调整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>