blocks|key|746024|text|更新：作为@+Shetty注释，getSegmentsAtEvent(event)只适用于1.x和2.x+getElementsAtEvent。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|746025|.getElementsAtEvent(e)
查找事件点下的元素，然后以相同的数据索引返回所有元素。这是内部用于“标签”模式高亮显示。
调用图表实例上的getElementsAtEvent(event)传递事件或jQuery事件的参数，将返回位于该事件相同位置的point元素。
canvas.onclick+=+function(evt){+var+activePoints+=+myLineChart.getElementsAtEvent(evt)；//+=>+activePoints是画布上与单击事件位于相同位置的点的数组。}；|blockquote|746026|示例：https://jsfiddle.net/u1szh96g/208/|746027|原始答案(对Chart.js+1.x版本有效)：|746028|您可以使用getSegmentsAtEvent(event)实现这一点。|746029|调用图表实例上的getSegmentsAtEvent(event)传递事件或jQuery事件的参数，将返回位于该事件相同位置的段元素。|746030|来自：原型方法|746031|所以你可以：|746032|$("#myChart").click(+
++++function(evt){
++++++++var+activePoints+=+myNewChart.getSegmentsAtEvent(evt);+++++++++++
++++++++/*+do+something+*/
++++}
);++|code-block|syntax|javascript|746033|下面是一个完整的工作示例：|746034|<html>
++++<head>
++++++++<script+type="text/javascript"+src="http://code.jquery.com/jquery-2.0.2.js"></script>
++++++++<script+type="text/javascript"+src="Chart.js"></script>
++++++++<script+type="text/javascript">
++++++++++++var+data+=+[
++++++++++++++++{
++++++++++++++++++++value:+300,
++++++++++++++++++++color:"#F7464A",
++++++++++++++++++++highlight:+"#FF5A5E",
++++++++++++++++++++label:+"Red"
++++++++++++++++},
++++++++++++++++{
++++++++++++++++++++value:+50,
++++++++++++++++++++color:+"#46BFBD",
++++++++++++++++++++highlight:+"#5AD3D1",
++++++++++++++++++++label:+"Green"
++++++++++++++++},
++++++++++++++++{
++++++++++++++++++++value:+100,
++++++++++++++++++++color:+"#FDB45C",
++++++++++++++++++++highlight:+"#FFC870",
++++++++++++++++++++label:+"Yellow"
++++++++++++++++}
++++++++++++];

