Question

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

JS小提琴的链接：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>

谷歌图表传奇标签被切断

1 个答案: