Google Charts:如何更改标签颜色百分比?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Google Charts:如何更改标签颜色百分比?相关的知识,希望对你有一定的参考价值。
我正在使用Google Charts来显示饼图。在我的选项变量中,我有传说设置:legend: {position: 'labeled', textStyle: {color: 'white', fontSize: 24}}
现在,如果您查看下面的图像,字体颜色仅适用于标签名称,而不适用于百分比文本或标签行。我可以做些什么来改变百分比文本的颜色和标签线为白色?
答案
没有看到一个选项会改变所提到的图表元素的文本样式 但图表的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>
另一答案
改变CSS:
g g g text
{
fill: black;
}
以上是关于Google Charts:如何更改标签颜色百分比?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用JSON数据为Google Charts实现样式或属性?
如何在Scatter Google Charts中显示两种不同的颜色?