如何獲得點擊chart.js之

事件我有條形圖和餅圖德魯使用Chart.js.I希望顯示彈出式窗口時，點擊具體的標題欄。如何獲得點擊chart.js之

實施例：

我有條形圖
一個。（標籤名稱：蘋果，草莓，香蕉，芒果，葡萄，Oragne）
我點擊幾個標籤的特定標籤
a。（點擊：蘋果，蘋果的總金額：7EA）
然後使用傳遞到參數的URL會出現，顯示有關裏面的蘋果更多的信息價值的彈出窗口。 a。（韓國蘋果：1EA，美國蘋果：3EA，蘋果中國：2EA，日本蘋果：1EA）

var ctx = document.getElementById("myChart").getContext('2d'); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
     labels: ["Apple", "Strawberry", "Banana", "Mango", "Grape", "Orange"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [7, 8, 3, 5, 2, 3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 0.2)', 
       'rgba(54, 162, 235, 0.2)', 
       'rgba(255, 206, 86, 0.2)', 
       'rgba(75, 192, 192, 0.2)', 
       'rgba(153, 102, 255, 0.2)', 
       'rgba(255, 159, 64, 0.2)' 
      ], 
      borderColor: [ 
       'rgba(255,99,132,1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)', 
       'rgba(75, 192, 192, 1)', 
       'rgba(153, 102, 255, 1)', 
       'rgba(255, 159, 64, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero: true 
       } 
      }] 
     } 
    } 
}); 

$(document).ready(function() { 
    $("#myChart").click(
    function (e) { 
      /* need programing code */ 
    }); 
});

來源

2017-08-04 ChangJu-Ahn

下面的代碼是條形圖中的標籤的訂單添加數據鑰匙在我的情況下，是theChart在你的情況下，它是myChart

datakeys: ["4", "3", "2", "1", "6"],

document.getElementById("chart_VulSev").onclick = function (evt) { 
        var activePoints = theChart.getElementAtEvent(evt); 
        var theElement = theChart.config.data.datasets[activePoints[0]._datasetIndex].data[activePoints[0]._index]; 
        //console.log(activePoints); 
        //console.log(theElement); 
        //console.log(theChart.config.data.datakeys[activePoints[0]._index]); 
        window.open("page.aspx?id=" + theChart.config.data.datakeys[activePoints[0]._index]); 
        //alert(theChart.config.data.datakeys[activePoints[0]._index]); 
        //console.log(theChart.config.type); 
       }

對於餅圖檢查這個片段

<html> 
 

 
<head> 
 
    <title>PieChart</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
 

 
    <script> 
 
    var data = { 
 
     datasets: [{ 
 
     data: [300, 50, 100, 200], 
 
     backgroundColor: [ 
 
      "#a02020", 
 
      "#ed1c24", 
 
      "#ff9900", 
 
      "#109618", 
 
     ] 
 
     }], 
 
     labels: [ 
 
     "Critical", 
 
     "High", 
 
     "Medium", 
 
     "Low" 
 
     ] 
 
    }; 
 

 
    $(document).ready(
 
     function() { 
 
     var canvas = document.getElementById("myChart"); 
 
     var ctx = canvas.getContext("2d"); 
 
     var myNewChart = new Chart(ctx, { 
 
      type: 'pie', 
 
      data: data 
 
     }); 
 

 
     canvas.onclick = function(evt) { 
 
      var activePoints = myNewChart.getElementsAtEvent(evt); 
 
      var chartData = activePoints[0]['_chart'].config.data; 
 
      var idx = activePoints[0]['_index']; 
 

 
      var label = chartData.labels[idx]; 
 
      var value = chartData.datasets[0].data[idx]; 
 

 
      var url = "http://example.com/?label=" + label + "&value=" + value; 
 
      console.log(url); 
 
      alert(url); 
 
     }; 
 
     } 
 
    ); 
 
    </script> 
 

 
</head> 
 

 
<body> 
 
    <div style="width: 320.750px; height: 156px"> 
 
    <canvas id="myChart"></canvas> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-08-04 06:44:28 Aamir

哇！謝謝您的回答。你完全告訴我我想做什麼。您的回答對我來說幫助很大。 –

沒問題！喜歡 – Aamir

HII阿米爾你能幫幫我嗎？ – Edit

如何獲得點擊chart.js之

回答

相關問題