Google Charts：如何更改标签颜色百分比？

Question

我正在使用Google Charts来显示饼图。在我的选项变量中，我有传说设置：legend: {position: 'labeled', textStyle: {color: 'white', fontSize: 24}}

现在，如果您查看下面的图像，字体颜色仅适用于标签名称，而不适用于百分比文本或标签行。我可以做些什么来改变百分比文本的颜色和标签线为白色？

Answer 1

没有看到一个选项会改变所提到的图表元素的文本样式 但图表的svg可以手动修改

但是，图表将恢复为默认样式， 每当有活动时，例如悬停切片

因此，可以使用MutationObserver来覆盖样式

请参阅以下工作代码段...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'y');
    data.addRows([
       ['Moving to a new city', 25],
       ['Meeting new people', 12.5],
       ['Gaining independence', 62.5]
    ]);

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

    var observer = new MutationObserver(function () {
      $.each($('#chart_div path[stroke="#636363"]'), function (index, path) {
        $(path).attr('stroke', '#ffffff');
      });
      $.each($('#chart_div text[fill="#9e9e9e"]'), function (index, label) {
        $(label).attr('fill', '#ffffff');
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });

    chart.draw(data, {
      backgroundColor: '#1f618d',
      legend: {position: 'labeled', textStyle: {color: 'white', fontSize: 24}}
    });
  },
  packages: ['corechart']
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Answer 2

改变CSS：

g g g text
{
    fill: black;
}