Question

嗨，我正在尝试使用数据库中的数据创建条形图。我一直在摆弄“ options：”，并尝试了几种在线解决方案，但无济于事。在我的代码的各个部分中放置“ options：”标签要么导致它什么都不做，要么使整个条形图消失。

$(document).ready(function(){




$.ajax({
    url: "http://localhost:8548/chartjs/data.php",
    method: "GET",
    success: function(data) {
        console.log(data);
        var exercise = [];
        var count = [];

        for(var i in data) {
            exercise.push("Exercise " + data[i].exercisesId);
            count.push(data[i].total);
        }

        var chartdata = {
            labels: exercise,
            datasets : [
                {
                    label: 'Exercises Completed',
                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    hoverBackgroundColor: 'rgba(54, 162, 235, 0.2)',
                    hoverBorderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1,
                    data: count,
                }]


        };

        var ctx = document.getElementById("mycanvas").getContext("2d");
        var ctx = $("#mycanvas");

        var barGraph = new Chart(ctx, {
            type: 'bar',
            data: chartdata

        });

        options:{onClick: graphClickEvent}
        function graphClickEvent(event, array){
            if(array[0]){
                foo.bar; 
            }
        }

    },



    error: function(data) {
        console.log(data);
    }
});
});

这是我尝试放置在代码各个部分中的代码片段：

    options:{
    onClick: graphClickEvent
}

function graphClickEvent(event, array){
    if(array[0]){
        foo.bar; 
    }
}

我知道即使该代码片段也无法正常工作，但我不明白为什么将其放在代码底部的某些区域内会导致上述问题。

就背景而言，我的条形图显示了某项运动完成的总次数，而我试图做到这一点，以便在单击特定的条形图时会弹出某种显示，其中列出了已经完成了练习。谢谢您的时间！

Answer 1

我认为只需要这个

var ctx = document.getElementById("mycanvas").getContext("2d");

条形图的Chart.js onClick函数

1 个答案: