Question

我需要做透明背景的多个堆积条形/柱形图。

因此，透明背景可以通过以下方式轻松获得：

var data = //my data
var options = {
    backgroundColor: {fill: 'transparent'}
} 

var chart = new google.visualization.ColumnChart(document.getElementById('columnChart'));
chart.draw(data, options);

当我使用google.visualization API时，这非常有效。

我还需要在jsfiddle中执行多个堆叠图表。

这项工作再次完美，但我们需要在那里使用google.charts API。

当我们尝试将backgroundColor: {fill: 'transparent'}添加到给定的jsfiddle时，我们的背景不会是100％透明的 - 图表区域仍然是白色的。

另一方面，我们无法在google.visulatization API中实施多层图表here。

所以我的问题是：

如何结合这两个功能？更重要的是，我想要隐藏右轴及其刻度/线，并将其重新缩放以适合左轴

Answer 1

除了 - ＆gt; backgroundColor: {fill: 'transparent'}

您可以使用...

设置图表区域的背景颜色

    chartArea: {
      backgroundColor: 'transparent'
    }

请参阅以下工作代码段...

google.charts.load('current', {
    callback: drawStuff,
    packages:['bar']
});

function drawStuff() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn('number', 'Folgers Instant');
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn('number', 'Folgers Beans');
    data.addRows([
        ['2001', 321, 621, 816, 319],
        ['2002', 163, 231, 539, 594],
        ['2003', 125, 819, 123, 578],
        ['2004', 197, 536, 613, 298]
    ]);

    // Set chart options
    var options = {
        isStacked: true,
        width: 800,
        height: 600,
        chart: {
            title: 'Year-by-year coffee consumption',
            subtitle: 'This data is not real'
        },
        vAxis: {
            viewWindow: {
                min: 0,
                max: 1000
            }
        },
        series: {
            2: {
                targetAxisIndex: 1
            },
            3: {
                targetAxisIndex: 1
            }
        },
        backgroundColor: {fill: 'transparent'},
        chartArea: {
          backgroundColor: 'transparent'
        }
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div style="background-color: magenta;">
  <div id="chart_div"></div>
</div>

注意：

建议使用loader.js加载库，而不是jsapi

根据release notes ...

通过jsapi加载程序保留的Google Charts版本不再一致更新。从现在开始请使用新的gstatic装载机。

<script src="https://www.gstatic.com/charts/loader.js"></script>

这将仅更改load声明

google.charts.load('current', {packages:['bar']});

您还可以在callback语句中加入load，如上面的代码段所示......

透明背景与多个堆叠google.charts.Bar，

1 个答案: