Transparenter Hintergrund mit mehreren gestapelten google.charts.Bar,

Question

Ich muss mehrere gestapelte Balken/Säulendiagramm mit transparentem Hintergrund tun.

So kann transparenter Hintergrund erhalten wird ziemlich leicht über:

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

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

Dies funktioniert perfekt, wenn ich google.visualization API verwenden.

Was mehr ist, muss ich mehrere gestapelte Diagramm wie in jsfiddle tun.

Auch diese Arbeit perfekt, aber wir müssen google.charts API dort verwenden.

Wenn wir versuchen, backgroundColor: {fill: 'transparent'} zu gegebenen jfiddle hinzuzufügen, wird unser Hintergrund nicht 100% transparent sein - Diagrammbereich wird immer noch weiß sein.

Auf der anderen Seite können wir ein multistacked Diagramm in google.visulatization API wie erwähnt here nicht implementieren.

Also meine Frage ist:

Wie diese beiden Funktionen zu kombinieren? Was ist mehr ich rechten Achsen und ihre Ticks/Linien und neu skalieren, um es fit linke Achse

Answer 1

zusätzlich verstecken wollen - mit>backgroundColor: {fill: 'transparent'}

Sie können die Hintergrundfarbe des Diagrammbereichs ...

chartArea: { 
     backgroundColor: 'transparent' 
    } 

folgenden Arbeits Schnipsel sehen ...

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>

---

Anmerkung:

empfehlen loader.js mit der Bibliothek zu laden, statt jsapi

nach dem release notes ...

Die Version von Google Charts, die verfügbar bleibt über den jsapi Loader wird nicht mehr konsequent aktualisiert. Bitte verwenden Sie ab jetzt den neuen gstatischen Lader.

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

dies nur die load Anweisung

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

Sie können auch die callback in der load Anweisung ändern, wie in dem obigen Schnipsel ...