图例圆半径 Google 图表

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.textStyle configuration option 增加 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>

图例圆半径 Google 图表

Legend circle radius Google Chart

javascript

google-visualization

google-pie-chart