Google Charts: Bubble-Charts ermöglichen Legende Auswahl

Question

I Winkel Richtlinie verwende für Google Charts Wie aktiviere ich die Legende Auswahl

dh Wenn ich auf der linken Seite auf jeder Legende klicken, sollte es Legende Daten auf dem Chart

wechseln

Wenn ich einen normalen oder Areachart Linechart verwenden erhalte ich eine Funktion

agc-on-select = „functionName- (selectedItems)“, die mir das Array der Auswahl zurück.

Aber im Falle von BubbleChart bekomme ich nichts.

Vielen Dank im Voraus.

Hier ist FIDDLE demo example

Javascript

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

    function drawSeriesChart() { 

     var data = google.visualization.arrayToDataTable([ 
     ['ID', 'Provider Bid', 'DFP Base', 'Provider',  'Revenue'], 
    ['0', 0.0, 0.0, 'Unknown', 26.5], 
    ['2', 0.0, 0.0, 'Legend 1', 12.88], 
    ['4', 0.0, 0.0, 'Legend 2', 105.55], 
    ['11', 0.0, 0.0, 'Legend 3', 441.05], 
    ['19', 0.0, 0.0, 'Legend 4', 213.55], 
    ['2', 0.0, 0.0, 'Legend 1', 1.65], 
    ['19', 0.0, 0.0, 'Legend 4', 2.64], 
    ['0', 0.8, 0.3, 'Unknown', 110], 
    ['2', 0.8, 0.0, 'Legend 1', 131.6], 
    ['4', 0.8, 0.0, 'Legend 2', 637.68], 
    ['11', 0.8, 0.0, 'Legend 3', 1975.16], 
    ['19', 0.8, 0.0, 'Legend 4', 985.48], 
    ['2', 0.8, 0.0, 'Legend 1', 391.37], 
    ['4', 0.8, 0.0, 'Legend 2', 299.45], 
    ['11', 0.8, 0.0, 'Legend 3', 1969.2], 
    ['19', 0.8, 0.0, 'Legend 4', 3140.41], 
    ['0', 1.3, 0.3, 'Unknown', 22.75], 
    ['2', 1.3, 0.0, 'Legend 1', 37.25], 
    ['4', 1.3, 0.0, 'Legend 2', 70.97], 
    ['11', 1.3, 0.0, 'Legend 3', 138.18], 
    ['19', 1.3, 0.0, 'Legend 4', 101.75], 
    ['2', 1.3, 0.0, 'Legend 1', 426.32], 
    ['4', 1.3, 0.0, 'Legend 2', 82.44], 
    ['11', 1.3, 0.0, 'Legend 3', 1470.45], 
    ['19', 1.3, 0.0, 'Legend 4', 1193.6], 
    ['2', 1.3, 0.0, 'Legend 1', 446.49], 
    ['4', 1.3, 0.0, 'Legend 2', 16.14], 
    ['11', 1.3, 0.0, 'Legend 3', 1800.23], 
    ['19', 1.3, 0.0, 'Legend 4', 425.57], 
    ['0', 1.8, 0.3, 'Unknown', 18.25], 
    ['2', 1.8, 0.0, 'Legend 1', 26.57], 
    ['4', 1.8, 0.0, 'Legend 2', 53.84], 
    ['11', 1.8, 0.0, 'Legend 3', 115.13], 
    ['19', 1.8, 0.0, 'Legend 4', 76.38], 
    ['2', 1.8, 0.0, 'Legend 1', 264.38], 
    ['4', 1.8, 0.0, 'Legend 2', 79.57], 
    ['11', 1.8, 0.0, 'Legend 3', 834.74], 
    ['19', 1.8, 0.0, 'Legend 4', 734.89], 
    ['2', 1.8, 0.0, 'Legend 1', 744.86], 
    ['4', 1.8, 0.0, 'Legend 2', 25.41], 
    ['11', 1.8, 0.0, 'Legend 3', 2493.54], 
    ['19', 1.8, 0.0, 'Legend 4', 929.74], 
    ['2', 1.8, 0.0, 'Legend 1', 778.59], 
    ['4', 1.8, 0.0, 'Legend 2', 20.85], 
    ['11', 1.8, 0.0, 'Legend 3', 2660.98], 
    ['19', 1.8, 0.0, 'Legend 4', 463.41], 
    ['0', 10.3, 0.3, 'Unknown', 0.5], 
    ['4', 10.3, 0.0, 'Legend 2', 0.74], 
    ['2', 10.3, 0.0, 'Legend 1', 1.54], 
    ['4', 10.3, 0.0, 'Legend 2', 2.77], 
    ['11', 10.3, 0.0, 'Legend 3', 4.17], 
    ['19', 10.3, 0.0, 'Legend 4', 9.71], 
    ['2', 10.3, 0.0, 'Legend 1', 3.99], 
    ['4', 10.3, 0.0, 'Legend 2', 1.19], 
    ['11', 10.3, 0.0, 'Legend 3', 14.1], 
    ['19', 10.3, 0.0, 'Legend 4', 2.47], 
    ['11', 10.3, 0.0, 'Legend 3', 20.2], 
    ['19', 10.3, 0.0, 'Legend 4', 5.5], 
    ['11', 10.3, 0.0, 'Legend 3', 10.05], 
    ['2', 10.3, 0.0, 'Legend 1', 9.01], 
    ['11', 10.3, 0.0, 'Legend 3', 30.42], 
    ['19', 10.3, 0.0, 'Legend 4', 6.8], 
    ['2', 10.3, 0.0, 'Legend 1', 14.21], 
    ['11', 10.3, 0.0, 'Legend 3', 24.63], 
    ['19', 10.3, 0.0, 'Legend 4', 5.24], 
    ['2', 10.3, 0.0, 'Legend 1', 3.2], 
    ['11', 10.3, 0.0, 'Legend 3', 25.85], 
    ['19', 10.3, 0.0, 'Legend 4', 10.09], 
    ['2', 10.3, 0.0, 'Legend 1', 10.92], 
    ['11', 10.3, 0.0, 'Legend 3', 19.16], 
    ['19', 10.3, 0.0, 'Legend 4', 17.82], 
    ['2', 10.3, 0.0, 'Legend 1', 8.58], 
    ['11', 10.3, 0.0, 'Legend 3', 21.26], 
    ['19', 10.3, 0.0, 'Legend 4', 12.73], 
    ['2', 10.3, 0.0, 'Legend 1', 19.47], 
    ['11', 10.3, 0.0, 'Legend 3', 37.55], 
    ['19', 10.3, 0.0, 'Legend 4', 23.48], 
    ['2', 10.3, 0.0, 'Legend 1', 5.39], 
    ['11', 10.3, 0.0, 'Legend 3', 31.77], 
    ['19', 10.3, 0.0, 'Legend 4', 20.96], 
    ['11', 10.3, 0.0, 'Legend 3', 39.84], 
    ['19', 10.3, 0.0, 'Legend 4', 124.56], 
    ['11', 10.3, 0.0, 'Legend 3', 62.18], 
    ['11', 10.3, 0.0, 'Legend 3', 82.21], 
    ['11', 10.3, 0.0, 'Legend 3', 28.54], 
    ['19', 10.3, 0.0, 'Legend 4', 7.49], 
    ['11', 10.3, 0.0, 'Legend 3', 22.94], 
    ['19', 10.3, 0.0, 'Legend 4', 7.88], 
    ['11', 10.3, 0.0, 'Legend 3', 33.04], 
    ['11', 10.3, 0.0, 'Legend 3', 53.06], 
    ['11', 10.3, 0.0, 'Legend 3', 64.68], 
    ['11', 10.3, 0.0, 'Legend 3', 48.49], 
    ['2', 10.8, 0.8, 'Legend 1', 0.97], 
    ['4', 10.8, 0.0, 'Legend 2', 1.32], 
    ['11', 10.8, 0.0, 'Legend 3', 0.63], 
    ['19', 10.8, 0.0, 'Legend 4', 0.69], 
    ['2', 10.8, 0.0, 'Legend 1', 2.15], 
    ['11', 10.8, 0.0, 'Legend 3', 6.16], 
    ['11', 10.8, 0.0, 'Legend 3', 14.18], 
    ['2', 10.8, 0.0, 'Legend 1', 9.1], 
    ['11', 10.8, 0.0, 'Legend 3', 9.31], 
    ['19', 10.8, 0.0, 'Legend 4', 2.09], 
    ['2', 10.8, 0.0, 'Legend 1', 11.24], 
    ['11', 10.8, 0.0, 'Legend 3', 7.94], 
    ['19', 10.8, 0.0, 'Legend 4', 2.87], 
    ['2', 10.8, 0.0, 'Legend 1', 3.2], 
    ['11', 10.8, 0.0, 'Legend 3', 16.22], 
    ['19', 10.8, 0.0, 'Legend 4', 9.62], 
    ['4', 10.8, 0.0, 'Legend 2', 3.64], 
    ['11', 10.8, 0.0, 'Legend 3', 3.73], 
    ['2', 10.8, 0.0, 'Legend 1', 16.96], 
    ['19', 10.8, 0.0, 'Legend 4', 12.15], 
    ['11', 10.8, 0.0, 'Legend 3', 23.03], 
    ['2', 10.8, 0.0, 'Legend 1', 5.42], 
    ['11', 10.8, 0.0, 'Legend 3', 15.92], 
    ['11', 10.8, 0.0, 'Legend 3', 5.68], 
    ['19', 10.8, 0.0, 'Legend 4', 47.15], 
    ['11', 10.8, 0.0, 'Legend 3', 18.95], 
    ['11', 10.8, 0.0, 'Legend 3', 13.44], 
    ['11', 10.8, 0.0, 'Legend 3', 21.72], 
    ['11', 10.8, 0.0, 'Legend 3', 15.4], 
    ['11', 10.8, 0.0, 'Legend 3', 8.24], 
    ['19', 10.8, 0.0, 'Legend 4', 8.29], 
    ['11', 10.8, 0.0, 'Legend 3', 69.44], 
    ['11', 10.8, 0.0, 'Legend 3', 18.34], 
    ['11', 10.8, 0.0, 'Legend 3', 19.47], 
    ['4', 11.3, 0.3, 'Legend 2', 0.48], 
    ['2', 11.3, 0.8, 'Legend 1', 3.22], 
    ['4', 11.3, 0.8, 'Legend 2', 2.14], 
    ['11', 11.3, 0.8, 'Legend 3', 9.46], 
    ['19', 11.3, 0.8, 'Legend 4', 5.78], 
    ['2', 11.3, 0.8, 'Legend 1', 6.77], 
    ['11', 11.3, 0.8, 'Legend 3', 18.53], 
    ['19', 11.3, 0.8, 'Legend 4', 2.39], 
    ['2', 11.3, 0.8, 'Legend 1', 3.84], 
    ['11', 11.3, 0.8, 'Legend 3', 30.97], 
    ['19', 9.3, 0.3, 'Legend 4', 14.15], 
    ['2', 9.3, 0.3, 'Legend 1', 8.67], 
    ['11', 9.3, 0.3, 'Legend 3', 52.32], 
    ['19', 9.3, 0.3, 'Legend 4', 5.11], 
]); 

     var options = { 
     title: 'test', 
     hAxis: {title: 'X Axis'}, 
     vAxis: {title: 'y Axis'}, 
     bubble: {textStyle: {fontSize: 11}} 
     }; 

     var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div')); 
     chart.draw(data, options); 
    } 

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <div id="series_chart_div" style="width: 900px; height: 500px;"></div> 

Answer 1

Google Chart betrachten die Elemente in der ersten Reihe außer 0-Index als die Legenden,

im Fall von Blasendiagramm gibt es zwei Arten von Legenden eine basiert auf Farbvariation und andere als eindeutiger Wert von Index 3 in Ihrem Fall.

Aber in beiden Fällen funktioniert der Rückruf auf selectedItems nicht, da es immer noch die Zeilen 0 Überschriften als Legenden betrachtet, deshalb funktioniert es nicht.

Try this:

Ihre eigene Legende machen, indem der Index 3 eindeutige Berechnung und

legend: { position: 'none' },

in Optionen markieren und benutzerdefinierte Legenden verwenden, anstatt diese Weise werden Sie Sie Ereignisse besitzen bekommen.