角图圆形图数据点击事件

Question

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

这是JavaScript编码......

＆＃13;

＆＃13;

  $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();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13; 这是上述程序的图像..我写了编码，当我点击FollowUP它必须与它相关的数据..但点击事件不工作.. ??

请参阅上面的代码和图片，并指导我获得我期望的确切输出。先谢谢你们......

Answer 1

我使用 angular-chart.js 而不是 chart.js Angular JS文档是here。 Angular Chart比chart.js更容易..

感谢支持人员.. :)