谷歌图表图例标签被裁剪

Question

谷歌图表图例标签被裁剪

chartsgoogle-visualizationgoogle-pie-chart

10

我的饼图图例标签因标签内容过长而被截断。我已经尝试将宽度设置为“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);
  }

谢谢，Farhan

- Farhan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WhiteHat · Accepted Answer

正确地调整饼图的大小可能有些繁琐，但归根结底是要调整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>