Google折线图线不透明度

Question

有什么方法可以更改Google折线图中的折线不透明度吗？

我正在使用以下代码：

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);
}