更改组合图中填充区域的不透明度（谷歌图表）

Question

I was working on the combo chart (bar + scatter chart) of Google charts. I was not able to change the opacity of the data point and the fill area inside the bars. There was not much information provided in the documentation and I tried to change opacity using methods mentioned for other charts but nothing seemed to work.

Here is the link to the chart I was trying to work on- jsFiddle

google.charts.load('current', {
    'packages': ['corechart']
  });
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var sett = 'fill-color: #76A7FA; fill-opacity: 0.5; stroke-color: #76A7FA; stroke-width: 1;';
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Bolivia', 'Average', {
        role: 'style'
      }],
      ['2004/05', 450, 614.6, sett],
      ['2005/06', 288, 682, sett],
      ['2006/07', 397, 623, sett],
      ['2007/08', 215, 609.4, sett],
      ['2008/09', 366, 569.6, sett],
      ['2009/05', 450, 614.6, sett],
    ]);

    var options = {
      title: 'Monthly Coffee Production by Country',
      vAxis: {
        title: 'Cups'
      },
      hAxis: {
        title: 'Month'
      },
      legend: 'none',
      fillOpacity: 0.3,
      pointShape: {
        type: 'triangle',
        rotation: 180
      },
      pointSize: 7,
      series: {
        0: {
          type: 'bars',
          areaOpacity: 0.3
        },
        1: {
          type: 'scatter',
          opacity: 0.5,
          color: 'blue'
        }
      }
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

Answer 1

you can use a 'style' column role to change the opacity,
which it appears you have

however, the style role must follow each series column to which you want to apply the style

so to make the columns opaque, add the style following the second column,
see following working snippet...

 google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { // Some raw data (not necessarily accurate) var sett = 'fill-color: #76A7FA; fill-opacity: 0.5; stroke-color: #76A7FA; stroke-width: 1;'; var data = google.visualization.arrayToDataTable([ ['Month', 'Bolivia', {role: 'style'}, 'Average', {role: 'style'}], ['2004/05', 450, sett, 614.6, sett], ['2005/06', 288, sett, 682, sett], ['2006/07', 397, sett, 623, sett], ['2007/08', 215, sett, 609.4, sett], ['2008/09', 366, sett, 569.6, sett], ['2009/05', 450, sett, 614.6, sett], ]); var options = { title: 'Monthly Coffee Production by Country', vAxis: { title: 'Cups' }, hAxis: { title: 'Month' }, legend: 'none', fillOpacity: 0.3, pointShape: { type: 'triangle', rotation: 180 }, pointSize: 7, series: { 0: { type: 'bars', areaOpacity: 0.3 }, 1: { type: 'scatter', opacity: 0.5, color: 'blue' } } }; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options); }

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 100%; height: 500px;"></div>

Answer 2

I was facing the same issue and found an easier way to control the opacity of bar charts in Google Charts.

I found an easy way of doing this and want to contribute my answer for those who come next!

We can control the opacity of individual series (including bars) by using dataOpacity :

 google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var data = google.visualization.arrayToDataTable([ ['Month', 'Bolivia', 'Average'], ['2004/05', 450, 614.6], ['2005/06', 288, 682], ['2006/07', 397, 623], ['2007/08', 215, 609.4], ['2008/09', 366, 569.6], ['2009/05', 450, 614.6], ]); var options = { title: 'Monthly Coffee Production by Country', vAxis: { title: 'Cups' }, hAxis: { title: 'Month' }, legend: 'none', pointShape: { type: 'triangle', rotation: 180 }, pointSize: 7, series: { 0: { type: 'bars', dataOpacity: 0.3 }, 1: { type: 'scatter', color: 'blue', dataOpacity: 0.6 } } }; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options); }

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" style="width: 100%; height: 500px;"></div>