图例圆半径谷歌图表

Question

我正在使用 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);
  }

Answer 1

一旦'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.textStyleconfiguration option增加fontSize

请参阅以下工作 sn-p...

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>