Несколько графиков с возможностью скалирования
 

Добрый вечер,

понимаю, что тема очень перекликается с https://javascript.ru/forum/dom-wind...licheniya.html но у меня немного своя специфика и я на распутии что пользовать.

Имею прибор, с него я могу запросить данные (за заданный промежуток времени). Данные - суть значения напряжений каких-то сенсоров. Динамический диапазон этих напряжений около миллиона, одно радует, что они все положительные.

Я хочу нарисовать все графики вместе, причем, чтоб браузер не крякнул, если там будет сразу миллион точек и 10 разных графиков напряжений и чтоб они были отскалированы во весь размер канваса, а юзер мышкой мог бы зумить этот график и отключать не нужные напряжения (их список тоже как-то надо отдельно отрисовать рядом с графиком).

Внутри прибора линукс, который по запросу данные и выплевывает, там я сам все программирую.

Вебом до этого специально не занимался, но простенькие html-css-js делал, да и мотивация очень большая быстро сделать.

Пожалуйста, посоветуйте, что взять, вижу, есть два решения, D3 и Chart.js.

Мои вопросы, скажите, пожалуйста,

1. если я скормлю 100 графиков каждый по миллиону точек, потянет ли хотя бы одна из этих D3 или Chart библиотек это нарисовать, а если нет, то сколько можно скармливать, чтоб летало?

2. если я таки у себя на приборе ограничу число точек на 1000, чтоб летало, какая библиотека (D3 или Chart) позволит зумить графики, чтоб после зума график автоматически скалировался?

3. стоит ли задуматься написать на вебассембли кусок такой скалировки на С, или ничего не ускорится?

Спасибо!

D3 - svg, chart.js - canvas. В случае множества деталей svg точно не вариант, т.к. каждая фигура тянет за собой DOM.
В случае canvas решения нужен просто фильтр который в зависимости от масштаба отфильтрует \ аппроксимирует входные значения, убрав те что (условно) впишутся в один пиксель. Мб в chart js даже встроенное что-такое есть, хз.

Скорее такое число деталей даже на Full HD не отразить, не говоря уже о меньших разрешениях, а значит аппроксимация с увеличением участков. И на svg довольно шустро работает такое.

laimas, ток для этого надо хорошенько себе мозги выкрутить и всё продумать. В случае с canvas можно на многое забить.
Не то чтобы это было правильно с абстрактной точки зрения, но мы живём в реальном мире.)

Спасибо большое за ответы!

в принципе наверное вопрос про миллион точек для меня не самый важный. Я сам чую, что ЖС на байткоде такие задачи не призвано решать, но понимать какие пределы возможности у этих или еще каких библиотек конечно хотелось бы.

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

Вот ОпенГЛ еще лет 20 назад у меня в реальном времени справлялся с этой задачей, правда после каждого скалирования надо было оси дорисовывать и из-за этого код был довольно громоздким.

Простите, меня пожалуйста, что такой глупый вопрос задаю, я реально в ЖС нуб, хотя в С и бекендах более-менее хорошо разбираюсь, и с радостью прислушаюсь к Вашим советам!

Спасибо!

Есть OpenGL для браузеров - это WebGL, основан на OpenGL ES, подмножестве OpenGL, где можно писать на шейдерах - GLSL.

Это контекст (режим) canvas-элемента. Там их два основных - 2d и webgl (2d/3d на аппаратном ускорении).

Если графическая библиотека использует WebGL, это упоминается, потому что преимущество. Но в Chart.js таких упоминаний нет, там обычный 2d режим.

Нужно что-то типа такого, есть пример на миллион, для некоммерческого использования бесплатно.

Спасибо большое за ответ!

Примеры впечатлили - примерно то, что надо, спасибо!

С ОпенГЛ на ты, я на нем много раньше писал, посмотрел синтаксис ВебГЛ - он практически такой же.

Скажите, пожалуйста, правильно ли я понимаю, что если я сам воткну графику на ВебГЛ, то это однозначно будет летать на всех платформах включая мобильники даже на 1М точках, в отличие от всего остального, тем более, что мне скалировку не сильно сложную надо и оно похоже на раз реализуется?

Спасибо, Rise! Буду пробовать!