Chart.js getElementsAtEvent函数无法识别条形图上的onclick

Question

我是Chart.Js的新手，并且在条形图上面临点击事件的问题。我想在点击功能上获得相应的x轴标签。但我收到错误＆＃34; barchart.getElementsAtEvent不是HTMLCanvasElement.Graphinit.document.getElementById.onclick＆＃34;中的函数。我真的不明白我的代码究竟出了什么问题。

我调用以下函数生成条形图min，item是x轴和＆amp;的数据数组。 y轴。

cdn：＆＃34; https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js＆＃34;

var barchart;
function Graphinit(min, item, labelstring, stepcount, scaleStepWidth, reporttype, min1, item1) {
    $('#myChart').remove(); // this is my <canvas> element
    $('#showgraph').append(' <canvas id="myChart" width="1200" height="400"></canvas>');
    inputdata = min;
    xaxislabel = item;
    Chart.types.Bar.extend({
        name: "BarAlt",
        draw: function () {
            Chart.types.Bar.prototype.draw.apply(this, arguments);
            var ctx = this.chart.ctx;
            ctx.save();
            // text alignment and color
            ctx.textAlign = "center";
            ctx.textBaseline = "bottom";
            ctx.fillStyle = this.options.scaleFontColor;
            // position
            var x = this.scale.xScalePaddingLeft * 0.4;
            var y = this.chart.height / 2;
            // change origin
            ctx.translate(x, y)
            // rotate text
            ctx.rotate(-90 * Math.PI / 180);
            ctx.fillText(this.datasets[0].label, 0, 0);
            ctx.restore();
        }
    });

    var bridgeDataPoints = [];
    if ((reporttype === "Lines picked per user") || (reporttype === "Picks per item") || (reporttype === "Lines Picked by item class") || (reporttype == "Lines picked by customer") || (reporttype == "Total Lines Picked") || reporttype == "Skipped Lines") {
        for (var j = 0; j < min.length; j++) {
            var dataPoint = new DataPoint1(item[j], min[j]);
            bridgeDataPoints.push(dataPoint);
        }
    }

    var data = {
        labels: bridgeDataPoints,
        datasets: [{
            label: labelstring,
            fillColor: "rgba(255, 255, 255, 1)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: inputdata
        }]  
    };

    var barchartoptions = {
        //Boolean - If we show the scale above the chart data
        scaleOverlay: false,
        //Boolean - If we want to override with a hard coded scale
        scaleOverride: true,
        //** Required if scaleOverride is true **
        //Number - The number of steps in a hard coded scale
        scaleSteps: stepcount,
        //Number - The value jump in the hard coded scale
        scaleStepWidth: scaleStepWidth,
        //Number - The scale starting value
        scaleStartValue: 0,

        scaleEndValue: stepcount,

        //String - Colour of the scale line
        scaleLineColor: "rgba(0,0,0,.1)",

        //Number - Pixel width of the scale line
        scaleLineWidth: 1,

        //Boolean - Whether to show labels on the scale
        scaleShowLabels: true,

        //Interpolated JS string - can access value
        scaleLabel: "          <%=value%>",

        //String - Scale label font declaration for the scale label
        scaleFontFamily: "'Arial'",

        //Number - Scale label font size in pixels
        scaleFontSize: 12,

        //String - Scale label font weight style
        scaleFontStyle: "normal",

        //String - Scale label font colour
        scaleFontColor: "#666",

        ///Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines: true,

        //String - Colour of the grid lines
        scaleGridLineColor: "rgba(0,0,0,.05)",

        //Number - Width of the grid lines
        scaleGridLineWidth: 1,

        //Boolean - If there is a stroke on each bar
        barShowStroke: true,

        //Number - Pixel width of the bar stroke
        barStrokeWidth: 2,

        //Number - Spacing between each of the X value sets
        barValueSpacing: 10,

        //Number - Spacing between data sets within X values
        barDatasetSpacing: 3,

        //Boolean - Whether to animate the chart
        animation: true,

        //Number - Number of animation steps
        animationSteps: 60,

        //String - Animation easing effect
        animationEasing: "easeOutQuart",

        //Function - Fires when the animation is complete
        onAnimationComplete: function (animation) {
            //alert('onAnimationComplete')
        },

        tooltipTemplate: "<%if (label){%><%=label.tooltip%><%}%>"


    };
    barchartoptions.datasetFill = false;

    var ctx = $("#myChart").get(0).getContext('2d');
    ctx.canvas.height = 400;  // setting height of canvas
    ctx.canvas.width = 1200; // setting width of canvas
    //var config = Chart.defaults.bar;
    barchart = new Chart(ctx).BarAlt(data, barchartoptions);     


    var length = inputdata.length; //min1.length;
    var backgroundcolorset = [];
    for (var i = 0; i < length; i++) {
        var rgb = [];
        for (var j = 0; j < 3; j++) {
            rgb.push(Math.floor(Math.random() * 255));
        }
        backgroundcolorset.push('rgb(' + rgb.join(',') + ')');
    }    

    for (var j = 0; j < length; j++) {
        barchart.datasets[0].bars[j].fillColor = backgroundcolorset[j]; //bar 1
    }
    barchart.update();
    console.log()
    //console.log(barchart.getElementAtEvent(e));
    document.getElementById("myChart").onclick = function (evt) {
       // var activePoints =
        console.log(barchart);
        var activePoints = barchart.getElementsAtEvent(evt);

    };

} // end Graphinit