Google 图表：气泡图启用图例选择

Question

我正在为 google 图表使用 angular 指令我如何启用图例 selection

即如果我单击左侧的任何图例，它应该会切换图表上的图例数据

当我使用普通的 AreaChart 或 LineChart 时，我得到一个函数

agc-on-select="functionName(selectedItems)" 其中 returns 我是 selection 的数组。

但在 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>

Answer 1

Google图表将第一行除索引0以外的元素作为图例，

在气泡图的情况下，有两种类型的图例，一种是基于颜色变化，另一种是在您的情况下作为索引 3 的唯一值。

但在这两种情况下，selectedItems 上的回调都不起作用，因为它仍在将第 0 行标题视为图例，这就是它不起作用的原因。

试试这个：

通过计算索引 3 的唯一性来制作您自己的图例并标记

legend: { position: 'none' },

在选项中使用自定义图例，这样您将获得自己的事件。

Google 图表：气泡图启用图例选择

Google Charts: Bubble Charts enable legend selection

charts

bubble-chart

legend

google-visualization

angularjs