当用户单击 donut chart.js 中的特定区域时，如何获取标签名称？我无法找到 chart.js 所选区域的索引

如何解决当用户单击 donut chart.js 中的特定区域时，如何获取标签名称？我无法找到 chart.js 所选区域的索引

我正在使用 chart.js、Laravel 5.4 和刀片模板。我必须显示圆环图，当用户单击特定区域时，它应该在模式中显示所选标签的名称和属于它的值，但首先当用户单击圆环图时我无法获得标签名称。

<br>var bookings = {!! json_encode($bookings)  !!} ;
<br>var map={"confirmed":{"label":"Confirmed","color":"#4BC0C0"},"cancelled":{"label":"Cancelled","color":"#FFCD56"},"on_request":{"label":"On Request","color":"#FF6384"}}
 <br>@if($hasChart)
        <br>var labels=[],colors=[],numbers=[],hasChart=false;
        <br>for (var property in map) {
            <br>if(bookings[property].length>=0){
                <br>hasChart=true;
                        <br>labels.push(map[property]["label"]);
                        <br>colors.push(map[property]["color"]);
                          <br>numbers.push(bookings[property].length);
            }
        }        
 var ctx = document.getElementById('doughnut-chart').getContext('2d');
            <br>var chart = new Chart(ctx,{
                 <br>type: 'doughnut',<br>data: {
                     <br>labels: labels,<br>datasets: [
                         <br>{
                            backgroundColor: colors,data: numbers
                        }
                    ]
                 <br>},<br>options:  {                     
                    onClick: (e) => {
                          <br>//to do get value of selected label
                        <br>$('#bookingInfoModal').modal('show');                     
                    },<br>maintainAspectRatio: false,<br>elements: {
                         <br>arc: {
                            borderWidth: 0
                        }
                    },<br>
                     <br>plugins: {
                         <br>legend: {
                            display: true,position: "right",align: "end",padding: 50,labels: {
                                BoxWidth: 10,color: '#000000',},<br>},<br>});

解决方法

我明白了。它现在正在工作。

options: {
 onClick: (e,legend) => {
  console.log(legend[0].index);
  alert(chart.data.labels[legend[0].index]);
 },}