Google Charts Legend标签被剪下

问题描述

饼图的图例标签过长会被剪切掉.我已经尝试过将宽度设置为"100％"，但是我的传说足以解决这个问题.有没有一种方法可以分别定义饼图大小和图例大小?有人可以分享一个可行的例子吗?

The legend labels for my pie chart are being cut off when the label is too long. I have already tried to setting width to '100%' but my legend is way big to counter that. Is there a way to discretely define the pie chart size and the legend size? Could someone please share a working example of the same.

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

Link for JS Fiddle: https://jsfiddle.net/2nzzLe18The container div dimensions and the legend label font size are part of my requirement.

下面也是代码，

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

谢谢，法汉

推荐答案

正确设置饼图的大小可能很麻烦，
但归结为调整总体图表 div ，
以及绘制饼图的 chartArea 的大小(与图例分开)

it can be cumbersome to properly size a pie chart,
but it boils down to adjusting the size of the overall chart div,
and the size of the chartArea, where the pie is drawn (separate from the legend)

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

it can be tricky because it doesn't always respond how you think it should,
but I was able to get the entire legend to display

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

see the following working snippet,
moved the overall size from the style attribute on the div
to the options for the chart, then adjusted the 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 Charts Legend标签被剪下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！