Как выровнять HTML-таблицу для настройки рисунка холста

Question

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

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

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

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

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

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

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

Спасибо!

Answer 1

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

table = $('#container')

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

table.scroll(updatePosition);

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