谷歌折线图线条不透明度

Question

有没有办法改变谷歌折线图中线条的不透明度？

我正在使用以下代码：

function drawLineChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004', 1000, 400],
          ['2005', 1170, 460],
          ['2006', 660, 1120],
          ['2007', 1030, 540]
        ]);

        var options1 = {
            legend: { position: 'bottom', maxLines: 3 },
            trendlines: {
                1: {
                    type: 'linear',
                    color: 'green',
                    lineWidth: 10,
                    opacity: 0.3,
                    showR2: true,
                    visibleInLegend: true
                }
            },
            title: 'Company Performance'
        };

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

Answer 1

执行此操作的

方法是添加一个样式角色对象并指定所需的属性字符串，如下所示，这允许更好的方法，而无需处理样式表中的颜色：

function drawLineChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses', { "type": "string", "role": "style" }],
      ['2004', 1000, 400, "opacity: .3;"],
      ['2005', 1170, 460, "opacity: .3;"],
      ['2006', 660, 1120, "opacity: .3;"],
      ['2007', 1030, 540, "opacity: .3;"]
    ]);

    var options1 = {
        legend: { position: 'bottom', maxLines: 3 },
        trendlines: {
            1: {
                type: 'linear',
                color: 'green',
                lineWidth: 10,
                showR2: true,
                visibleInLegend: true
            }
        },
        title: 'Company Performance'
    };

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

Answer 2

在JSFiddle中尝试谷歌示例时遇到了同样的问题。使用开发人员工具，我能够识别简单的CSS来调整颜色（+不透明度）：

div#chart_div path:nth-child(1) {
   stroke:rgba(255, 0, 0, 0.3) !important;
}

div#chart_div 包含图表的元素。对于图表中的多条线，创建其他 CSS 规则并更改子编号，例如：

div#chart_div 路径：nth-child（2） { ... }，

div#chart_div 路径：nth-child（3） { ... }