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

【问题标题】：Semi-transparent colors in Google Charts?谷歌图表中的半透明颜色？
【发布时间】：2017-03-09 08:23:23
【问题描述】：

类似的电话

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

creates a chart with colors looking like semi-transparent。但是，我们传递了 RGB 颜色，没有 alpha 参数！

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

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

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

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

【问题讨论】：

我也想知道同样的事情，我相信唯一可能的方法是编写操作 SVG 的 JavaScript。
对于bar chars，您可以提供dataOpacity 记录的属性以设置所有系列的不透明度。没有记录的是它可以在每个系列的基础上在series: 元素内提供，然后它将控制单个系列中所有数据点的透明度。对于系列中的单个数据点，可以从{role: "style"} 数据列提供fill-opacity property。

标签： charts colors google-visualization alpha-transparency color-palette

【解决方案1】：

一旦'ready' 事件在图表上触发，您就可以修改 svg

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

在下面的工作 sn-p 中，随机颜色用于填充图表

然后当'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>

【讨论】：

很好的解决方案！为了使其更通用（也适用于饼图），我在 svg 标记中处理了所有带有 fill 属性的元素： jQuery 语法：$("svg").find("*[fill]").each( ...)。
也可以——仅供参考：使用 HEX 值来提供图表而不是颜色名称，例如 'red', 'black'——图表将更改 fill 值无论如何，十六进制等效项 ('#ff0000', '#000000') - 这可能导致查找失败...
我们应该始终使用十六进制的网页颜色值，或者在不透明度扩展时使用 rgba。我认为将其与颜色名称或 3 位符号（如 #fa0 中的 #ffaa00）混合在一起是不好的做法并且难以维护。其他一些重要说明：所有十六进制值都应该小写，否则代码将不起作用！这是因为 #FFAA00 等所有填充值都会自动转换为 #ffaa00。

【解决方案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>

【讨论】：