Как настроить перетаскиваемый элемент, чтобы он имел правильное положение x и y ⇐ CSS

[Anonymous]

Я реализовал диаграмму js для построения двух кривых, обозначенных красной и синей линиями. Я хочу добавить ползунок (черную вертикальную линию), чтобы он всегда оставался в пределах двух кривых, и пользователь мог перемещать его влево и вправо от графика. когда пользователи сдвигают его влево или вправо, он сам регулирует высоту. Таким образом, взяв значения x и y нижнего графика и установив высоту путем вычитания y1 первого графика и y2 второго графика, он ведет себя так, как ожидалось. Вот мой код:

Код: Выделить всё

    // Initialize the draggable line
$(function() {
$("#draggable").draggable({
axis: "x",
containment: "#myChart",
drag: function(event, ui) {
const canvas = document.getElementById('myChart');
const ctx = canvas.getContext('2d');
const rect = canvas.getBoundingClientRect();
const chartLeft = rect.left;

const xPos = ui.position.left; // Position of the draggable line
const xValue = myChart.scales.x.getValueForPixel(xPos); // X value on the chart

// Find the nearest points on the datasets
const pYValue = getYValueAtX(xValue, myChart.data.datasets[0].data);
const sYValue = getYValueAtX(xValue, myChart.data.datasets[1].data);

const difference = pYValue && sYValue ? (pYValue - sYValue) : null;

// Update the tooltip with the current x, p, and s values
const tooltip = document.getElementById('tooltip');
tooltip.innerHTML = `X: ${xValue.toFixed(2)}
P: ${pYValue ? pYValue.toFixed(2) : 'N/A'}
S: ${sYValue ? sYValue.toFixed(2) : 'N/A'}
Difference: ${difference ? difference.toFixed(2) : 'N/A'}`;
tooltip.style.display = 'block';
tooltip.style.left = `${xPos + chartLeft + 10}px`;
tooltip.style.top = `${rect.top + 10}px`;

const xPixelPos = myChart.scales.x.getPixelForValue(xValue); // Get pixel for xValue
const yPixelPos = myChart.scales.y.getPixelForValue(pYValue); // Get pixel for sYValue

const y1PixelPos = myChart.scales.y.getPixelForValue(sYValue); // Get pixel for sYValue

const height = Math.abs(yPixelPos - y1PixelPos);

const blackLine = document.getElementById('draggable');
blackLine.style.left = `${xPixelPos}px`; // Set the x position of the div
blackLine.style.top = `${yPixelPos}px`;
blackLine.style.height = `${height}px`;

console.log("xpixel:", xPixelPos, "ypixel:", yPixelPos, "y1pixel:", y1PixelPos, "height:", height);

draggableElement.style.height = `${newHeight}px`; // Set height

}
});
});

// Helper function to find Y value for a given X in the dataset
function getYValueAtX(x, data) {
// Find the nearest point in the data for the given x
const point = data.find(p => p.x >= x);
return point ? point.y : null;
}

function interpolateData(data) {
// Create arrays to store the new interpolated p and s values
let interpolatedData = [];

for (let i = 0; i < data.length; i++) {
const currentPoint = data[i];
const nextPoint = data[i + 1];

// Check if "p" or "s" is missing and interpolate if necessary
if (currentPoint.p === "" && nextPoint) {
// Linear interpolation for 'p'
const prevPoint = data[i - 1];
if (prevPoint && nextPoint.p !== "") {
currentPoint.p = prevPoint.p + ((nextPoint.x - prevPoint.x) * (nextPoint.p - prevPoint.p)) / (nextPoint.x - prevPoint.x);
}
}

if (currentPoint.s === "" && nextPoint) {
// Linear interpolation for 's'
const prevPoint = data[i - 1];
if (prevPoint && nextPoint.s !== "") {
currentPoint.s = prevPoint.s + ((nextPoint.x - prevPoint.x) * (nextPoint.s - prevPoint.s)) / (nextPoint.x - prevPoint.x);
}
}

// Push the currentPoint to the interpolatedData
interpolatedData.push(currentPoint);
}

return interpolatedData;
}

// AJAX function to fetch JSON data
function fetchJSONFile(filePath, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', filePath, true);
xhr.responseType = 'json';
xhr.onload = function() {
if (xhr.status === 200) {
const interpolatedData = interpolateData(xhr.response);
callback(interpolatedData);
} else {
console.error('Failed to load JSON file.');
}
};
xhr.send();
}

// Callback to process the data and plot the chart
function plotChart(jsonData) {
const pData = jsonData
.filter(item => item.p !== "")
.map(item => ({
x: item.x,
y: item.p
}));
const sData = jsonData
.filter(item =>  item.s !== "")
.map(item => ({
x: item.x,
y: item.s
}));

// Chart.js configuration
const ctx = document.getElementById('myChart').getContext('2d');
myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{
label: 'p Values',
data: pData,
borderColor: 'blue',
fill: false,
tension: 0.1,
pointRadius: 0,
showLine: true
},
{
label: 's Values',
data: sData,
borderColor: 'red',
fill: false,
tension: 0.1,
pointRadius: 0,
showLine: true
}
]
},
options: {
scales: {
x: {
type: 'linear',
position: 'bottom',
title: {
display: true,
text: 'X Axis'
}
},
y: {
title: {
display: true,
text: 'Y Axis'
}
}
}
}
});
}

// Fetch and plot the chart using AJAX
fetchJSONFile('https://www.sagarrawal.com.np/csvjson.json', plotChart);

Код: Выделить всё

    #chart-container {
width: 50%;
height: 90%;
position: relative;
}

canvas {
background-color: white;
}

/* Draggable vertical line */
#draggable {
position: absolute;
width: 2px;
height: 100%;
background-color: black;
z-index: 10;
cursor: pointer;
}

/* Tooltip to show values */
#tooltip {
position: absolute;
background-color: rgba(0, 0, 0, 0.75);
color: white;
padding: 5px;
border-radius: 3px;
font-size: 12px;
display: none;
z-index: 20;
}

Код: Выделить всё

Он запускается и достигает своих целей, но с ошибкой, вызванной этой строкой
'draggableElement.style. высота = ${newHeight}px;' , что понятно, поскольку оно не было определено нигде в коде, поэтому, когда я удаляю линию, ползунок черной линии появляется поверх графика за пределами двух графиков. Но только сохраняя его, график ведет себя так, как ожидалось, и когда перетаскиваемая черная линия появляется внутри двух графиков. поэтому, хотя я получаю результаты так, как хочу, но не могу понять, почему удаляю приведенную выше строку, моя диаграмма не работает должным образом.


Подробнее здесь: https://stackoverflow.com/questions/791 ... y-position