我正在使用Google Charts来显示饼图 . 在我的选项变量中,我有传说设置: legend: {position: 'labeled', textStyle: {color: 'white', fontSize: 24}}
legend: {position: 'labeled', textStyle: {color: 'white', fontSize: 24}}
现在,如果您查看下面的图像,字体颜色仅适用于标签名称,但不适用于百分比文本或标签行 . 我有什么办法可以将文本百分比和标签行的颜色更改为白色吗?
没有看到会改变所提及的图表元素的文本样式的选项但图表的svg可以手动修改
但是,图表将恢复为默认样式,只要有活动,例如悬停切片
因此, MutationObserver 可用于覆盖样式
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>
1 回答
没有看到会改变所提及的图表元素的文本样式的选项
但图表的svg可以手动修改
但是,图表将恢复为默认样式,
只要有活动,例如悬停切片
因此,
MutationObserver
可用于覆盖样式请参阅以下工作代码段...