制作交互式 Angular 谷歌图表指令以集成气泡图答案

【问题标题】：Making interactive Angular google chart directive for integrating bubble chart制作交互式 Angular 谷歌图表指令以集成气泡图
【发布时间】：2016-05-01 09:45:45
【问题描述】：

您好，我正在尝试使用 angular-google-chart 指令版本 0.1.0 制作交互式谷歌图表（气泡图）。

图表渲染工作顺利，直到我想在点击图表中的任何气泡时触发外部事件。

我的 HTML

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

 $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

但它仍然没有给我正确的价值，尤其是在连续点击气泡时。

感谢任何帮助

【问题讨论】：

标签： javascript angularjs charts google-visualization

【解决方案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事件在最新版本中：

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

Demo (Codepen)

【讨论】：

感谢您的宝贵时间。我采用了您建议的代码并添加了一些附加逻辑，我的问题得到了解决。将我的代码放在这里

【解决方案2】：

示例链接和问题中div的定义存在一些差异...

从链接...

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

从问题（没有样式属性）...

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

为什么是custom-select？试试这样定义？

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

【讨论】：

控制台中什么都没有？您能否获得类似于您提供的链接的代码的工作示例？
是的 jsfiddle.net/s911131/sjh4wfe2/5 但在这里它只返回行号和列号，而且它也不定期在控制台中查看选定项目和选定项目。