0.0.3 • Published 1 year ago

otter-chart v0.0.3

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

Otter-Chart

基于lightweight-charts开发的图表库,覆盖了lightweight-charts的所有能力,并基于lightweight-chartsAPI进行了一些扩展,使其更加适合在OtterTrade项目中使用。

安装

npm install otter-chart # or yarn add otter-chart or pnpm add otter-chart

使用

可在浏览器中直接引入,也可在webpack、vite等打包工具中引入。其中浏览器中直接引入时,会挂载到window.OtterChart对象上

基础能力

默认导出了lightweight-charts的所有能力,使用方式与lightweight-charts一致,只是将lightweight-charts替换为otter-chart即可。

二次开发能力

initChart:带有默认配置的图表初始化方法

csvToJson: 将csv数据转换为json数据

fileToJson:将csv格式的文件类型转换为json数据

数据格式类型

time时间类型为unix时间戳,单位为秒

历史数据类型:

//类型定义
export type ChartDataType = {
  close: number | string;
  high: number | string;
  low: number | string;
  open: number | string;
  time: UTCTimestamp;
  volume: number | string;
};

//示例值为:
 {
    close: '7185.88',
    high: '7195.52',
    low: '7183.0',
    open: '7195.36',
    time: 1577835000,
    volume: '696.1179999999999',
  },

交易数据类型

//类型定义
export type OrderDataType = {
  balance: number | string;
  drawdown: number | string;
  price: number | string;
  quantity: number | string;
  time: UTCTimestamp;
  type: 'BUY' | 'SELL';
};

//示例值为:
{
    balance: '664.04',
    drawdown: '36.79',
    price: '7081.79',
    quantity: '0.093',
    time: 1576479600,
    type: 'BUY',
}

使用示例

// webpack相关项目中使用
import { initChart } from 'otter-chart';
// initChart的首要参数为需要初始化的domId值或者dom实例
const { chart } = initChart('chart', {
  width: 1000,
  height: 350,
});
chart.setChartData(chartData);
chart.setOrderData(orderData);