2

Google ビジュアライゼーションを使用して円グラフを描画しています。凡例のカラー サークルの半径を変更したい。

それは可能ですか？

Google グラフからの出力は次のようになります。

<circle cx="8" cy="8" r="8" stroke="none" stroke-width="0" fill="#de6913" style="
    width: 20px;
"></circle>

変更したいのは r="8" です。

円グラフの標準的な例を次に示します。

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
4

1 に答える 1

0

'ready'イベントが発生したら、変更を加えることができますchart

このようなものはうまくいくでしょう 

google.visualization.events.addListener(chart, 'ready', function () {
  var legendCircles = container.getElementsByTagName('circle');
  Array.prototype.forEach.call(legendCircles, function(circle) {
    circle.setAttribute('r', 10);
  });
});

ただし、円とラベルを互いに一致させたい場合は、構成オプションを
使用してlegend.textStyle fontSize

次の作業スニペットを参照してください... 

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Task',     'Hours per Day'],
      ['Percent',  10],
      ['Rest',     90],
    ]);

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.PieChart(container);

    chart.draw(data, {
      legend: {
        textStyle: {
          fontSize: 24
        }
      }
    });
  },
  packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

于 2016-07-26T12:15:00.913 に答える