Обзор
Графики акций в основном используются для отслеживания и визуализации цены акций за определенный период времени с использованием инструментов построения графиков и ранжирования. В этом блоге мы рассмотрим элементы биржевой диаграммы и то, как интегрировать элемент управления Syncfusion Stock Chart в ваше приложение JavaScript.
Что такое фондовая диаграмма?
Существует множество элементов, используемых в биржевой диаграмме для разных целей. Рассмотрим отдельные элементы и их назначение.
Выбор периода
Селектор периода позволяет вам выбирать предопределенные периоды времени, обычно дни, недели, месяцы, кварталы, полгода и годы, чтобы проверять тенденции для разных периодов времени перед инвестированием.
Область диаграммы
Область диаграммы визуализирует данные по акции. Здесь свечной график используется для представления цены открытия акции в начале дня, самой высокой и самой низкой цены в течение дня и цены закрытия в конце дня.
Селектор диапазона
Селектор диапазона позволяет вам выбирать диапазоны из большей коллекции, чтобы определить тенденции цены в пределах выбранного диапазона.
Ряд
Серия позволяет выбирать различные типы диаграмм для визуализации данных. График акций Syncfusion поддерживает следующие типы диаграмм:
- Линия и сплайн помогают визуализировать цену закрытия акции.
- Hilo — отображает максимальную и минимальную стоимость акций в течение определенных периодов времени.
- OHLC и свеча. Постройте график открытия, закрытия, максимума и минимума акций.
Индикаторы
Технические индикаторы используются для анализа прошлых и прогнозирования будущих рыночных тенденций на основе исторической цены, объема или открытого интереса. График акций Syncfusion поддерживает 10 различных типов индикаторов.
Объем
Объем запасов обычно ассоциируется с гистограммой. Чем выше значение столбца, тем больше людей участвует в акции в конкретный период времени.
Как интегрировать Syncfusion Stock Chart в веб-приложение
Давайте создадим биржевую диаграмму, чтобы визуализировать и сравнить цены акций AAPL. Элемент управления Stock Chart можно настроить в TypeScript следующим образом:
- Клонируйте начальный репозиторий Essential JS 2 для быстрого старта и настройте необходимый пакет в файле config.js.
"@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js"
2. Установите пакеты NPM с помощью следующей команды.
npm install
3. Добавьте элемент ввода HTML, который необходимо инициализировать, как компонент в файле index.html.
4. Инициализируйте компонент в файле ts, как показано в следующем коде.
import { StockChart } from '@syncfusion/ej2-charts';
// initialize stockchart component
let chart: StockChart = new StockChart();
// render initialized stock chart
chart.appendTo('#container');
Заполнение биржевой диаграммы данными
Теперь нам нужно заполнить данные об акциях AAPL на графике. Мы собираемся визуализировать данные с помощью свечного графика, поэтому импортируйте и внедрите CandleSeries в компонент Stock Chart с помощью метода StockChart.Inject.
import { StockChart } from '@syncfusion/ej2-charts';
import { StockChart, CandleSeries, DateTime } from '@syncfusion/ej2-charts';
StockChart.Inject(CandleSeries, DateTime);
Затем добавьте данные JSON для цены акций в свое приложение и назначьте их свойству dataSource в серии. Здесь используются данные об AAPL, и полный набор данных можно найти в образце.
let stockchartData: any[] = [{
x: new Date('2012-04-02'),
open : 85.9757,
high : 90.6657,
low : 85.7685,
close : 90.5257,
volume : 660187068
},
{
x: new Date('2012-04-09'),
open : 89.4471,
high : 92,
low : 86.2157,
close : 86.4614,
volume : 912634864
},
{
x: new Date('2012-04-16'),
open : 87.1514,
high : 88.6071,
low : 81.4885,
close : 81.8543,
volume : 1221746066
},
{
x: new Date('2012-04-23'),
open : 81.5157,
high : 88.2857,
low : 79.2857,
close : 86.1428,
volume : 965935749
},
{
x: new Date('2012-04-30'),
open : 85.4,
high : 85.4857,
low : 80.7385,
close : 80.75,
volume : 615249365
}];
let chart: StockChart = new StockChart({
series:[{
// dataSource for stockchart series
dataSource: stockchartData,
type: 'Candle'
}]
}, '#container);
Примечание. В этом примере мы экспортировали данные из службы и использовали их в образце. Вы можете напрямую получить данные из сервисов для построения графика через Менеджер данных.
После добавления серии диаграмма будет выглядеть так, как показано на следующем снимке экрана.
Как визуализировать данные об объеме с биржевой диаграммой
Вы можете анализировать как ценовое действие, так и объем одним взглядом, используя биржевую диаграмму. Поскольку мы собираемся отображать объем в отдельной строке, нам нужно настроить оси и строки диаграммы следующим образом.
let chart: StockChart = new StockChart({
rows : [{height : '30%'}, {height : '70%'}],
axes : [{
name: 'yaxis', opposedPosition: true, rowIndex: 1,
}],
series:[
{
// dataSource for stockchart series
dataSource: stockchartData,
type: 'Candle', yAxisName: 'yaxis'
},{
// dataSource for stockchart series
dataSource: stockchartData,
type: 'Column', yName: 'volume'
}
]
}, '#container);
Импортируйте и внедрите модуль ColumnSeries в биржевую диаграмму, поскольку мы собираемся визуализировать объемные данные с помощью ряда столбцов.
import { StockChart, CandleSeries, ColumnSeries } from '@syncfusion/ej2-charts';
StockChart.Inject(CandleSeries, ColumnSeries);
Появится свечной график объема, как показано на следующем снимке экрана.
Селектор периода и диапазона
Выбирайте и просматривайте данные за определенные периоды времени, используя предварительно определенные периоды времени и настраиваемые диапазоны в селекторе периодов. Вы можете определить свои собственные периоды времени, используя свойство periods на биржевой диаграмме. Селектор периода включает в себя параметры для добавления индикаторов, линий тренда и различных типов рядов, а также для экспорта биржевой диаграммы. Видимость селектора периода можно переключать с помощью свойства enablePeriodSelector. По умолчанию селектор периода будет включен.
let chart: StockChart = new StockChart({
periods: [
{ intervalType: 'Month', interval: 1, text: '1M' },
{ intervalType: 'Month', interval: 3, text: '3M' },
{ intervalType: 'Month', interval: 6, text: '6M' },
{ intervalType: 'Years', interval: 1, text: '1Y', selected: true },
],
}, '#container);
Вы можете отфильтровать диапазон данных для данных, которые необходимо визуализировать, используя селектор диапазона. Переключите видимость селектора диапазона с помощью свойства enableSelector. По умолчанию селектор диапазона будет включен.
Отслеживание данных о взаимодействии с графиком
Вы можете навести указатель мыши на любую область на диаграмме, чтобы отобразить стоимость акций компании с помощью всплывающих подсказок. Вы также можете увеличивать и уменьшать масштаб диаграммы с помощью колесика мыши для просмотра данных.
let chart: StockChart = new StockChart({
series:[
{
// dataSource for stockchart series
dataSource: stockchartData,
type: 'Candle'
}
],
tooltip: {
enable: true
},
crosshair: {
enable: true, lineType: 'Vertical'
}
}, '#container);
Импортируйте и вставьте модули всплывающей подсказки и перекрестия в биржевую диаграмму.
import { StockChart, CandleSeries, ColumnSeries, Tooltip, Crosshair } from '@syncfusion/ej2-charts';
StockChart.Inject(CandleSeries, ColumnSeries, Tooltip, Crosshair);
Добавить заголовок
Укажите соответствующий заголовок на диаграмме, чтобы предоставить быструю информацию о данных. Это можно сделать с помощью свойства title.
let chart: StockChart = new StockChart({
title: 'APPL Stock Price'
}, '#container);
Вывод
Мы надеемся, что вы найдете компонент Stock Chart удобным для пользователя, и с нетерпением ждем, когда вы попробуете его. Ссылку на скачивание установки Essential JS 2 вы можете найти на нашем сайте. Кроме того, вы можете проверить исходный график акций на GitHub. Пожалуйста, ознакомьтесь с нашими живыми демонстрациями в нашем образце браузера и функциями настройки в нашей документации.
Компонент JavaScript Stock Chart также доступен для фреймворков React, Angular, ASP.NET Core и MVC, созданных из их собственных библиотек TypeScript.
Если вы хотите отправить нам отзыв или задать какие-либо вопросы, пожалуйста, оставьте сообщение в разделе комментариев ниже или свяжитесь с нами через наш форум поддержки, Direct-Trac или портал обратной связи.
Если вам понравилась эта запись в блоге, мы думаем, вам понравятся и следующие бесплатные электронные книги!
Первоначально опубликовано на https://www.syncfusion.com 9 сентября 2019 г.
