javascript - 更改组合图表(Google 图表)中填充区域的不透明度

Question

我正在研究 Google 图表的组合图(条形图 + 散点图)。我无法更改数据点的不透明度和条形内的填充区域。文档中没有提供太多信息，我尝试使用针对其他图表提到的方法来更改不透明度，但似乎没有任何效果。

这是我尝试处理的图表的链接- 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

您可以使用 'style' 列 Angular 色来更改不透明度，
看起来你有

但是，样式 Angular 色必须跟在您要应用样式的每个系列列之后

所以要使列不透明，请在第二列之后添加样式，
请参阅以下工作片段...

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>