Как выровнять HTML-таблицу для настройки рисунка холста - PullRequest
0 голосов
/ 25 января 2019

Мне нужно создать пользовательский интерфейс (HTML 5) с двумя основными компонентами: настраиваемая диаграмма, нарисованная на холсте HTML 5; стол.

Суть в том, что график должен быть выровнен по таблице Если вы прокрутите таблицу по горизонтали, содержимое диаграммы также будет прокручиваться.

enter image description here

Одним из важных ограничений является то, что график очень настроен. Я не смогу использовать какой-либо существующий компонент диаграммы. Мне придется самому написать код и нанести его на холст.

Я пытаюсь понять, как это сделать. Как вызвать перерисовку на холсте во время прокрутки? Как узнать соответствующие координаты на холсте начала каждой ячейки таблицы? Как написать HTML / CSS для обоих компонентов, чтобы макет не разбивался на экранах разных размеров?

Я все еще планирую проект, и я довольно открыт, чтобы использовать любой фреймворк / язык.

Мне нужно немного света здесь.

Вы можете помочь?

Спасибо!

1 Ответ

0 голосов
/ 29 января 2019

Вы можете получить позицию прокрутки с помощью jQuery scrollLeft () и установить для функции перерисовки холста значение jquery scroll (), чтобы она обновлялась при каждом изменении позиции прокрутки.

table = $('#container')

updatePosition = () => {
  // Synchronize canvas here:
  repaintCanvas(table.scrollLeft());
}

table.scroll(updatePosition);

Вот демонстрационная версия JSFiddle: http://jsfiddle.net/4eg39bfm/5/

...