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

Question

我正在使用 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>},
                 <br>},
             <br>});

标签： laravelchart.jslaravel-blade

Answer 1

我知道了。它现在正在工作。

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