++++++++++++$(document).ready(+
++++++++++++++++function+()+{
++++++++++++++++++++var+ctx+=+document.getElementById("myChart").getContext("2d");
++++++++++++++++++++var+myNewChart+=+new+Chart(ctx).Pie(data);

++++++++++++++++++++$("#myChart").click(+
++++++++++++++++++++++++function(evt){
++++++++++++++++++++++++++++var+activePoints+=+myNewChart.getSegmentsAtEvent(evt);
++++++++++++++++++++++++++++var+url+=+"http://example.com/?label="+%2B+activePoints[0].label+%2B+"&value="+%2B+activePoints[0].value;
++++++++++++++++++++++++++++alert(url);
++++++++++++++++++++++++}
++++++++++++++++++++);++++++++++++++++++
++++++++++++++++}
++++++++++++);
++++++++</script>
++++</head>
++++<body>
++++++++<canvas+id="myChart"+width="400"+height="400"></canvas>
++++</body>
</html>|746035|entityMap|0|LINK|mutability|MUTABLE|url|https://www.chartjs.org/docs/latest/developers/api.html#getelementsatevente|1|https://jsfiddle.net/u1szh96g/208/|2|http://www.chartjs.org/docs/#doughnut-pie-chart-prototype-methods^0|0|3|G|P|1H|I|1H|I|0|0|0|M|24|P|0|3|Y|1|0|0|5|P|0|8|P|0|3|4|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@$9|1H|A|1I|B|C]|$9|1J|A|1K|B|D]|$9|1L|A|1M|B|D]]|E|@$9|1N|A|1O|1|1P]]|F|$]]|$1|G|3|H|5|I|7|1Q|8|@$9|1R|A|1S|B|C]|$9|1T|A|1U|B|D]]|E|@]|F|$]]|$1|J|3|K|5|6|7|1V|8|@]|E|@$9|1W|A|1X|1|1Y]]|F|$]]|$1|L|3|M|5|6|7|1Z|8|@]|E|@]|F|$]]|$1|N|3|O|5|6|7|20|8|@$9|21|A|22|B|D]]|E|@]|F|$]]|$1|P|3|Q|5|I|7|23|8|@$9|24|A|25|B|D]]|E|@]|F|$]]|$1|R|3|S|5|6|7|26|8|@]|E|@$9|27|A|28|1|29]]|F|$]]|$1|T|3|U|5|6|7|2A|8|@]|E|@]|F|$]]|$1|V|3|W|5|X|7|2B|8|@]|E|@]|F|$Y|Z]]|$1|10|3|11|5|6|7|2C|8|@]|E|@]|F|$]]|$1|12|3|13|5|X|7|2D|8|@]|E|@]|F|$Y|Z]]|$1|14|3|-4|5|6|7|2E|8|@]|E|@]|F|$]]]|15|$16|$5|17|18|19|F|$1A|1B]]|1C|$5|17|18|19|F|$1A|1D]]|1E|$5|17|18|19|F|$1A|1F]]]]

Update: As @Soham Shetty comments, <code>getSegmentsAtEvent(event)</code> only works for 1.x and for 2.x <a href="https://www.chartjs.org/docs/latest/developers/api.html#getelementsatevente" rel="noreferrer"><code>getElementsAtEvent</code></a> should be used.

<blockquote>
 .getElementsAtEvent(e)
 
 Looks for the element under the event point, then returns all elements
 at the same data index. This is used internally for 'label' mode
 highlighting.
 
 Calling <code>getElementsAtEvent(event)</code> on your Chart instance passing an
 argument of an event, or jQuery event, will return the point elements
 that are at that the same position of that event.

<pre><code>canvas.onclick = function(evt){
 var activePoints = myLineChart.getElementsAtEvent(evt);
 // =&gt; activePoints is an array of points on the canvas that are at the same position as the click event.
};
</code></pre>
</blockquote>

Example: <a href="https://jsfiddle.net/u1szh96g/208/" rel="noreferrer">https://jsfiddle.net/u1szh96g/208/</a>

<hr>

Original answer (valid for Chart.js 1.x version):

You can achieve this using <code>getSegmentsAtEvent(event)</code> 

<blockquote>
 Calling <code>getSegmentsAtEvent(event)</code> on your Chart instance passing an
 argument of an event, or jQuery event, will return the segment
 elements that are at that the same position of that event.
</blockquote>

From: <a href="http://www.chartjs.org/docs/#doughnut-pie-chart-prototype-methods" rel="noreferrer">Prototype Methods</a>

So you can do:

<pre><code>$("#myChart").click( 
 function(evt){
 var activePoints = myNewChart.getSegmentsAtEvent(evt); 
 /* do something */
 }
); 
</code></pre>

Here is a full working example:

<pre><code>&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="Chart.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript"&gt;
 var data = [
 {
 value: 300,
 color:"#F7464A",
 highlight: "#FF5A5E",
 label: "Red"
 },
 {
 value: 50,
 color: "#46BFBD",
 highlight: "#5AD3D1",
 label: "Green"
 },
 {
 value: 100,
 color: "#FDB45C",
 highlight: "#FFC870",
 label: "Yellow"
 }
 ];

 $(document).ready( 
 function () {
 var ctx = document.getElementById("myChart").getContext("2d");
 var myNewChart = new Chart(ctx).Pie(data);

 $("#myChart").click( 
 function(evt){
 var activePoints = myNewChart.getSegmentsAtEvent(evt);
 var url = "http://example.com/?label=" + activePoints[0].label + "&amp;value=" + activePoints[0].value;
 alert(url);
 }
 ); 
 }
 );
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

