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

Question

像这样的调用

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

创建一个看起来半透明的颜色图表。但是，我们传递的是RGB颜色，没有alpha参数！

在其他的图表应用程序（如jqPlot、CanvasJS等）中，您可以传递rgba调用，例如：

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

似乎Google Charts并不支持这种方式。但是否有其他方法可以使用简单的语法传递RGBA自定义颜色呢？

PS：有一个关于饼图的类似问题，但我的问题是针对自定义颜色调色板的。

- Cristian Scutaru

---

我也在想同样的事情，我相信唯一的可能是编写能够操作SVG的JavaScript代码。 - zer00ne

针对条形图，您可以提供dataOpacity属性，它被记录为设置所有系列的透明度。但未记录的是，它可以在series:元素内部按系列提供，然后它将控制单个系列中所有数据点的透明度。至于系列中的个别数据点，则可以从{role："style"}数据列中提供fill-opacity属性。 - GSerg

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>

- WhiteHat

---

很棒的解决方案！为了使它更通用（也适用于饼图），我处理了svg标签中所有带有fill属性的元素：jQuery语法：$("svg").find("*[fill]").each(...)。 - Cristian Scutaru

只是提醒一下，使用十六进制值来填充图表而不是颜色名称，例如“'red'，'black'”——图表将自动更改“fill”值为HEX等效值（“'#ff0000'，'#000000'”），这可能会导致查找失败... - WhiteHat

我们应该始终使用十六进制的Web颜色值或带有不透明度的RGBA。我认为混合颜色名称或三位数符号（如#fa0代表#ffaa00）是一种不好的做法，难以维护。另外一个重要的注意事项是：所有十六进制值都应该小写，否则代码将无法正常工作！这是因为所有填充值，例如#FFAA00，都会自动转换为#ffaa00。 - Cristian Scutaru

Answer 2

使用$.attr('opacity', value)来筛选所有颜色元素。例如，使用jQuery...

var options = {
  colors: ['#ff5722', '#1976D2', '#2196f3', '#BBDEFB', '#BDBDBD']
  },
  conteiner = $('div'),
  data = {},//some data
  chart = new
google.visualization.PieChart(conteiner);

google.visualization.events.addListener(chart, 'ready', function () {
    chartSetColorOpacity(conteiner, 0.8, options.colors);
});

google.visualization.events.addListener(chart, 'onmouseout', function () {
    chartSetColorOpacity(conteiner, 0.8, options.colors);
});

google.visualization.events.addListener(chart, 'onmouseover', function (target) {
    chartSetColorOpacity(conteiner, 0.8, options.colors);
});

google.visualization.events.addListener(chart, 'select', function (target) {
    chartSetColorOpacity(conteiner, 0.8, options.colors);
});

chart.draw(data, options);
        
function chartSetColorOpacity($container, opacity, matchColors){

    $container = $($container);

    if(!$container.is('svg')){
        $container = $container.find('svg');
    }

    if(typeof opacity === "number"){
        opacity = String(opacity);
    }else if(typeof opacity !== "string"){
        throw new Error('function chartSetColorOpacity(): opacity is not correct! opacity=' + opacity);
    }

    if(matchColors){
        if(typeof matchColors === "string") {
            matchColors = [matchColors];
        }
    }else {
        matchColors = false;
    }

    $container.find('*[fill]:not(opacity)').each(function(indx, element){

        var $this = $(this);

        if(matchColors !== false) {

            var matched = false,
                color = $this.attr('fill').toUpperCase();

            for (var i = matchColors.length - 1; i >= 0; i--) {
                if (matchColors[i].toUpperCase() == color) {
                    matched = true;
                    break;
                }
            }

            if (!matched) return;

        }

        $this.attr('opacity', opacity);

    });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

- Анатолий Ветринцев