角度圖餅圖數據點擊事件

角度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

角度圖餅圖數據點擊事件

回答

相關問題