快速上手

安装

通过module的方式安装

# 注意，需要先获取权限才能访问以下私有模块
npm install @aicoin/chart-core
yarn add @aicoin/chart-core
pnpm i @aicoin/chart-core

单独引入

<!-- 注意，需要先获取权限才能访问以下私有模块 -->
<script type="text/javascript" src="https://cdn.aicoin.com/xx/dist/aichart.min.js">

创建图表

有两种创建图表实例的方式

1. 实例模式，通过类新建实例。
2. 工厂模式，通过Factory类创建画线实例。

Class模式

// UMD
import Chart from '@aicoin/chart-core'

// 通过 chart实例引入
const container = document.querySelector('#container');
const chart = new Chart(container, 'chartKey', {
  symbol: 'foo', // 标的key
  period: 60 * 60 * 24 * 365, // 周期
});

工厂模式创建的实例可以在工厂下获取和联动，例如 十字线同步，画线同步等。

工厂模式

// UMD
import { Factory as ChartFactory } from '@aicoin/chart-core'

// 工厂模式创建
const factory = new ChartFactory();
const chart = factory.createChart('chartKey', '#container', {
  symbol: 'foo',
  period: 60 * 60 * 24 * 365,
  subIndicators: ['VOLUME']
});

完整示例

React示例

import Chart, { Factory } from '@aicoin/chart-core'
import { useEffect, useRef } from 'react'

export default function Home() {
  const containerRef = useRef<HTMLDivElement | null>(null)
  useEffect(() => {
    if (!containerRef.current) {
      return;
    }
    // const chart = new Chart(containerRef.current, 'chart1', {
    //   symbol: 'abc',
    //   period: 60 * 60 * 24 * 365,
    // });

    // 创建图表实例
    const factory = new Factory();
    const chart = factory.createChart('chart1', containerRef.current, {
      symbol: 'abc',
      period: 60 * 60 * 24 * 365,
      subIndicators: ['VOLUME']
    });

    // 更新K线数据
    // [time, O, H, L, C,]
    chart.updateData([
      [1483200000000, 5711.14, 19875.85, 5100, 13284.18, 308732.95337366],
      [1514736000000, 13249.25, 17157.48, 3155.267, 3752.6515, 8850975.301570874],
      [1546272000000, 3754.1149, 13971.4, 3351.24, 7195.1, 20530944.303914502],
      [1577808000000, 7195.1, 29309, 3791.9, 28780.7, 17159498.04300918],
      [1609430400000, 28780, 69040.1, 27600, 47997, 6453593.41074589],
      [1640966400000, 47999, 48184.8, 15450, 16595, 3833701.81268352],
      [1672502400000, 16595, 31830, 16477.6, 28934.1, 2083462.03063194]
    ])
    // 调整图表大小
    chart.resize();

    return () => {
      // 卸载
      chart.destroy();
    }
  }, []);
  return (
    <main className={styles.main}>
      <div
        id="chart_container"
        ref={containerRef}
        style={{ width: 1200, height: 600}}
      />
    </main>
  )
}