Chart.js ChartJs如何从多个数据集获取单击的数据集栏

我想添加一个唯一的网址到每个酒吧，并打开该网址点击其中一个酒吧。但在我的例子中，我有两个数据集。我使用onClick事件返回两个数据集的活动记录。

我正在使用以下代码。。它将返回两个数据集对象…它应该只返回一个数据集

<script>
        var barChartData = {
            labels: ["Jan","Feb","March"],
            datasets: [{
                label : "Quoted",
                backgroundColor : "#FF7228",
                data : [50,20,70],
            },
            {
                label : "Accepted",
                backgroundColor : "#FFCC8C",
                data :  [30,10,20],
            }, 
            ]

        };

        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    events:['click'],
                    onClick:function(c,i){
                            console.log(this.active);
                            }
                        },
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                }
            });
        };
 </script>

var barChartData={
标签：[“一月”、“二月”、“三月”]，
数据集：[{
标签：“引用”，
背景颜色：“FF7228”，
数据：[50,20,70]，
},
{
标签：“接受”，
背景色：“FFCC8C”，
数据：[30,10,20]，
}, 
]
};
window.onload=函数（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myBar=新图表（ctx{
类型：'bar'，
数据：barChartData，
选项：{
事件：[“单击”]，
onClick：函数（c，i）{
console.log（this.active）；
}
},
回答：是的，
图例：{
位置：'顶部'，
},
}
});
};

您可以使用方法只返回一个数据集。然后，您可以应用进一步的逻辑来检测单击了哪个条

ᴅᴇᴍᴏ

var barChartData={
标签：[“一月”、“二月”、“三月”]，
数据集：[{
标签：“引用”，
背景颜色：“FF7228”，
数据：[50,20,70]，
}, {
标签：“接受”，
背景色：“FFCC8C”，
数据：[30,10,20]，
}]
};
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myBar=新图表（ctx{
类型：'bar'，
数据：barChartData，
选项：{
onClick：函数（e）{
var bar=this.getElementAtEvent（e）[0]；
var指数=bar.\u指数；
var datasetIndex=bar.\u datasetIndex；
//检查单击了哪个栏
如果（索引==0&&datasetIndex==0）警报（'单击第一个栏！'）；
否则，如果（索引==0&&datasetIndex==1）警报（'单击第二个栏！'）；
else if（index==1&&datasetIndex==0）警报（'第三个条被点击！'）；
else if（index==1&&datasetIndex==1）警报（'单击第四个栏！'）；
否则，如果（索引==2&&datasetIndex==0）警报（'第五个栏已单击！'）；
否则，如果（索引==2&&datasetIndex==1）警报（'单击了第六个栏！'）；
}
},
回答：是的，
图例：{
位置：'顶部'，
},
});

在Grutter上建立更多的答案，如果你想知道基础数据，那么只考虑OnCutt代码：

var barChartData = {
    labels: ["Jan", "Feb", "March"],
    datasets: [{
        label: "Quoted",
        backgroundColor: "#FF7228",
        data: [50, 20, 70],
    }, {
        label: "Accepted",
        backgroundColor: "#FFCC8C",
        data: [30, 10, 20],
    }]
};

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        onClick: function(e) {
            var bar = this.getElementAtEvent(e)[0];
            if (bar != undefined) {
                var index = bar._index;
                var datasetIndex = bar._datasetIndex;
                alert(barChartData.datasets[datasetIndex].data[index].x +
                    ', ' + barChartData.datasets[datasetIndex].data[index].y);
            }
        }
    },
    responsive: true,
    legend: {
        position: 'top',
    },
});

你能解释一下
if-else
语句背后的逻辑吗？什么是
bar.\u索引
，什么是
bar.\u数据集索引
？