Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.09.2020, 22:25
Аспирант
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 90

Несколько графиков с возможностью скалирования
Добрый вечер,

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

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

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

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

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

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

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

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

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

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

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 20.09.2020, 23:53
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,746

D3 - svg, chart.js - canvas. В случае множества деталей svg точно не вариант, т.к. каждая фигура тянет за собой DOM.
В случае canvas решения нужен просто фильтр который в зависимости от масштаба отфильтрует \ аппроксимирует входные значения, убрав те что (условно) впишутся в один пиксель. Мб в chart js даже встроенное что-такое есть, хз.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 21.09.2020, 00:08
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Aetae
В случае множества деталей svg точно не вариант
Скорее такое число деталей даже на Full HD не отразить, не говоря уже о меньших разрешениях, а значит аппроксимация с увеличением участков. И на svg довольно шустро работает такое.
Ответить с цитированием
  #4 (permalink)  
Старый 21.09.2020, 00:49
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,746

laimas, ток для этого надо хорошенько себе мозги выкрутить и всё продумать. В случае с canvas можно на многое забить.
Не то чтобы это было правильно с абстрактной точки зрения, но мы живём в реальном мире.)
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 21.09.2020, 01:03
Аспирант
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 90

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

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

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

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

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

Спасибо!
Ответить с цитированием
  #6 (permalink)  
Старый 21.09.2020, 08:08
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,481

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

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

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

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

Последний раз редактировалось Rise, 21.09.2020 в 08:50.
Ответить с цитированием
  #7 (permalink)  
Старый 21.09.2020, 09:05
Аспирант
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 90

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

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

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

Скажите, пожалуйста, правильно ли я понимаю, что если я сам воткну графику на ВебГЛ, то это однозначно будет летать на всех платформах включая мобильники даже на 1М точках, в отличие от всего остального, тем более, что мне скалировку не сильно сложную надо и оно похоже на раз реализуется?
Ответить с цитированием
  #8 (permalink)  
Старый 21.09.2020, 09:53
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,481

Was-Ja,
Не знаю насчет летать, 3D графику как-то тянет, чего-то быстрее для графики в браузере всё равно нет.
Ответить с цитированием
  #9 (permalink)  
Старый 21.09.2020, 11:38
Аспирант
Отправить личное сообщение для Was-Ja Посмотреть профиль Найти все сообщения от Was-Ja
 
Регистрация: 20.09.2020
Сообщений: 90

Спасибо, Rise! Буду пробовать!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление в input несколько значений snut8 jQuery 2 06.06.2018 17:34
Как создать несколько графиков Column Charts на одной странице? maks777 Общие вопросы Javascript 10 15.06.2016 12:12
Как создать несколько графиков GoogleCharts на одной странице? Sanu0074 Общие вопросы Javascript 10 23.02.2015 19:21
При повторении несколько раз animate - рассинхрон... Petja jQuery 4 21.05.2013 11:58
Построение графиков на JS или Flash StingMU Работа 3 05.06.2011 21:11