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);
  }

谢谢，法尔汉

4

1 回答 1

7

正确调整饼图的大小可能很麻烦，
但归结为调整整个图表 的大小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>

于 2016-10-04T13:57:04.283 回答