blocks|key|1982486|text|如果使用“唐特图”，并且希望防止用户在图表圈周围的空空间内单击事件，则可以使用以下替代方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1982487|var+myDoughnutChart+=+new+Chart(ctx).Doughnut(data);

document.getElementById("myChart").onclick+=+function(evt){
++++var+activePoints+=+myDoughnutChart.getSegmentsAtEvent(evt);

++++/*+this+is+where+we+check+if+event+has+keys+which+means+is+not+empty+space+*/+++++++
++++if(Object.keys(activePoints).length+>+0)
++++{
++++++++var+label+=+activePoints[0]["label"];
++++++++var+value+=+activePoints[0]["value"];
++++++++var+url+=+"http://example.com/?label="+%2B+label+%2B+"&value="+%2B+value
++++++++/*+process+your+url+...+*/
++++}
};|code-block|syntax|javascript|1982488|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If using a Donught Chart, and you want to prevent user to trigger your event on click inside the empty space around your chart circles, you can use the following alternative :

<pre><code>var myDoughnutChart = new Chart(ctx).Doughnut(data);

document.getElementById("myChart").onclick = function(evt){
 var activePoints = myDoughnutChart.getSegmentsAtEvent(evt);

 /* this is where we check if event has keys which means is not empty space */ 
 if(Object.keys(activePoints).length &gt; 0)
 {
 var label = activePoints[0]["label"];
 var value = activePoints[0]["value"];
 var url = "http://example.com/?label=" + label + "&amp;value=" + value
 /* process your url ... */
 }
};
</code></pre>

blocks|key|1982546|text|使用Chart.JS版本的2.1.3，旧的答案不再有效。使用getSegmentsAtEvent(事件)方法将在控制台上输出以下消息：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1982547|getSegmentsAtEvent不是一个函数|blockquote|1982548|所以我认为它必须被移除。老实说，我没看过任何变化。要解决这个问题，只需使用getElementsAtEvent(event)方法，因为它可以找到论“医生”。|CODE|1982549|下面可以找到脚本，以获得有效点击的切片标签和值。注意，检索标签和值也略有不同。|1982550|var+ctx+=+document.getElementById("chart-area").getContext("2d");
var+chart+=+new+Chart(ctx,+config);

document.getElementById("chart-area").onclick+=+function(evt)
{+++
++++var+activePoints+=+chart.getElementsAtEvent(evt);

++++if(activePoints.length+>+0)
++++{
++++++//get+the+internal+index+of+slice+in+pie+chart
++++++var+clickedElementindex+=+activePoints[0]["_index"];

++++++//get+specific+label+by+index+
++++++var+label+=+chart.data.labels[clickedElementindex];

++++++//get+value+by+index++++++
++++++var+value+=+chart.data.datasets[0].data[clickedElementindex];

++++++/*+other+stuff+that+requires+slice's+label+and+value+*/
+++}
}|code-block|syntax|javascript|1982551|希望能帮上忙。|1982552|entityMap|0|LINK|mutability|MUTABLE|url|http://www.chartjs.org/docs/#advanced-usage-prototype-methods^0|D|5|0|0|11|P|20|5|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$]]|$1|I|3|J|5|6|7|16|8|@$9|17|A|18|B|K]]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|L|3|M|5|6|7|1C|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1D|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|1E|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

Using Chart.JS version 2.1.3, answers older than this one aren't valid anymore. 
Using getSegmentsAtEvent(event) method will output on console this message: 

<blockquote>
 getSegmentsAtEvent is not a function
</blockquote>

