Question

我有一个ChartJS气泡图，我需要能够单击气泡并检索有关它的其他信息。除非气泡重叠，否则一切正常。在代码笔中，在x = 30和y = 90处有两个气泡。 r = 50的那个放在r = 40的那个上面，因此它可以捕获点击。有没有办法获取r = 40气泡的数据？

CODEPEN

var options = {
        aspectRatio: 1,
        legend: false,
        tooltips: false
    };

    var chart = new Chart('data-chart', {
        type: 'bubble',
        data:{
           "datasets":[{"label":"Tasks","data":[{"x":"30","y":90,"r":50,"task_id":1442},{"x":"30","y":90,"r":40,"task_id":929},{"x":"56","y":52,"r":75,"task_id":987},{"x":"36","y":45,"r":86,"task_id":1088},{"x":"49","y":1,"r":92,"task_id":2778},{"x":"27","y":40,"r":86,"task_id":2001},{"x":"79","y":99,"r":77,"task_id":1040},{"x":"73","y":44,"r":92,"task_id":2453},{"x":"32","y":68,"r":62,"task_id":2133},{"x":"79","y":20,"r":98,"task_id":1900},{"x":"71","y":45,"r":95,"task_id":678}],"backgroundColor":["rgba(136, 84, 208, 0.2)","rgba(165, 94, 234, 0.2)","rgba(15, 185, 177, 0.2)","rgba(32, 191, 107, 0.2)","rgba(165, 94, 234, 0.2)","rgba(250, 130, 49, 0.2)","rgba(250, 130, 49, 0.2)","rgba(56, 103, 214, 0.2)","rgba(119, 140, 163, 0.2)","rgba(252, 92, 101, 0.2)","rgba(15, 185, 177, 0.2)"]}]
        },
        options: options
    });

var canvas = document.getElementById("data-chart");
    canvas.onclick = function(e){
        var clickedPoint = chart.getElementsAtEvent(e);
        if(clickedPoint.length){
            var idx = clickedPoint[0]['_index'];
            var pt = chart.data.datasets[0].data[idx];
            var pointInfo =
            "<strong>Information</strong><br>" +
            "ID: " + pt.task_id + "<br>" +
            "X: " + pt.x + "<br>" +
            "Y: " + pt.y + "<br>" +
            "R: " + pt.r + "<br>";
            $('#info').html(pointInfo);
        }
    }

ChartJS单击重叠的图表元素，并获取较低元素的信息

0 个答案: