Lightweight Chart:用于创建交互式金融图表的库,以其小巧和高速著称

Lightweight Chart:用于创建交互式金融图表的库,以其小巧和高速著称

Lightweight Chart 是一个用于创建交互式金融图表的库,以其小巧和高速著称。Lightweight Chart 的体积接近静态图像,如果你想要取代静态图像图表,将它们替换为交互式图表,使用这个库可以有效减小网页的大小。

图表示例

反转价格比例

Lightweight Chart:用于创建交互式金融图表的库,以其小巧和高速著称

价格和成交量

Lightweight Chart:用于创建交互式金融图表的库,以其小巧和高速著称

价格线

Lightweight Chart:用于创建交互式金融图表的库,以其小巧和高速著称

添加标记

Lightweight Chart:用于创建交互式金融图表的库,以其小巧和高速著称

提示

Lightweight Chart:用于创建交互式金融图表的库,以其小巧和高速著称

两个刻度

Lightweight Chart:用于创建交互式金融图表的库,以其小巧和高速著称

水印

Lightweight Chart:用于创建交互式金融图表的库,以其小巧和高速著称

入门

安装

npm install --save lightweight-charts

创建图表

导入库:

import { createChart } from 'lightweight-charts';

createChart是创建图表的入口点。可以使用它来创建所需数量的图表:

import { createChart } from 'lightweight-charts';

// ...

// somewhere in your code
const firstChart = createChart(document.getElementById('firstContainer'));
const secondChart = createChart(document.getElementById('secondContainer'));

该函数的结果是一个IChartApi对象,需要使用它来处理图表实例。

创建数据系列

要创建具有所需类型的系列,需要使用适当的方法IChartApi。它们都具有相同的命名add<type>Series,其中<type>是要创建的系列的类型,包括:

  • 面积
  • 柱状
  • 基线
  • 蜡烛
  • 直方图
  • 折线
import { createChart } from 'lightweight-charts';

const chart = createChart(container);

const areaSeries = chart.addAreaSeries();
const barSeries = chart.addBarSeries();
const baselineSeries = chart.addBaselineSeries();
// ... and so on

注意:数据系列不能从一种类型转换为另一种类型,因为不同的类型具有不同的数据和选项类型。
https://tradingview.Github.io/lightweight-charts/docs/series-types

设置和更新数据

创建图表和系列后,就可以为该数据系列设置数据了。注意,无论类型如何,API 调用都是相同的。使用ISeriesApi.setData方法设置数据:

const chartOptions = { layout: { textColor: 'black', background: { type'solid', color: 'white' } } };
const chart = createChart(document.getElementById('container'), chartOptions);
const areaSeries = chart.addAreaSeries({
    lineColor: '#2962FF', topColor: '#2962FF',
    bottomColor: 'rgba(41, 98, 255, 0.28)',
});
areaSeries.setData([
    { time: '2018-12-22', value: 32.51 },
    { time: '2018-12-23', value: 31.11 },
    { time: '2018-12-24', value: 27.02 },
    { time: '2018-12-25', value: 27.32 },
    { time: '2018-12-26', value: 25.17 },
    { time: '2018-12-27', value: 28.89 },
    { time: '2018-12-28', value: 25.46 },
    { time: '2018-12-29', value: 23.92 },
    { time: '2018-12-30', value: 22.68 },
    { time: '2018-12-31', value: 22.67 },
]);

const candlestickSeries = chart.addCandlestickSeries({
    upColor: '#26a69a', downColor: '#ef5350', borderVisible: false,
    wickUpColor: '#26a69a', wickDownColor: '#ef5350',
});
candlestickSeries.setData([
    { time: '2018-12-22', open: 75.16, high: 82.84, low: 36.16, close: 45.72 },
    { time: '2018-12-23', open: 45.12, high: 53.90, low: 45.12, close: 48.09 },
    { time: '2018-12-24', open: 60.71, high: 60.71, low: 53.39, close: 59.29 },
    { time: '2018-12-25', open: 68.26, high: 68.26, low: 59.04, close: 60.50 },
    { time: '2018-12-26', open: 67.71, high: 105.85, low: 66.67, close: 91.04 },
    { time: '2018-12-27', open: 91.04, high: 121.40, low: 82.70, close: 111.40 },
    { time: '2018-12-28', open: 111.51, high: 142.83, low: 103.34, close: 131.25 },
    { time: '2018-12-29', open: 131.33, high: 151.17, low: 77.68, close: 96.43 },
    { time: '2018-12-30', open: 106.33, high: 110.20, low: 90.39, close: 98.10 },
    { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
]);

chart.timeScale().fitContent();
Lightweight Chart:用于创建交互式金融图表的库,以其小巧和高速著称

更新数据可以使用方法ISeriesApi.update。它可以更快地更新最后一个数据项或添加新数据项,而不会影响性能。

import { createChart } from 'lightweight-charts';

const chart = createChart(container);

const areaSeries = chart.addAreaSeries();
areaSeries.setData([
    // ... other data items
    { time: '2018-12-31', value: 22.67 },
]);

const candlestickSeries = chart.addCandlestickSeries();
candlestickSeries.setData([
    // ... other data items
    { time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 111.26 },
]);

// sometime later

// update the most recent bar
areaSeries.update({ time: '2018-12-31', value: 25 });
candlestickSeries.update({ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 112 });

// creating the new bar
areaSeries.update({ time: '2019-01-01', value: 20 });
candlestickSeries.update({ time: '2019-01-01', open: 112, high: 112, low: 100, close: 101 });

传送门

GitHub:https://github.com/tradingview/lightweight-charts


-END-



原文始发于微信公众号(开源技术专栏):Lightweight Chart:用于创建交互式金融图表的库,以其小巧和高速著称

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/166492.html

(0)

及时掌握行业动态,欢迎加入几百人的后端技术交流群:


相关推荐

发表回复

登录后才能评论