在Google图表上设置分段区域的α不透明度

Question

我有时间线数据的区域图和当前分布数据的PieChart图，如下所示

都有相同的颜色。区域图的面积有一些透明度和零碎看起来更亮。是否有任何配置使零碎区域也更轻？

PS:我可以通过设置'areaOpacity': 10使面积图变得更亮，但我的期望是使零碎更轻。

Answer 1

饼图中不存在alpha不透明度的标准选项。

但是，一旦图表绘制完毕，您可以手动修改它。

使用标准的六角色绘制图表，

然后替换图表元素的fill属性，

使用相同颜色的rgba版本。

为了替换颜色，您需要使用MutationObserver

当您与图表交互时，元素将被添加/重新绘制。

因此，每次发生这种情况时，都必须替换颜色。

另外，您还需要使用小写十六进制字符串，

为了在元素上找到颜色

在绘制图表时，它们被转换为小写。

看下面的工作片段..。

​

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>

​