So i think it must be removed. I didn't read any changelog to be honest. To resolve that, just use <code>getElementsAtEvent(event)</code> method, as it can be found <a href="http://www.chartjs.org/docs/#advanced-usage-prototype-methods">on the Docs</a>. 

Below it can be found the script to obtain effectively clicked slice label and value. Note that also retrieving label and value is slightly different.

<pre><code>var ctx = document.getElementById("chart-area").getContext("2d");
var chart = new Chart(ctx, config);

document.getElementById("chart-area").onclick = function(evt)
{ 
 var activePoints = chart.getElementsAtEvent(evt);

 if(activePoints.length &gt; 0)
 {
 //get the internal index of slice in pie chart
 var clickedElementindex = activePoints[0]["_index"];

 //get specific label by index 
 var label = chart.data.labels[clickedElementindex];

 //get value by index 
 var value = chart.data.datasets[0].data[clickedElementindex];

 /* other stuff that requires slice's label and value */
 }
}
</code></pre>

Hope it helps.

blocks|key|746180|text|如果您使用的是TypeScript，代码有点古怪，因为没有类型推断，但是这可以获得提供给图表的数据的索引:+//+events+public+chartClicked(e:any):void+{//sole.log(E)；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|746181|++++try+{
++++++++console.log('DS+'+%2B+e.active['0']._datasetIndex);
++++++++console.log('ID+'+%2B++e.active['0']._index);
++++++++console.log('Label:+'+%2B+this.doughnutChartLabels[e.active['0']._index]);
++++++++console.log('Value:+'+%2B+this.doughnutChartData[e.active['0']._index]);


++++}+catch+(error)+{
++++++++console.log("Error+In+LoadTopGraph",+error);
++++}

++++try+{
++++++++console.log(e[0].active);
++++}+catch+(error)+{
++++++++//console.log("Error+In+LoadTopGraph",+error);
++++}



}|code-block|syntax|javascript|746182|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you are using TypeScript, the code is a little funky because there is no type inference, but this works to get the index of the data that has been supplied to the chart:
 // events
 public chartClicked(e:any):void {
 //console.log(e);

<pre><code> try {
 console.log('DS ' + e.active['0']._datasetIndex);
 console.log('ID ' + e.active['0']._index);
 console.log('Label: ' + this.doughnutChartLabels[e.active['0']._index]);
 console.log('Value: ' + this.doughnutChartData[e.active['0']._index]);


 } catch (error) {
 console.log("Error In LoadTopGraph", error);
 }

 try {
 console.log(e[0].active);
 } catch (error) {
 //console.log("Error In LoadTopGraph", error);
 }



}
</code></pre>

blocks|key|829106|text|Chart.js+2.0使得这变得更加容易。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|829107|您可以在文档中的公共图表配置下找到它。应该比饼图更有效。|829108|options:{
++++onClick:+graphClickEvent
}

function+graphClickEvent(event,+array){
++++if(array[0]){
++++++++foo.bar;+
++++}
}|code-block|syntax|javascript|829109|它在整个图表上触发，但如果单击饼图，则该饼图的模型(包括可用于获取值的索引)。|829110|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Chart.js 2.0 has made this even easier.

You can find it under common chart configuration in the documentation. Should work on more then pie graphs.

<pre><code>options:{
 onClick: graphClickEvent
}

function graphClickEvent(event, array){
 if(array[0]){
 foo.bar; 
 }
}
</code></pre>

It triggers on the entire chart, but if you click on a pie the model of that pie including index which can be used to get the value.

blocks|key|746212|text|工作精细图表扇区|type|unstyled|depth|inlineStyleRanges|entityRanges|data|746213|ChartJS+:饼图-添加选项“单击”|746214|++++++++++++++options:+{
++++++++++++++++++++legend:+{
++++++++++++++++++++++++display:+false
++++++++++++++++++++},
++++++++++++++++++++'onClick'+:+function+(evt,+item)+{
++++++++++++++++++++++++console.log+('legend+onClick',+evt);
++++++++++++++++++++++++console.log('legd+item',+item);
++++++++++++++++++++}
++++++++++++++++}|code-block|syntax|javascript|746215|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Working fine chartJs sector onclick

