Google图表:如何更改百分比标签颜色? [英] Google Charts: how do I change the percentage label color?

问题描述

我正在使用Google图表显示饼图.在我的options变量中，将图例设置为: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可用于覆盖样式

请参阅以下工作片段...

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图表:如何更改百分比标签颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！