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

问题描述

像

这样的调用

  chart.draw（data，{colors：['＃e0440e'，'＃e6693e'， '＃ec8f6e'，...]，...}）; 
  

创建颜色看起来像半透明的图表。然而，我们通过了RGB颜色，没有alpha参数！

在其他图表应用程序中（例如jqPlot，CanvasJS等），您可以通过 rgba 调用，就像在

  ['rgba（255,0,0,0.5）'，' Google图表似乎不支持rgba（0,255,0,0.5）'，...] 
  

这个。但是，有没有其他方式来传递RGBA自定义颜色，而只需一个简单的语法？

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

解决方案

一旦'ready'在图表中，您可以修改svg

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

在下面的工作片段中，随机颜色用于填充图表

然后当'ready' fires ，那些颜色被找到并被rgba替换

google.charts.load（ 'current'，{callback：drawChart，packages：['corechart']}）; function drawChart（）{var data = google.visualization.arrayToDataTable（[ ''年''，'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）; //修改svg google.visualization.events.addListener（图表'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>< / div>< / script> / pre>

A call like

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

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

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 does not seem to support this. But is there any other way to pass RGBA custom colors instead, with a simple syntax?

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

解决方案

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

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>

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