鼠标悬停功能在Chart.js中很奇怪

Question

1）我有一个网站，用户可以在其中基于下拉列表过滤值，基于该数据被调用以显示在图表上（使用ChartJS）。

在此阶段，代码调用JavaScript函数，在其中传递值（x，y轴标签和值等）。然后，用户可以将鼠标悬停在图形上（从Chart.js进行内部函数调用），并以弹出窗口的形式获取值。

2）然后，当用户从下拉菜单中选择其他值，然后再次将鼠标悬停在坐标上以查看弹出值时，图形将切换回旧数据（第一个下拉值-2019），直到几秒钟，然后再更改回还原为原始数据（当前从下拉菜单2020开始传递）。

问题1.即使我没有将其保存在JSON或cookie或其他内容中，也如何传递旧数据。

注：我检查了我的“ console.log”从下拉列表中传递的值->是正确的。保留了一个调试点，该调试点告诉我当前传递给图形的数据集值->是正确的，没有传递两个数据集值。

问题2。这是Chart.JS插件问题吗？由于我没有在JS中调用任何mouseover事件。

如果是，我应该如何解决？

问题3。总的来说，这是什么解决方案？

下面是它的JS代码。

var initialize = function ()
{
    canvas = document.getElementById('wo-chart');
    searchBox = document.getElementById('wo-widget-search');

    allTimeLabel = document.getElementById('wo-billed-total');
    currentLabel = document.getElementById('wo-billed-current');
    selectedDateLabel = document.getElementById('selected-wo-date');
    selectedProblemLabel = document.getElementById('selected-wo-problem');
    selectedTradeLabel = document.getElementById('selected-wo-trade');

    dateSelectors = document.querySelectorAll('[data-wo-date]');



    search();

    // performs a new search when a different start date is selected
    $(dateSelectors).click(function (event)
    {
        event.preventDefault();
        console.log("Function Date Selectors Test! " + this.getAttribute('data-wo-date'));

        selectedDateLabel.innerHTML = this.innerHTML;
        selectedStartDate = this.getAttribute('data-wo-date');

        search();
    });

    // performs a new search when a different problem is selected

};

return { initialize: initialize };

/**
 * Performs a new search for WorkOrder chart data.
 * @function
 */
function search()
{
    otx.spinner(currentLabel, 'span');
    otx.spinner(allTimeLabel, 'span');

    var data = profile.getCurrentEntityInfoAsObject();



    if (selectedStartDate !== null && selectedStartDate !== '')
    {
        data.rangeStartDate = selectedStartDate;
    }


    $.post('/Maintenance/MaintenanceWidget/GetWorkOrderChartData', data, function (result)
    {
        if (!result || result.DataSets.length < 2)
        {
            otx.alerts.error('We were unable to load Work Order chart data.');
            return;
        }

        allTimeLabel.innerHTML = result.WorkOrdersAllTime;
        currentLabel.innerHTML = result.WorkOrdersInPeriod;

        $(canvas).siblings('iframe').remove();

        workOrderChart = new Chart(canvas.getContext('2d'), {
            type: 'line',
            data: {
                labels: result.Labels,
                datasets: [
                    {
                        // ReSharper disable once PossiblyUnassignedProperty
                        label: result.DataSets[0].Label,
                        fill: true,
                        lineTension: 0.3,
                        backgroundColor: 'rgba(238,144,197,0.4)',
                        borderColor: 'rgba(238,144,197,1)',
                        borderWidth: 2,
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'round',
                        pointBorderColor: 'rgba(238,144,197,1)',
                        pointBackgroundColor: '#fff',
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: 'rgba(238,144,197,1)',
                        pointHoverBorderColor: 'rgba(238,144,197,1)',
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,
                        // ReSharper disable once PossiblyUnassignedProperty
                        data: result.DataSets[0].Data,
                        spanGaps: false
                    },
                    {
                        // ReSharper disable once PossiblyUnassignedProperty
                        label: result.DataSets[1].Label,
                        fill: true,
                        lineTension: 0.3,
                        backgroundColor: 'rgba(0,160,209,0.4)',
                        borderColor: 'rgba(0,160,209,1)',
                        borderWidth: 2,
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'round',
                        pointBorderColor: 'rgba(0,160,209,1)',
                        pointBackgroundColor: '#fff',
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: 'rgba(0,160,209,1)',
                        pointHoverBorderColor: 'rgba(0,160,209,1)',
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,
                        // ReSharper disable once PossiblyUnassignedProperty
                        data: result.DataSets[1].Data,
                        spanGaps: false
                    }
                ]
            },
            options: {
                maintainAspectRatio: false,
                responsive: true,
                scales: {
                    yAxes: [{ ticks: { beginAtZero: true } }]
                }
            }
        });
        result = null;
    });
}})(jQuery, companyName, ProfileHelpers);

这是侦听器，它在Chart.js下调用鼠标悬停功能：

function createEvent(type, chart, x, y, nativeEvent) {
    return {
        type: type,
        chart: chart,
        native: nativeEvent || null,
        x: x !== undefined? x : null,
        y: y !== undefined? y : null,
    };
}

function fromNativeEvent(event, chart) {
    var type = eventTypeMap[event.type] || event.type;
    var pos = helpers.getRelativePosition(event, chart);
    return createEvent(type, chart, pos.x, pos.y, event);
}

以下是.NET端的代码

public async Task<JsonResult> GetWorkOrderChartData(int targetId, TargetType targetType, int? problemId = null, DateTime? rangeStartDate = null, string search = null,
        int? tradeId = null)
    {
        JsonResult result = await JsonValidateLoginAsync(ModuleClaimTypes.Maintenance).ConfigureAwait(false);
        if (result != null)
        {
            return result;
        }

        try
        {
            // GetWorkOrderChartDataAsync calls a method in Service Class which extracts the data from DB according to the paramters passed. 
            return Json(await new MaintenanceWidgetReadService(DbContext, User)
                .GetWorkOrderChartDataAsync(new TargetInfo(targetId, targetType), problemId, search, rangeStartDate, tradeId)
                .ConfigureAwait(false));
        }
        catch (Exception ex)
        {
            await ex.LogAsync(HttpContext);
            return Json(false);
        }
    }

Answer 1

解决了我的悬停问题。这是由于另一个canava彼此重叠而发生的。

已删除旧画布并用新画布重新加载部分画布。

这里是我在JS中所做的工作的参考。

$(dateSelectors).click(function (event)
        {
            event.preventDefault();

            selectedDateLabel.innerHTML = this.innerHTML;
            selectedStartDate = this.getAttribute('data-wo-date');


            let canvas = $('#wo-chart');
            canvas.remove();
             $('#graph-container').append('<canvas id="wo-chart"></canvas>');



            search();
        });