Question

在我的Laravel 5.7应用程序中，我使用Chart.js 2.7.2，并且在用户单击时在堆积折线图打开模式对话框中在报告的要点上，例如：

DotNetCoreTestSettings

此功能：

    var lineCanvas = document.getElementById("canvasVotesByDays");
    var lineCanvasContext = lineCanvas.getContext('2d');
    $("#div_canvasVotesByDays").css("display", "block")

    var numberWithCommas = function (x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    };
    var self = this;

    if (window.chartLineObject != undefined) { // clear existing instance
        window.chartLineObject.destroy();
    }

    window.chartLineObject = new Chart(lineCanvasContext, {
        type: 'line',
        data: {
            labels: monthsXCoordItems,
            datasets: [
                {
                    label: 'Correct Votes',
                    data: voteValuesCorrect,
                    borderWidth: 1,           // The stroke width of the line in pixels.
                },
                {
                    label: 'Incorrect Votes',
                    data: voteValuesNoneCorrect,
                    borderWidth: 1,           // The stroke width of the line in pixels.
                }
            ]
        },

        options: { // options of Report By Vote Days ( 'line' report )
            animation: {
                duration: 10,
            },

            tooltips: { // tooltip text of Report By Vote Days ( 'line' report )
                mode: 'label',
                callbacks: {
                    label: function (tooltipItem, data) {
                        return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
                    }
                }
            }, // tooltips: { // tooltip text of Report By Vote Days ( 'line' report )

            scales: { // options for x and y scales of 'line' report
                xAxes: [{
                    stacked: true,    // Stacked line charts can be used to show how one data series i
                    gridLines: {display: true},
                }],
                yAxes: [{
                    stacked: true,  // Stacked line charts can be used to show how one data series i
                    ticks: {
                        callback: function (value) {  // on Y scale show only integer without decimals
                            if (Math.floor(value) === value) {
                                return value;
                            }  // return numberWithCommas(value);
                        },
                    },
                }],
            }, // scales: { // options for x and y scales of 'line' report
            legend: {display: true}
        } // options: { // options of Report By Vote Days ( 'line' report )

    }); // window.chartLineObject = new Chart(lineCanvasContext, {

    lineCanvas.onclick = function (e) {
        var firstPoint = window.chartLineObject.getElementsAtEvent(e);
        if (typeof firstPoint[0] == "undefined") {
            popupAlert("Select one of visible dots to get detailed results !", 'danger')
            return;
        }
        if (firstPoint) {
            var first_point_index = firstPoint[0]._index
            if (typeof window.chartLineObject.data.labels[first_point_index] == "undefined") {
                popupAlert("Bad point !", 'danger')
                return;
            }

            var selected_day = window.chartLineObject.data.labels[first_point_index];
            backendReports.showVoteNamesReportDetailsByDays(selected_day)
            return;
        }
    } // window.chartLineObject.onclick = function(e) {

我仅在用户单击报表的可见点时使用它来打开对话框模型它可以正常工作，但是问题在于报告顶部有图例块（它也可以用作过滤器）并单击此图例项，我收到错误消息： https://imgur.com/a/TgMJot2

是否可以检查单击的区域是否为图例标签？

您可以在http://votes.nilov-sergey-demo-apps.tk/admin/report_votes_by_days上看到它

谢谢！

Answer 1

为什么不同时使用图表onclick事件和canvas onclick事件。 canvas onclick具有过滤功能，图表onclick具有显示模式。

    onClick: function(c,i) {
            e = i[0];
            var x_value = this.data.labels[e._index];
            var y_value = this.data.datasets[0].data[e._index];
            var ID = x_value;
            var Tip =1;

当用户单击图例标签时删除错误消息

1 个答案: