如何在单击Angular JS Charts上获取x和y轴?

时间:2017-01-28 01:39:19

标签: javascript angularjs d3.js charts nvd3.js

我正在尝试获取图表区域上的onclick的x和y轴值。至于现在我在做什么:

html:

<script data-require="angular.js@1.2.2" src="http://code.angularjs.org/1.2.2/angular.js" data-semver="1.2.2"></script>
<script data-require="d3@*" data-semver="3.3.11" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
<script type="text/javascript" src="https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.min.js"></script>

<div ac-chart="'area'" ac-data="barData" ac-config="config" id='chart2' class='chart'  style="width: 100%"></div>

JS:

$scope.config = {
                        title: 'Customer Distribution',
                        tooltips: true,
                        labels: false,
                        mouseover: function () {
                        },
                        mouseout: function () {
                        },
                        click: function (d) {
                            console.log(d);
                            console.log(angular.toJson(d));
                        },
                        isAnimate: true,
                        waitForHeightAndWidth: false,
                        legend: {
                            display: true,
                            //could be 'left, right'
                            position: 'right',
                            htmlEnabled: false

                        }
                    };


                    var sin = [];

                    if (angular.equals(bin, "UNIT")) {
                        angular.forEach(data, function (item) {
                            var y = [];
                            y.push(item.customerListSize);
                            sin.push({x: item.value, y: y});
                        });
                    } else {
                        angular.forEach(data, function (item) {
                            var y = [];
                            y.push(item.totalBinSize);
                            sin.push({x: item.binName, y: y});
                        });
                    }

                    $scope.barData = {
                        series: [featureType],
                        data: sin
                    };

图表显示正常,但我想在点击时添加一些功能?我需要在单击时获取图表的x和y值,以便我可以将其添加到工具提示中,并使用该值调用其他方法。有人可以告诉我如何获得点击的值。我点击它时尝试打印控制台只显示屏幕位置。

1 个答案:

答案 0 :(得分:0)

使用此:

click: function(d) {
  console.log(d);
},

d将点击对象的datum