[英]How do I prevent the legend to be cut off on angular-google-chart?
[英]when using Angular-google-chart directive, how do you access the selected item in the pie chart?
我正在使用angular-google-charts [bouil.github.io/angular-google-chart/]指令来创建饼图。
我可以使用它来触发一个方法
<div google-chart chart="myChart" style="{{cssStyle}}" on-select="seriesSelected()"></div>
$scope.seriesSelected = function () {
console.log('item selected');
}
但是,我无法弄清楚如何获取所选项目的密钥。 我可以看到在没有angular指令的情况下使用谷歌图表时如何做到这一点: 如何stackoverflow回答 。 但是,我无法遵循如何在使用角度时获取元素。 这家伙似乎有一个答案 (这里还有一个相当准确地显示我想要做的事情的傻瓜),但它似乎比我正在寻找的更复杂。
我可以在ng-google-chart.js指令中看到,有一行,它为所选项添加了一个属性:
var selectEventRetParams = {selectedItems:$scope.chartWrapper.getChart().getSelection()};
但我还不知道如何访问这个属性。 任何建议都非常感谢。
只需将html更改为以下内容即可
<div google-chart chart="myChart" style="{{cssStyle}}" agc-on-select="seriesSelected(selectedItem)"></div>
我也无法访问指令范围。 所以我在隔离范围中添加了一个新属性并将其设置为“=”。
HTML:
<div google-chart chart="chartObject" style="{{cssStyle}}" custom-select="handleSelect"></div>
修改指令范围:
scope: {
beforeDraw: '&',
chart: '=chart',
onReady: '&',
onSelect: '&',
select: '&',
customSelect: '='
},
将其添加到“select”侦听器:
if($attrs.customSelect){
$scope.customSelect(selectEventRetParams);
}
我的事件处理程序
$scope.handleSelect=function(selection){
console.log(selection);
};
差不多......回头看你的代码:
$scope.seriesSelected = function () { console.log('item selected'); }
应改为:
$scope.seriesSelected = function (selectedItem) { console.log('item selected'); console.log(selectedItem); }
为了获取指令传递的值。
更新:
这真是太过分了。 标记中使用的参数名称'selectedItem'必须匹配从指令的隔离范围传回的参数名称!
on-select="doThis(selectedItem)"
https://docs.angularjs.org/guide/directive确实提到它,我没有正确阅读。
“通常需要将数据从隔离范围通过表达式传递到父作用域,这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成。例如,hideDialog函数会显示一条消息来显示当对话框被隐藏时。这在指令中通过调用close({message:'closing for now'})来指定。然后局部变量消息将在on-close表达式中可用。“
原始问题:
@Sam - 你有没有得到这个工作? 我在angular-google-charts和我的代码中都设置了断点,我可以看到正在构造的有效selectedItem变量并传递到$ scope.onSelect({selectedItem:selectedItem}) -
google.visualization.events.addListener($scope.chartWrapper, 'select', function () {
var selectedItem = $scope.chartWrapper.getChart().getSelection()[0];
$scope.$apply(function () {
if ($attrs.select) {
console.log('Angular-Google-Chart: The \'select\' attribute is deprecated and will be removed in a future release. Please use \'onSelect\'.');
$scope.select({ selectedItem: selectedItem });
}
else{
$scope.onSelect({ selectedItem: selectedItem });
}
});
但是到达我的代码时, selItem参数是未定义的。
我的控制器代码:
$scope.doThis = function(selItem){
alert("a");
};
我的加价:
<div google-chart chart="chartObject" on-select="doThis(selItem)" style="{{cssStyle}}" ></div>
我已经尝试过Angular 1.2.x和1.4.1 - 两者都有相同的行为。
@ df1 - 我无法看到你的解决方案如何工作,因为你正在调用一个函数$ scope.customSelect(selectEventRetParams),但你的指令的隔离范围已声明customSelect要使用'='代替'&'表示/函数回调。
我希望改进我的答案并花更多时间研究别人的答案。 我有一个有效的解决方案,如下所示。 通过添加名为selectedItem的双向绑定来修改指令范围:
scope: {
beforeDraw: '&',
chart: '=chart',
onReady: '&',
onSelect: '&',
select: '&',
selectedItem: "="
}
然后我在指令中的函数如下:
google.visualization.events.addListener($scope.chartWrapper, 'select', function (type) {
var selectEventRetParams = { selectedItems: $scope.chartWrapper.getChart().getSelection() };
selectEventRetParams['selectedItem'] = selectEventRetParams['selectedItems'][0];
$scope.selectedItem = selectEventRetParams['selectedItem'].row;
$scope.select({ selectEventRetParams: selectEventRetParams });
}
然后,我在我自己的代码中有一个watch函数,它恰好也是一个带有它自己的控制器的指令,这段代码如下所示:
$scope.$watch('selectedItem', function (newValue) {
if (newValue != null) {
$scope.handleSelectedItem();
}
});
HTML看起来像这样:
<div google-chart chart="chartObject" style="{{cssStyle}}" sselected-item="selectedItem"></div>
我实际上使用了几个双向绑定,并使用它来多次点击饼图,潜入数据。 它工作得很好,但我需要稍微整理一下我的代码然后再回过头来。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.