2016-05-17 40 views
1

我採用了棱角分明的指令爲谷歌圖表 如何啓用傳說選擇谷歌圖表:氣泡圖讓傳說選擇

即 如果我上留下任何圖例點擊,它應觸發圖表

上的圖例數據

當我使用正常AreaChart或應用於LineChart我得到一個函數

AGC-上選=「使用functionName(selectedItems)」,它返回我選擇的陣列。

但在BubbleChart的情況下,我什麼都沒有得到。

在此先感謝。

這裏是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> 

回答

0

谷歌圖表考慮在第一行中的元素除0索引作爲圖例,

在氣泡圖的情況下,有兩種類型的圖例,一種是基於顏色變化,另一種是您的情況下索引3的唯一值。

但是在這兩種情況下,selectedItems的回調都不起作用,因爲它仍然將0行標題視爲傳說,這就是爲什麼它不起作用。

試試這個:

通過計算唯一索引3 的讓自己的圖例和標記

legend: { position: 'none' },

期權

和使用自定義的傳說,而不是這樣你會得到你自己的事件。

+1

謝謝你的工作 – Alex