角度图饼图数据点击事件

角度JS图表很棒，但我需要在我创建的饼图中实现点击事件..这里是编码..角度图饼图数据点击事件

这是JavaScript编码.. 。

$scope.pied = [{ 
 
      value: 4, 
 
      color: "#FF5A5E", 
 
      highlight: "#FF5A5E", 
 
      label: "Prospective" 
 
     }, { 
 
      value: 0, 
 
      color: "#46BFBD", 
 
      highlight: "#46BFBD", 
 
      label: "Pending" 
 
     }, { 
 
      value: 0, 
 
      color: "#FDB45C", 
 
      highlight: "#FDB45C", 
 
      label: "CallBacks" 
 
     }, { 
 
      value: 4, 
 
      color: "#e6e6fa", 
 
      highlight: "#e6e6fa", 
 
      label: "FollowUp" 
 
     }, { 
 
      value: 1, 
 
      color: "#cc5229", 
 
      highlight: "#cc5229", 
 
      label: "Not Interested" 
 
     }, { 
 
      value: 0, 
 
      color: "#556b2f", 
 
      highlight: "#556b2f", 
 
      label: "Close" 
 
     }] 
 

 
     var pieOptions = { 
 
      //Boolean - Whether we should show a stroke on each segment 
 
      segmentShowStroke: true, 
 

 
      //String - The colour of each segment stroke 
 
      segmentStrokeColor: "#fff", 
 

 
      //Number - The width of each segment stroke 
 
      segmentStrokeWidth: 2, 
 

 
      //Boolean - Whether we should animate the chart 
 
      animation: true, 
 

 
      //Number - Amount of animation steps 
 
      animationSteps: 100, 
 

 
      //String - Animation easing effect 
 
      animationEasing: "easeOutBounce", 
 

 
      //Boolean - Whether we animate the rotation of the Pie 
 
      animateRotate: true, 
 

 
      //Boolean - Whether we animate scaling the Pie from the centre 
 
      animateScale: false, 
 

 
      //Function - Will fire on animation completion. 
 
      onAnimationComplete: null 
 

 
     } 
 
     var ctx = document.getElementById("pieChart").getContext("2d"); 
 
     var myPieChart = new Chart(ctx).Pie($scope.pied, pieOptions); 
 
     ctx.onclick = function(evt){ 
 
     var activePoints = myPieChart.getPointsAtEvent(evt); 
 
     console.log("active: "+activePoints); 
 
     // => activePoints is an array of points on the canvas that are at the same position as the click event. 
 
    }; 
 
     document.getElementById('js-legend').innerHTML = myPieChart.generateLegend();

This is the HTML Coding.. 
 
<canvas id="pieChart" width="440" height="200" ></canvas> 
 
    <div id="js-legend" class="chart-legend"></div>

这是上述程序的图像..我已经写编码，当我点击随访必须与之相关的DATAS。但click事件不工作..？

请参阅上面的代码和图片，并引导我得到确切的输出我的期望。在此先感谢家伙...

来源

2016-02-26 Om Bala

我用角chart.js之，而不是这个chart.js之角JS文件是here。角度图比chart.js之点点容易..

感谢您的支持家伙.. :)

来源

2016-02-27 05:53:56

一点儿也不明白ü最终使用，通过使用角图表 – netalex

我是用图表尝试解决方法。 js得到被点击的内容，到那时我无法获取内容。所以，使用了angular-chart.js。我得到了预期的输出。 :) –

使用相同的代码？有趣的是，它比角度图 – netalex

角度图饼图数据点击事件

回答

相关问题