Мобильная версия
Я работаю с кодом Ruby on Rails, У меня есть файл .erc, где он возвращает фрагмент html-кода, он выполняет foreach для массива, этот фрагмент кода выполняется 12 раз, так как графиков три и каждый из графиков содержит 4 точки, принадлежащие классу точек. Что мне нужно сделать, так это иметь возможность соединить 4 точки на графике, используя линию SVG, чего мне не удалось сделать.
CSS:
.val { ширина: 100%; положение: относительное; трансформировать: TranslateX(70%); z-индекс: 1; дисплей: гибкий; выровнять-элементы: по центру; граница: сплошная синяя толщиной 1 пиксель; .result-бар { граница: сплошная красная толщиной 1 пиксель; .точка { позиция: абсолютная; ширина: 10 пикселей; высота: 10 пикселей; граница-радиус: 100%; фон: $мягко-синий; преобразование: TranslateX (10 пикселей); } } п { позиция: абсолютная; верх: 50%; осталось: 50%; трансформировать: транслировать(-50%, -50%); } }здесь КОД RUBY И JS:
type );"> var puntos = document.querySelectorAll(".dot"); var svgElement = document.getElementById("_svg"); varchart = document.querySelector('.result-bar'); вар poschart =chart.getBoundingClientRect(); var line = document.createElementNS('http://www.w3.org/2000/svg', 'line'); если (puntos.length >= 2) { вар punto1 = puntos[0]; var pos1 = punto1.getBoundingClientRect(); вар punto2 = puntos[1]; вар pos2 = punto2.getBoundingClientRect(); если(поз1 && поз2) { var x1 = pos1.x + pos1.width/2 - poschart.x; var y1 = pos1.y + pos1.height/2 - poschart.y; var x2 = pos2.x + pos2.width/2 - poschart.x; var y2 = pos2.y + pos2.height / 2 - poschart.y; line.setAttribute('x1', x1); line.setAttribute('y1', y1); line.setAttribute('x2', x2); line.setAttribute('y2', y2); line.setAttribute('обводка', 'красный'); line.setAttribute('ширина штриха', '1'); svgElement.appendChild(строка); } } здесь Я уже выполнил слишком много реализаций, но не могу выполнить требование. Эта проблема существует уже 3 дня
