GoogleチャートのPiechart領域のアルファ不透明度を設定する

Question

タイムラインデータのエリアチャートと、このような現在の配信データのPieChartを持っています どちらも同じ色です。エリアチャートの領域には透明性があり、ピエチャートはより明るく見えます。 パイチャート領域も軽量化するための設定はありますか？

PS：'areaOpacity': 10を設定することで明るいエリアチャートを作ることができますが、私は予想しているのがパイチャートです。それは

を引かれた後

Answer 1

アルファ不透明のための標準的なオプションは、円グラフ
のために存在するただし、手動で塗りつぶし属性を置き換え、その後
、チャートを描画するために、標準の六角色を使用し、チャートを変更することができます色を交換するために、同じ色

のRGBAバージョンでグラフ要素、
に、あなたは、チャートと対話するようMutationObserver
を使用する必要があります、要素があります
再描画/ ddedので、あなたは色に、これはまた

を発生するたびに交換する必要があり、あなたは小文字の進文字列を使用したいと思う、
彼らは時に小文字に変換されている要素
上の色を見つけるためにチャートは

...作業スニペット以下

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>

を参照してくださいに描かれています