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'列角色来更改不透明度，
看来您拥有

但是，样式角色必须跟随您要对其应用样式的每个系列列

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

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

我遇到了同样的问题，并找到了一种更简单的方法来控制Google图表中条形图的不透明度。

我找到了一种简单的方法，希望为下一个来者贡献我的答案！

我们可以使用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>

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

2 个答案: