制作交互式角度谷歌图指令集成气泡图
制作交互式角度谷歌图指令集成气泡图
提问于 2016-01-25 06:45:46
嗨，我正在尝试使用角-谷歌图指令版本0.1.0制作交互式谷歌图表(气泡图)。
图表呈现正在顺利进行，直到我希望在单击图表中的任何气泡时触发外部事件。
我的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
但它仍然没有给我正确的价值，特别是在连续点击泡沫时。
任何帮助都是非常感谢的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-01-25 22:31:05
我没有发现任何证据表明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)
另一方面，我必须指出，您使用的是，而不是最新的版本的 library。
由于已经做了一些更改，下面的示例演示如何将select事件绑定到最新版本的中
<div google-chart chart="myChart" agc-on-select="seriesSelected(selectedItem)"></div>Demo (Codepen)
Stack Overflow用户
发布于 2016-01-25 13:23:06
在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34986576
复制相关文章
相似问题
腾讯云开发者
