如何更改Google Area Chart重叠颜色或不透明度?

时间:2013-12-15 19:02:45

标签: javascript charts

关于Google Charts,有没有办法调整区域图表的两个或多个重叠区域之间的颜色或不透明度?我一直在尝试修改Area Chart开发网站上提供的Google示例代码。为方便起见,我提供了以下示例代码的副本。注意:如果没有官方支持的方式,我对任何肮脏的方法感兴趣。

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
      ['2013',  1000,      400],
      ['2014',  1170,      460],
      ['2015',  660,       1120],
      ['2016',  1030,      540]
    ]);

    var options = {
      title: 'Company Performance',
      hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
      vAxis: {minValue: 0}
    };

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

为了帮助澄清我希望实现的目标,请参阅下图。 enter image description here

1 个答案:

答案 0 :(得分:2)

您可以为series添加areaOpacity个选项:

...
vAxis: {minValue: 0},
series: {
    0: { areaOpacity: 0.2},
    1: { areaOpacity: 0.7}
}