2017-01-28 51 views
1

我想获取图表区域上onclick的x和y轴的值。至于现在我做:如何在单击Angular JS图表上获取x和y轴?

HTML:

<script data-require="[email protected]" src="http://code.angularjs.org/1.2.2/angular.js" data-semver="1.2.2"></script> 
<script data-require="[email protected]*" 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值,以便我可以将它添加到工具提示中,并使用该值调用其他方法。有人能告诉我如何获得点击值。点击时我试图打印控制台,只显示屏幕位置。

回答

0

使用此:

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

d将在该对象的datum点击。

+0

试过,但d有屏幕位置。 – user3407267

+0

@ user3407267,你是对的,我的道歉。你是否想要click的x,y位置被点击的x,y值? – Mark

相关问题