Google Charts: how do I change the percentage label color?

问题

I'm using Google Charts to display pie charts. In my options variable, I have the legend set this: legend: {position: 'labeled', textStyle: {color: 'white', fontSize: 24}}

Now if you look at the image below, the font color only applies to the label name, but not the percentage text or the label line. Is there anything I can do to change the color for the percentage text and the label line to white?

回答1:

didn't see an option that will change the text style for the charts elements mentioned
but the chart's svg can be modified manually

however, the chart will revert back to the default style,
whenever there is activity, such as hovering a slice

as such, a MutationObserver can be used to override the styles

see following working snippet...

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>

回答2:

change the css:

g g g text
{
    fill: black;
}

来源：https://stackoverflow.com/questions/46285084/google-charts-how-do-i-change-the-percentage-label-color

标签

javascript

api

charts

google-visualization