Javascript Chart.js分组条形图Onclick事件

我已经开始使用chart.js实现分组条形图。一组有两个栏——第一个评价栏和第二个评价栏。当点击条（每个条）时，它必须指向具有特定参数的详细页面（每个条的参数值不同）

• 在这种情况下，我无法区分X-Y轴值和不同的条（第一条或第二条）
• 单击事件即使在栏外（包括栏上）也会触发

我希望你能帮助解决上述问题

成功：函数（chData）{
变量aData=chData；
如果（aData.monthText！=0）{
$（'#lblnodata'）.html（''）；
var FirstEvaluationData=[]；
var SecondEvaluationData=[]；
var FirstOrder=[]；
var二阶=[]；
对于（i=0；i success: function (chData) {
                var aData = chData;
                if (aData.monthText != 0) {
                    $('#lblnodata').html(' ');
                    var FirstEvaluationData = [];
                    var SecondEvaluationData = [];
                    var FirstOrder = [];
                    var SecondOrder = [];

                    for (i = 0; i < aData.firstMonthEvaluation.length; i++) {

                        FirstEvaluationData.push(aData.firstMonthEvaluation[i].evaluationScore);
                        FirstOrder.push(aData.firstMonthEvaluation[i].evaluationId);
                    }

                    for (i = 0; i < aData.secondMonthEvaluation.length; i++) {

                        SecondEvaluationData.push(aData.secondMonthEvaluation[i].evaluationScore);
                        SecondOrder.push(aData.secondMonthEvaluation[i].evaluationId);
                    }



                    var pointBackgroundColors = [];
                    var point2BackgroundColors = [];
                    var ctx = $("#myChart").get(0).getContext("2d");
                    var myNewMonthChart = new Chart(ctx, {
                        type: 'bar',
                        responsive: true,
                        animation: true,
                        showDatapoints: true,
                        data: {
                            labels: aData.monthText,
                            datasets: [
                                {

                                    datalabels: {
                                        color: 'black',
                                        font: {
                                            weight: 'bold'
                                        }
                                    },
                                    label: "1stEvaluation",
                                    data: FirstEvaluationData,
                                    order: FirstOrder,
                                  
                                    //backgroundColor: "#3cba9f",
                                    backgroundColor: pointBackgroundColors,
                                    borderColor: "#ccc",
                                    borderWidth: 1

                                },
                                {
                                    datalabels: {
                                        color: 'black',
                                        font: {
                                            weight: 'bold'
                                        }
                                    },
                                    label: "2ndEvaluation",
                                    data: SecondEvaluationData,
                                    order: SecondOrder,
                                   
                                    //backgroundColor: "#e8c3b9",
                                    backgroundColor: point2BackgroundColors,
                                    borderColor: "#ccc",
                                    borderWidth: 1
                                }
                            ]
                        },

                        options: {
                            tooltips: {
                                callbacks: {
                                    label: function (tooltipItem) {

                                        var label = tooltipItem.label;
                                        var score = tooltipItem.yLabel;
                                        return label, score + '%';
                                    }

                                },
                                filter: function (tooltipItem, data) {
                                    var value = tooltipItem.value;
                                    if (value == 50.5348) {
                                        return false;
                                    } else {
                                        return true;
                                    }
                                }

                            },


                            onClick: function (c, data) {
                                debugger
                                e = data[0];

                                var name = this.data.labels[e._index];
                                var y_value = this.data.datasets[0].data[e._index];
                                var id = this.data.datasets[0].order[e._index];
                                if (y_value == 50.5348) {
                                    Pending(name, EmployeeId);
                                }
                                else {
                                    Evaluation(name, EmployeeId);
                                }


                            },


                            responsive: true,
                            title: { display: true, text: 'Evaluation Graph For Current Period' },
                            legend: { position: 'top' },
                            scales: {

                                xAxes: [{ gridLines: { display: true }, display: true, scaleLabel: { display: true, labelString: 'Evaluation Dates' }, barPercentage: 1.0, categoryPercentage: 0.6 }],
                                yAxes: [{ gridLines: { display: true }, display: true, scaleLabel: { display: true, labelString: 'Score in ( % )' }, ticks: { beginAtZero: true } }]
                            },
                            plugins: {
                                datalabels: {

                                    formatter: function (value, context) {

                                        if (value == 50.5348) {

                                            return "pending"
                                        }
                                        else {
                                            return context.dataset.label;
                                        }

                                    }
                                }
                            }
                        }
                    });


                    for (i = 0; i < myNewMonthChart.data.datasets[0].data.length; i++) {
                        if (myNewMonthChart.data.datasets[0].data[i] == 50.5348) {
                            pointBackgroundColors.push("#e7e7e7");


                        } else {

                            pointBackgroundColors.push("#00c0ef");
                        }
                    }
                    for (i = 0; i < myNewMonthChart.data.datasets[1].data.length; i++) {
                        if (myNewMonthChart.data.datasets[1].data[i] == 50.5348) {
                            point2BackgroundColors.push("#e7e7e7");


                        } else {

                            point2BackgroundColors.push("#dd4b39");
                        }
                    }
                    myNewMonthChart.update();

                }
                else {
                    $("#myChart").remove();
                    $('#lblnodata').css('display', 'block');
                    $('#lblnodata').html('<h3>No Data For Selected Periods</h3>');
                }
            }