web-dev-qa-db-ja.com

Google ChartsLegendのラベルが途切れる

ラベルが長すぎると、円グラフの凡例ラベルが切り取られます。私はすでに幅を「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);
  }

ありがとう、ファーハン

chartsgoogle-visualizationgoogle-pie-chart
9
Farhan

円グラフのサイズを適切に設定するのは面倒な場合があります。
しかし、要約すると、全体チャート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>
5
WhiteHat