1) У меня есть веб-сайт, на котором пользователь может фильтровать значения из раскрывающегося списка, исходя из того, что данные вызываются для отображения на графике (используется диаграмма JS).
На этом этапе Код вызывает функцию JavaScript, в которой передаются значения (метки и значения осей x, y и т. д. c). Затем пользователь может навести курсор мыши (внутренний вызов функции из диаграммы. js) на график и получить значения в виде всплывающего окна.
2) Затем, когда пользователь выбирает какое-либо другое значение из раскрывающегося списка, и затем снова наведите курсор мыши на координаты, чтобы увидеть всплывающие значения, график вернется к старым данным (1-ое значение в раскрывающемся списке - 2019) на несколько секунд и вернется к своим исходным данным (в настоящее время передается из выпадающего списка - 2020).
Вопрос 1. Как он может передавать старые данные, даже если я не сохраняю их в JSON или готовлю ie или что-то еще.
Примечание : Я проверил свой "console.log", какие значения передаются из выпадающего списка -> что правильно. Сохранял точку отладки, которая сообщает мне текущие значения набора данных, которые передаются в граф -> которые являются правильными, не передаются два значения набора данных.
Вопрос 2. Это проблема с плагином Chart. JS ? Поскольку в моем JS я не вызываю никаких событий при наведении курсора мыши.
Если да, то как мне это исправить?
Вопрос 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);
}
}