charts - 谷歌图表中的半透明颜色？

Question

一个电话就像

chart.draw(data, { colors: ['#e0440e', '#e6693e', '#ec8f6e', ...], ... });

creates a chart with colors looking like semi-transparent .然而，我们传递了 RGB 颜色，没有 alpha 参数!

在其他图表应用程序(如 jqPlot、CanvasJS 等)中，您可能会通过 RGB 而是调用，例如

[ 'rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)', ...]

谷歌图表似乎不支持这一点。但是有没有其他方法可以通过简单的语法来传递 RGBA 自定义颜色？

PS:饼图有一个类似的问题，但我的不同，对于自定义调色板。

Answer 1

曾经的'ready'事件在图表上触发，您可以修改 svg

只需要一种方法来找到您要修改的图表元素

在以下工作片段中，随机颜色用于提供图表

那么当 'ready'火灾，找到这些颜色并替换为 rgba

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Y1', 'Y2'],
    ['2010', 10, 14],
    ['2020', 14, 22],
    ['2030', 16, 24],
    ['2040', 22, 30],
    ['2050', 28, 36]
  ]);

  var seriesColors = ['#00ffff', '#ff00ff'];
  var rgbaMap = {
    '#00ffff': 'rgba(0,255,0,0.5)',
    '#ff00ff': 'rgba(255,0,0,0.5)'
  };

  var options = {
    colors: seriesColors,
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(chartDiv);

  // modify svg
  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('rect'), function(rect) {
      if (seriesColors.indexOf(rect.getAttribute('fill')) > -1) {
        rect.setAttribute('fill', rgbaMap[rect.getAttribute('fill')]);
      }
    });
  });

  chart.draw(data, options);
}

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