首页 文章

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

提问于
浏览
1

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

现在,如果您查看下面的图像,字体颜色仅适用于标签名称,但不适用于百分比文本或标签行 . 我有什么办法可以将文本百分比和标签行的颜色更改为白色吗?

Pie chart

1 回答

  • 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>
    

相关问题