製作交互式Angular google圖表指令集成氣泡圖

Question

您好我正在使用angular-google-chart指令版本0.1.0製作交互式google圖表（氣泡圖）。

圖表渲染運行正常，直到我想通過點擊圖表中的任何氣泡來觸發外部事件。

我的HTML

<div google-chart chart="chartObject" style="{{cssStyle}}" custom-select="handleSelect"></div> 

JS

$scope.handleSelect=function(selection){ 
       console.log(selection); 
      }; 

      $scope.chartObject = {}; 
      $scope.chartObject.type = "BubbleChart"; 
      $scope.chartObject.displayed = true; 
      $scope.chartObject.data = { 
            "cols": [{ 
             "id": "xx", 
             "label": "xx", 
             "type": "xx", 
             "p": {} 
            }, { 
             "id": "xx", 
             "label": "xx", 
             "type": "number", 
             "p": {} 
            }, { 
             "id": "xx", 
             "label": "xxx", 
             "type": "number", 
             "p": {} 
            }, { 
             "id": "", 
             "label": "", 
             "type": "number", 
             "p": {} 
            }], 
            "rows": $scope.data 
           }; 
       $scope.chartObject.options = { 
              "chartArea": { 
               top: 10, 
               bottom: 0, 
               width: '82%', 
               height: '85%' 
              }, 
              "isStacked": "false", 
              "height": 280, 
              "fill": 1, 
              "displayExactValues": true, 
              "colorAxis": { 
               minValue: 0, 
               colors: ['#ff0000', '#ff5300', '#ff8900', '#ffb800', '#ffd600', '#ffe800', '#beee07', '#8edc0c', '#58ce34', '#22ac19'] 
              }, 
              "vAxis": { 
               "title": "Support Level", 
               "minValue": 0, 
               "maxValue": $scope.yaxis_value, 
               "viewWindowMode": "pretty", 
               "gridlines": { 
                "count": 5 
               }, 
               "gridlines.color": "#D3D3D3" 
              }, 

              "hAxis": { 
               "title": "No. Of Incident", 
               "maxValue": $scope.xaxis_value, 
               "gridlines": { 
                "count": 4 
               }, 
               "gridlines.color": "#D3D3D3" 
              }, 
             }; 
       $scope.chartObject.formatters = {}; 
      }); 

我的問題是，當我點擊任何氣泡圖怎麼弄，我通過圖表的確切行值或值。

參考鏈接我用： http://embed.plnkr.co/lOXTg5XRggwdctUedvfl/preview

但它仍然沒有給我正確的值，特別是對泡沫的連續點擊。

任何幫助表示讚賞

Answer 1

我還沒有找到任何證據表明ng-google-chart.js庫包含選擇實現的任何問題。

下面的例子演示瞭如何獲取所選值：

$scope.seriesSelected = function (selectedItem) { 

     var chartData = $scope.myChart.data; 
     var value = chartData.rows[selectedItem.row].c[selectedItem.column].v; //value 
     var formattedValue = chartData.rows[selectedItem.row].c[selectedItem.column].f; //formatted value 
     console.log(value + ":" + formattedValue); 
    }; 

Demo (Codepen)

從另一隻手，我不得不提到您正在使用不是最新版本的angular-google-chart library。

由於有一些已經作了修改，下面的例子演示瞭如何select事件在最新版本的BIND：

<div google-chart chart="myChart" agc-on-select="seriesSelected(selectedItem)"></div> 

Demo (Codepen)

Answer 2

裏有div從實例鏈接和問題的定義有些差異...

從鏈接...

<div google-chart chart="myChart" on-select="seriesSelected(selectedItem)"> 
</div> 

從問題（沒有樣式attr）...

<div google-chart chart="chartObject" custom-select="handleSelect"> 
</div> 

爲什麼custom-select？嘗試像這樣定義？

<div google-chart chart="chartObject" on-select="handleSelect(selection)"> 
</div>