透明な背景に複数の積み重ねられたgoogle.charts.Bar、

Question

透明な背景を持つ複数の積み重ねられた棒グラフまたは縦棒グラフを実行する必要があります。

ので、透明な背景を経由して、かなり簡単に入手することができます：私はgoogle.visualization APIを使用する場合これは完璧に動作

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

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

。

これ以上jsfiddleのような複数の積み重ねられたチャートを実行する必要があります。

もう一度この作業は完璧ですが、そこでgoogle.charts APIを使用する必要があります。

与えられたjsfiddleにbackgroundColor: {fill: 'transparent'}を追加しようとすると、私たちの背景は100％透明になりません。グラフの領域はまだ白です。

一方、google.visulatization APIには、hereのようにマルチスタックチャートを実装することはできません。

だから私の質問は次のとおりです。

これら二つの機能を組み合わせるためにどのように？より多くの私は、右の軸とその目盛り/ラインを隠し、に加えて、左軸

Answer 1

に合わせて、それを再スケールしたいものである - >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>

---

注：

がrelease notes ...

に応じ代わりjsapi

の、ライブラリをロードするためにloader.jsを使用して、使用可能なまま、Googleのチャートのバージョンをお勧めしますjsapiローダーを介して、一貫して更新されなくなりました。新しい静的ローダーを今から使用してください。

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

これはだけで、あなたもcallbackload文の中で、上記のスニペットのように...

を含めることができload声明

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

を変更ます