Что такое ClChart?
ClChartЭто простой, высокопроизводительный и кросс-платформенный проект с открытым исходным кодом для визуализации биржевых данных, основанный на холсте. Поддержка ПК, веб-приложений иReact Nativeа такжеWeexи другие платформы. существуетReact Nativeа такжеWeexПолная адаптация к проектам с открытым исходным кодомGCanvas, легко использоватьGCanvasчтобы ваши приложения имели встроенные возможности рисования на Android и ios.
Зачем вам ClChart
Среди существующих библиотек с открытым исходным кодом есть много очень хороших библиотек диаграмм с открытым исходным кодом, общие библиотеки диаграмм включаютchartjs,echart,highchartИ т. д., эти библиотеки диаграмм имеют очень полные типы диаграмм и мощные возможности рисования и скорость, но, поскольку эти проекты должны быть универсальными, нам нужно расширяться при рисовании рыночных торговых диаграмм ценных бумаг. Библиотеки диаграмм, характерные для ценных бумаг, таких как акции, включают:techanjsа такжеhighcharts/highstockи другие проекты, эти библиотеки диаграмм сделали очень профессиональную обработку и оптимизацию чертежей, но они основаны наsvg
рисовать. У нас есть проблемы с производительностью при графическом отображении больших объемов данных и работе с кроссплатформенными,
Ниже приведено сравнение К-линий графиков типов акций, составленных каждой галереей в процессе использования.
Следующие сравнения основаны на сравнении способности этих библиотек диаграмм рисовать графики K-линий для типов ценных бумаг, а данные являются субъективными и эмпирическими суждениями.
chartjs | echart | techanjs | highchart | clchart | |
---|---|---|---|---|---|
элементы рисования | canvas | canvas & svg | svg | svg | canvas |
Простой в использовании | ☆☆☆☆☆ | ☆☆☆ | ☆☆☆☆ | ☆☆☆☆ | ☆☆☆☆☆ |
скорость рисования | ☆☆☆☆☆ | ☆☆☆ | ☆☆ | ☆☆ | ☆☆☆☆☆ |
Расширяемость | ☆☆☆ | ☆☆☆☆ | ☆☆☆☆ | ☆☆☆☆ | ☆☆☆☆☆ |
Перекрестная платформа | ☆☆☆ | ☆☆☆ | ☆☆ | ☆ | ☆☆☆☆☆ |
Поэтому нам срочно нужна библиотека стоковых иконок с высокой производительностью, кроссплатформенностью и простотой в использовании.
В существующей библиотеке значков React Native вы можете загружать html-файлы через веб-просмотр, используя
window.document.addEventListener('message', function(e) {})
так же какwindow.postMessage
Для завершения html и React Natve для общения и рисования, но в процессе фактического использования на некоторых устройствах Android с низкой производительностью, особенно на системе Android с версией Android менее 4.4, производительность при рисовании больших диаграмм данных и взаимодействии с пользователем особенно плохая , часто заикается, и могут быть такие проблемы, как медленная загрузка.
Цели проектирования ClChart
использоватьcanvas
разрабатыватьэффективный,КроссплатформенностьизПрофессиональная библиотека биржевых графиков 📈
Совместим сGCanvasкоторый предоставилcanvas
интерфейс, реализованный вReact Nativeа такжеWeexОн может создавать собственный рисунок и может быть расширен по горизонтали в виде плагинов для различных систем формул на фондовом рынке.Для пользователей с особыми потребностями он может предоставить возможность настраивать плагины и структуры данных.
Разработка и внедрение ClChart
Создайте среду разработки
- [x] Реализовать спецификацию кода с помощью eslint
- [x] Используйте webpack для реализации упаковки кода
- [х] написать примерdemo
- [ ] Написание тестов кода с использованием karma и mocha (в процессе...)
Двухслойный холст, разделение основного и дополнительного слоев, эффективный рисунок
в исследованияхtradingviewПри рисовании программ мы обнаружили, что для того, чтобы добиться быстрой перерисовки вспомогательных линий, таких как перекрестие, они используют двойные слоиcanvas
Разделение рисования перекрестия (например, вспомогательных линий) и основного слоя значительно сокращает избыточные вычисления рисования, вызванные быстрым перемещением перекрестия. сделать в более низкой версииandroid
Плавный пользовательский интерфейс на мобильных устройствах и в веб-приложениях
Расширяемый уровень данных
ClChart
Реализовать независимый уровень данных, который может предварительно обрабатывать данные, кэшировать функцию и передавать данные через поле.FIELD
Определяйте и читайте, пользователи могут легко настраивать поля данных для быстрой интеграции с существующими данными.
система пользовательских формул
ClChart
Поддержка системы пользовательских формул, как разработчики, так и пользователи могут настраивать формулы для рисования во время использования.
плагин
ClChart
Поддержка подключаемого модуля пользовательского чертежа, теперь у подключаемого модуля есть тип метки данных
Пример
mobile web
pc web
Апплеты
react native
Адрес проекта ClChart, документация и тестовые примеры
адрес проекта clchart:github
HTML5 DemoОпыт можно открыть отдельно на мобильных телефонах и ПК.