您好,我正在尝试使用 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
但它仍然没有给我正确的值,特别是在连续点击气泡时。
感谢任何帮助
最佳答案
我还没有发现任何证据表明 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);
};
从另一方面来说,我不得不提一下,您使用的不是最新版本的angular-google-chart
library 。
由于进行了一些更改,下面的示例演示了如何在最新版本中绑定(bind)select
事件:
<div google-chart chart="myChart" agc-on-select="seriesSelected(selectedItem)"></div>
关于javascript - 制作交互式 Angular 谷歌图表指令来集成气泡图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34986576/