Couleurs semi-transparentes dans Google Charts?

Question

Un appel comme

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

creates a chart with colors looking like semi-transparent. Cependant, nous avons passé les couleurs RVB, sans paramètre alpha!

Dans d'autres applications graphiques (comme jqPlot, CanvasJS etc.) vous pouvez passer rgba appels à la place, comme dans

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

Google Charts ne semble pas à l'appui. Mais existe-t-il un autre moyen de passer des couleurs personnalisées RGBA avec une syntaxe simple? PS: il ya une question quelque peu similaire pour les camemberts, mais la mienne est différente, pour les palettes de couleurs personnalisées.

Answer 1

une fois l'événement se déclenche 'ready' sur le graphique, vous pouvez modifier le svg

juste besoin d'un moyen de trouver les éléments graphiques que vous souhaitez modifier

dans l'extrait de travail suivant, les couleurs aléatoires sont utilisés pour alimenter le tableau

puis quand 'ready' les feux, les couleurs sont trouvés et remplacés par 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

Utilisez $ .attr ('opacité', valeur) pour tous les éléments filtrés par des couleurs. exapmle avec 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>