2017-09-18 83 views
1

我使用Google Charts來顯示餅圖。在我的選項變量中,我將圖例設置爲:legend: {position: 'labeled', textStyle: {color: 'white', fontSize: 24}}Google Charts:如何更改百分比標籤顏色?

現在,如果您查看下圖,字體顏色僅適用於標籤名稱,但不適用於百分比文本或標籤線。有什麼我可以做的改變顏色的百分比文字和標籤線白色?

Pie chart

回答

1

沒有看到一個選項,將改變文本樣式的圖表元素提到
但圖表的SVG可以手動修改

然而,圖表將恢復到默認值風格,
每當有活動,如徘徊片

正因爲如此,一個MutationObserver可用於覆蓋風格

見下工作片斷......使用方法`getImageURI`時

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>

+0

希望這可以幫助,只畫背面是 - 產生的圖像將不包括手動更改... – WhiteHat