在Google图表上为Piechart区域设置Alpha不透明度

Question

I am having Area chart for timeline data and PieChart for current distribution data like this Both having the same set of colors. Area chart's area has some transparency and the Piechart look brighter. Is there any configuration to make Piechart area also be lighter?

PS: I can make Area chart brighter by setting 'areaOpacity': 10 but my expectation is to make piechart lighter.

Answer 1

no standard options for alpha opacity exist for the pie chart
however, you can manually modify the chart, once it has drawn

use standard hex colors to draw the chart,
then replace the fill attribute on the chart elements,
with an rgba version of the same color

in order to replace the colors, you will need to use a MutationObserver
as you interact with the chart, elements are added / redrawn
so you must replace the color every time this occurs

also, you'll want to use lowercase hex strings,
in order to find the color on an element
they are converted to lowercase when the chart is drawn

see following working snippet...

 google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 16], ['Eat', 2], ['Sleep', 6] ]); colorsHex = [ '#922b21', '#1e8449', '#007fff' ]; colorsRgba = [ 'rgba(146,43,33,0.6)', 'rgba(30,132,73,0.6)', 'rgba(0,127,255,0.6)' ]; var options = { colors: colorsHex, height: 400, title: 'My Daily Activities' }; var container = document.getElementById('chart_div'); var chart = new google.visualization.PieChart(container); var observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { mutation.addedNodes.forEach(function (node) { changeColor(node); }); }); }); observer.observe(container, { childList: true, subtree: true }); chart.draw(data, options); function changeColor(element) { if (element.getAttribute('fill') !== null) { var colorIndex = colorsHex.indexOf(element.getAttribute('fill')); if (colorIndex > -1) { element.setAttribute('fill', colorsRgba[colorIndex]); } } else { Array.prototype.forEach.call(element.children, function(child) { changeColor(child); }); } } }); 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>