Tôi vừa bắt đầu làm việc với Chart.js và tôi rất thất vọng rất nhanh. Tôi có biểu đồ thanh xếp chồng lên nhau, nhưng tôi không thể nhấp vào "sự kiện" để hoạt động.Chart.js: Biểu đồ thanh Nhấp vào Sự kiện
Tôi đã tìm thấy một số comment on GitHub by nnnick từ Chart.js để sử dụng hàm getBarsAtEvent, mặc dù không thể tìm thấy hàm này trong Chart.js documentation (tiếp tục, thực hiện tìm kiếm). Tài liệu này đề cập đến hàm getElementsAtEvent của tham chiếu chart, nhưng điều đó chỉ dành cho Biểu đồ đường kẻ.
tôi đặt một event listener (đúng cách) trên yếu tố canvas của tôi:
canv.addEventListener('click', handleClick, false);
... nhưng trong chức năng handleClick tôi, chart.getBarsAtEvent là undefined!
Bây giờ, trong tài liệu Chart.js, có một tuyên bố về một cách khác để đăng ký sự kiện nhấp cho biểu đồ thanh. Nó khác nhiều so với bình luận của nnnick về GitHub từ 2 năm trước.
Trong Global Chart Defaults bạn có thể đặt chức năng onClick cho biểu đồ của mình. Tôi đã thêm một chức năng onClick vào cấu hình biểu đồ của mình và không có gì ...
Vì vậy, làm cách nào để tôi nhận được cuộc gọi lại nhấp để làm việc cho biểu đồ thanh của mình ?!
Mọi trợ giúp sẽ được đánh giá cao. Cảm ơn!
P.S .: Tôi không sử dụng bản dựng chính từ GitHub. Tôi đã thử, nhưng nó tiếp tục la hét rằng require is undefined và tôi đã không sẵn sàng để bao gồm CommonJS chỉ để tôi có thể sử dụng thư viện biểu đồ này. Tôi thà viết biểu đồ dang của riêng mình. Thay vào đó, tôi đã tải xuống và đang sử dụng phiên bản Standard Build mà tôi đã tải xuống ngay từ liên kết ở đầu số documentation page.
VÍ DỤ: Dưới đây là một ví dụ về cấu hình tôi đang sử dụng:
var chart_config = {
type: 'bar',
data: {
labels: ['One', 'Two', 'Three'],
datasets: [
{
label: 'Dataset 1',
backgroundColor: '#848484',
data: [4, 2, 6]
},
{
label: 'Dataset 2',
backgroundColor: '#848484',
data: [1, 6, 3]
},
{
label: 'Dataset 3',
backgroundColor: '#848484',
data: [7, 5, 2]
}
]
},
options: {
title: {
display: false,
text: 'Stacked Bars'
},
tooltips: {
mode: 'label'
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [
{
stacked: true
}
],
yAxes: [
{
stacked: true
}
]
},
onClick: handleClick
}
};
tôi thấy rằng tôi đã có thể có 'chức năng onClick' tôi gọi bằng cách thiết lập 'chart.config.options.onClick = handleClick' nhưng điều này không giúp tôi tìm thấy những gì một phần của biểu đồ của tôi là nhấp vào. Về cơ bản, điều này giống như thiết lập trình lắng nghe sự kiện của tôi trên nút 'canvas'. – WebWanderer