ChartJS : pie Chart - Add options "onclick"

<pre><code> options: {
 legend: {
 display: false
 },
 'onClick' : function (evt, item) {
 console.log ('legend onClick', evt);
 console.log('legd item', item);
 }
 }
</code></pre>

blocks|key|831147|text|为了成功跟踪单击事件和用户单击的图形元素，我在我的.js文件中设置了以下变量：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|831148|vm.chartOptions+=+{
++++onClick:+function(event,+array)+{
++++++++let+element+=+this.getElementAtEvent(event);
++++++++if+(element.length+>+0)+{
++++++++++++var+series=+element[0]._model.datasetLabel;
++++++++++++var+label+=+element[0]._model.label;
++++++++++++var+value+=+this.data.datasets[element[0]._datasetIndex].data[element[0]._index];
++++++++}
++++}
};
vm.graphSeries+=+["Series+1",+"Serries+2"];
vm.chartLabels+=+["07:00",+"08:00",+"09:00",+"10:00"];
vm.chartData+=+[+[+20,+30,+25,+15+],+[+5,+10,+100,+20+]+];|code-block|syntax|javascript|831149|然后，在我的.html文件中，我按如下方式设置了图形：|831150|<canvas+id="releaseByHourBar"+
++++class="chart+chart-bar"
++++chart-data="vm.graphData"
++++chart-labels="vm.graphLabels"+
++++chart-series="vm.graphSeries"
++++chart-options="vm.chartOptions">
</canvas>|831151|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

To successfully track click events and on what graph element the user clicked, I did the following in my .js file I set up the following variables:

<pre><code>vm.chartOptions = {
 onClick: function(event, array) {
 let element = this.getElementAtEvent(event);
 if (element.length &gt; 0) {
 var series= element[0]._model.datasetLabel;
 var label = element[0]._model.label;
 var value = this.data.datasets[element[0]._datasetIndex].data[element[0]._index];
 }
 }
};
vm.graphSeries = ["Series 1", "Serries 2"];
vm.chartLabels = ["07:00", "08:00", "09:00", "10:00"];
vm.chartData = [ [ 20, 30, 25, 15 ], [ 5, 10, 100, 20 ] ];
</code></pre>

Then in my .html file I setup the graph as follows:

<pre><code>&lt;canvas id="releaseByHourBar" 
 class="chart chart-bar"
 chart-data="vm.graphData"
 chart-labels="vm.graphLabels" 
 chart-series="vm.graphSeries"
 chart-options="vm.chartOptions"&gt;
&lt;/canvas&gt;
</code></pre>

blocks|key|1982669|text|几天来，我一直面临着同样的问题，今天我找到了解决办法。我已经显示了准备执行的完整文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1982670|<html>
<head><script+type="text/javascript"+src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js">
</script>
</head>
<body>
<canvas+id="myChart"+width="200"+height="200"></canvas>
<script>
var+ctx+=+document.getElementById("myChart").getContext('2d');
var+myChart+=+new+Chart(ctx,+{
type:+'bar',
data:+{
++++labels:+["Red",+"Blue",+"Yellow",+"Green",+"Purple",+"Orange"],
++++datasets:+[{
++++++++label:+'#+of+Votes',
++++++++data:+[12,+19,+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
++++++++++++}
++++++++}]
++++},
onClick:function(e){
++++var+activePoints+=+myChart.getElementsAtEvent(e);
++++var+selectedIndex+=+activePoints[0]._index;
++++alert(this.data.datasets[0].data[selectedIndex]);


}
}
});
</script>
</body>
</html>|code-block|syntax|javascript|1982671|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I was facing the same issues since several days, Today i have found the solution. I have shown the complete file which is ready to execute.

