Высокопроизводительная кроссплатформенная библиотека биржевых диаграмм на основе холста — clchart

внешний интерфейс Апплет WeChat HTML Canvas React Native

Что такое 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

китайский документ

English docs

HTML5 DemoОпыт можно открыть отдельно на мобильных телефонах и ПК.

React Native Demo

Wechat applet demo