Google Charts: Bubble Диаграммы позволяют выбор легенды

Я использую угловую директиву для Google диаграмм Как включить выбор легендыGoogle Charts: Bubble Диаграммы позволяют выбор легенды

т.е. Если я нажимаю на любой легенде о слева, он должен переключить данные легенды на графике

Когда я использовать обычный AreaChart или Linechart я получаю функцию

АРУ на-выбери = «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>

источник

2016-05-17 Alex

диаграмма Google рассмотреть элементы в первом ряду, за исключением 0 индекса, как легенды,

в случае пузырьковой диаграммы есть два типа легенд: один основан на цветовой вариации и другой как уникальное значение индекса 3 в вашем случае.

Но в обоих случаях обратный вызов на selectedItems не работает, поскольку он все еще рассматривает заголовки строк 0 как легенды, поэтому он не работает.

Попробуйте это:

Сделайте свою собственную легенду, вычисляя уникальным индексом 3 и маркировать

legend: { position: 'none' },

в настройках и использовать пользовательские легенды вместо этого, как вы получите у вас есть события.

источник

2016-05-24 06:40:01

Спасибо, что работает – Alex

Google Charts: Bubble Диаграммы позволяют выбор легенды

ответ

Смежные вопросы