javascript - Change opacity of fill area in combo chart (Google charts) - Stack Overflow

admin管理员组

文章数量:1427307

I was working on the bo 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);
  }

I was working on the bo 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);
  }

• javascript
• charts
• google-visualization

Share Improve this question Follow asked Sep 23, 2018 at 19:44 Prashanth PalaniswamyPrashanth Palaniswamy 35222 gold badges55 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>

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 e 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./charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>

本文标签： javascriptChange opacity of fill area in combo chart (Google charts)Stack Overflow