Google Charts:如何更改百分比标签颜色?

问题描述

我使用 Google Charts 来显示饼图.在我的选项变量中，我将图例设置为: legend: {position: 'labeled', textStyle: {color: 'white', fontSize: 24}}

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?

推荐答案

没有看到可以更改提及的图表元素的文本样式的选项
但图表的 svg 可以手动修改

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

因此，MutationObserver 可用于覆盖样式

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>

这篇关于Google Charts:如何更改百分比标签颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！