<pre><code>&lt;html&gt;
&lt;head&gt;&lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;canvas id="myChart" width="200" height="200"&gt;&lt;/canvas&gt;
&lt;script&gt;
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
 labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
 datasets: [{
 label: '# of Votes',
 data: [12, 19, 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
 }
 }]
 },
onClick:function(e){
 var activePoints = myChart.getElementsAtEvent(e);
 var selectedIndex = activePoints[0]._index;
 alert(this.data.datasets[0].data[selectedIndex]);


}
}
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

blocks|key|829146|text|++var+ctx+=+document.getElementById('pie-chart').getContext('2d');
+var+myPieChart+=+new+Chart(ctx,+{
++++++++++++++++//+The+type+of+chart+we+want+to+create
++++++++++++++++type:+'pie',

++++++++++++});

+++++++++++++//define+click+event
++$("#pie-chart").click(
++++++++++++function+(evt)+{
++++++++++++++++var+activePoints+=+myPieChart.getElementsAtEvent(evt);
++++++++++++++++var+labeltag+=+activePoints[0]._view.label;

++++++++++++++++++++++});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|829147|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code> var ctx = document.getElementById('pie-chart').getContext('2d');
 var myPieChart = new Chart(ctx, {
 // The type of chart we want to create
 type: 'pie',

 });

 //define click event
 $("#pie-chart").click(
 function (evt) {
 var activePoints = myPieChart.getElementsAtEvent(evt);
 var labeltag = activePoints[0]._view.label;

 });
</code></pre>

blocks|key|831190|text|在选项中，将您的onclick并调用您需要的函数(+ajax+)作为示例，我将保留这个示例，这样每次单击某个点就可以告诉您值，您可以在您的新函数中使用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|831191|++++options:+{
++++++++plugins:+{
++++++++++++//+Change+options+for+ALL+labels+of+THIS+CHART
++++++++++++datalabels:+{
++++++++++++++++color:+'white',
++++++++++++++++//backgroundColor:'#ffce00',
++++++++++++++++align:+'start'
++++++++++++}
++++++++},
++++++++scales:+{
++++++++++++yAxes:+[{
++++++++++++++++ticks:+{
++++++++++++++++++++beginAtZero:true,
++++++++++++++++++++fontColor:+"white"
++++++++++++++++},gridLines:+{
++++++++++++++++++++++++color:+'rgba(255,255,255,0.1)',
++++++++++++++++++++++++display:+true
++++++++++++++++++++}
++++++++++++}],
++++++++++++xAxes:+[{
++++++++++++++++ticks:+{
++++++++++++++++++++fontColor:+"white"
++++++++++++++++},gridLines:+{++++++++++++++++++++++++
++++++++++++++++++++++++display:+false
++++++++++++++++++++}
++++++++++++}]
++++++++},
++++++++legend:+{
++++++++display:+false

++++},
++++//onClick:+abre+++++
++++++++onClick:function(e){+
++++var+activePoints+=+myChart.getElementsAtEvent(e);+
++++var+selectedIndex+=+activePoints[0]._index;+
++++alert(this.data.datasets[0].data[selectedIndex]);+


}+
++++}|code-block|syntax|javascript|831192|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Within options place your onclick and call the function you need as an example the ajax you need, I'll leave the example so that every click on a point tells you the value and you can use it in your new function.

<pre><code> options: {
 plugins: {
 // Change options for ALL labels of THIS CHART
 datalabels: {
 color: 'white',
 //backgroundColor:'#ffce00',
 align: 'start'
 }
 },
 scales: {
 yAxes: [{
 ticks: {
 beginAtZero:true,
 fontColor: "white"
 },gridLines: {
 color: 'rgba(255,255,255,0.1)',
 display: true
 }
 }],
 xAxes: [{
 ticks: {
 fontColor: "white"
 },gridLines: { 
 display: false
 }
 }]
 },
 legend: {
 display: false

 },
 //onClick: abre 
 onClick:function(e){ 
 var activePoints = myChart.getElementsAtEvent(e); 
 var selectedIndex = activePoints[0]._index; 
 alert(this.data.datasets[0].data[selectedIndex]); 


} 
 }
