Question

有没有办法在Google Line Chart中更改该行的不透明度？

我使用以下代码：

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中尝试使用Google样本时遇到同样的问题。使用Developer工具，我能够识别简单的CSS来调整颜色（+不透明度）：

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

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

div＃chart_div path：nth-child（2）{...}，

div＃chart_div path：nth-child（3）{...}

Google折线图线不透明度

2 个答案: