Google 图表中的半透明颜色？

Question

像

这样的电话

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

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

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

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

Google Charts好像不支持这个。但是有没有其他方法可以通过简单的语法来传递 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>

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>

Google 图表中的半透明颜色？

Semi-transparent colors in Google Charts?

charts

colors

google-visualization

alpha-transparency

color-palette