</code></pre>

blocks|key|1982738|text|您可以在options部分添加一个onClick函数，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1982739|options+:+{
++++cutoutPercentage:+50,+//for+donuts+pie
++++onClick:+function(event,+chartElements){
++++++++if(chartElements){
++++++++++++console.log(chartElements[0].label);
++++++++}
++++},
},|code-block|syntax|javascript|1982740|chartElements[0]是图表中点击的部分，不再需要使用getElementsAtEvent了。它在图2.9.4上工作。|offset|length|style|CODE|1982741|entityMap^0|0|0|0|G|W|I|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

You can add in the options section an onClick function, like this:
<pre><code>options : {
 cutoutPercentage: 50, //for donuts pie
 onClick: function(event, chartElements){
 if(chartElements){
 console.log(chartElements[0].label);
 }
 },
},
</code></pre>
the <code>chartElements[0]</code> is the clicked section of your chart, no need to use <code>getElementsAtEvent</code> anymore.
It works on Chart v2.9.4

blocks|key|829198|text|我对这个问题有一个很好的解决办法。如果您有多个数据集，则确定单击了哪个数据集会很棘手。_datasetIndex总是返回零。但这应该能起作用。它也将为您提供标签和数据集标签。请注意**+this.getElementAtEvent**没有getElement中的s|type|unstyled|depth|inlineStyleRanges|entityRanges|data|829199|options:+{
+++onClick:+function+(e,+items)+{
++++var+firstPoint+=+this.getElementAtEvent(e)[0];
++++if+(firstPoint)+{
++++++var+label+=+firstPoint._model.label;
++++++var+val+=+firstPoint._model.datasetLabel;
++++++console.log(label%2B"+-+"%2Bval);
++++}
++++
++}
}|code-block|syntax|javascript|829200|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I have an elegant solution to this problem. If you have multiple dataset, identifying which dataset was clicked gets tricky. The _datasetIndex always returns zero.
But this should do the trick. It will get you the label and the dataset label as well.
Please note ** this.getElementAtEvent** is without the s in getElement
<pre><code>options: {
 onClick: function (e, items) {
 var firstPoint = this.getElementAtEvent(e)[0];
 if (firstPoint) {
 var label = firstPoint._model.label;
 var val = firstPoint._model.datasetLabel;
 console.log(label+&quot; - &quot;+val);
 }
 
 }
}
</code></pre>

I've got a question regard Chart.js. 

I've drawn multiple piecharts using the documentation provided. I was wondering if on click of a certain slice of one of the charts, I can make an ajax call depending on the value of that slice? 

For example, if this is my <code>data</code>

<pre><code>var data = [
 {
 value: 300,
 color:"#F7464A",
 highlight: "#FF5A5E",
 label: "Red"
 },
 {
 value: 50,
 color: "#46BFBD",
 highlight: "#5AD3D1",
 label: "Green"
 },
 {
 value: 100,
 color: "#FDB45C",
 highlight: "#FFC870",
 label: "Yellow"
 }
], 
</code></pre>

is it possible for me to click on the <code>Red</code> labelled slice and call a url of the following form:
<code>example.com?label=red&amp;value=300</code>? If yes, how do I go about this?

Click events on Pie Charts in Chart.js

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个关于Chart.js的问题。我使用所提供的文档绘制了多个片段。我想知道，在单击某个图表的某个片段时，我是否可以根据该切片的值进行ajax调用？例如，如果这是我的datavar data = [    {        value: 300,        color:"#F7464A",        high...

问在Chart.js中单击Pie图表上的事件
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Chart.js中单击Pie图表上的事件EN