谷歌图表中的半透明颜色? [英] Semi-transparent colors in Google Charts?

问题描述

类似的调用

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

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

creates a chart with colors looking like semi-transparent. However, we passed RGB colors, with no alpha parameter!

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

In other chart apps (like jqPlot, CanvasJS etc) you may pass rgba calls instead, like in

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

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

Google Charts does not seem to support this. But is there any other way to pass RGBA custom colors instead, with a simple syntax?

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

PS: there is a somehow similar question for pie charts, but mine is different, for custom color palettes.

推荐答案

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

once the 'ready' event fires on the chart, you can modify the svg

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

just need a way to find the chart elements you want to modify

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

in the following working snippet, random colors are used to feed the chart

然后当 'ready' 触发时，这些颜色被找到并替换为 rgba

then when 'ready' fires, those colors are found and replaced with 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>

这篇关于谷歌图表中的半透明颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！