🚀 快速开始-HXKline

TIP

• 开始使用前，请保证环境满足要求，环境要求参阅：👉环境要求
• 由于组件涉及到数据请求，所以组件设置了组件锁以保证服务不会被滥用，开发时可使用测试授权，发布前请申请项目授权码！申请方式参阅：👉组件锁

1、获取 HXKline

HXKline 支持多种下载方式，你可以通过npm等包管理工具，也可以通过CDN获取。

使用 npm

npm set registry https://miniapp.10jqka.com.cn/npmserver/
# or
npm set registry http://112.90.157.23/

npm install @ths-m/HXKlineChart

npm install @ths-m/HXKline

使用 CDN

注意版本号 ⚠️

# 国内-hxkline
https://s.thsi.cn/cd/b2cweb-component-hxkline-front/index.[顶部HXKline版本号].js
# 国内-hxklinechart
https://s.thsi.cn/cd/b2cweb-component-hxklinechart-front/index.[顶部HXKlineChart版本号].js

# 海外-hxkline
https://cdn.ainvest.com/frontResources/s/b2cweb-component-hxkline-front/index.[顶部HXKline版本号].js
# 海外-hxklinechart
https://cdn.ainvest.com/frontResources/s/b2cweb-component-hxklinechart-front/index.[顶部HXKlineChart版本号].js

TIP

• CDN 只有正式版
• 完整cdn地址需要拼接版本号（版本号参考Header顶部标题栏）
• 例如：https://s.thsi.cn/cd/b2cweb-component-hxkline-front/index.1.1.6.js

2、引入

• npm或yarn

// 由于HXKline依赖于HXKlineChart，所以此处需要先引用HXKlineChart(会自动挂载到window)，如仍报错无法找到HXKlineChart，请使用`HXKline.setHXKlineChart(HXKlineChart)`方式关联
import * as HXKlineChart from '@ths-m/HXKlineChart';
// 仅支持具名引入
import * as HXKline from '@ths-m/HXKline';

// HXKline通常会自动关联HXKlineChart对象，当无法找到HXKlineChart时，请使用此方法手动关联
HXKline.setHXKlineChart(HXKlineChart);

3、授权

• HXKline 版本在 v1.1.0 之后(包含 beta 版本)使用此密钥

// 开发环境授权
const projectInfo = {
  id: 'hxkline-test',
  token:
    'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdXRob3JpemVyX25hbWVzcGFjZSI6ImNvbW1vbi1ocS1hZ2dyIiwibGljZW5zZWVfdHlwZSI6IkZST05UX0FQUCIsImxpY2Vuc2VlX25hbWVzcGFjZSI6Imh4a2xpbmUtdGVzdCJ9.W2sg74tpiTpTNv0X-94WkrXJqOJK8BgV4479GmDNOvY',
};
HXKline.verifyProjectPermission(projectInfo);

• 

  // ⚠ 以下测试密钥仅用于开发环境，请勿在生产环境使用！
  const projectInfo = {
  id:'test_id',
  name:'test_name',
  version:'test_version',
  projectKey = 'DW0/LBRJRhkVPSM1OzZrXWENVh8BWkkSRQkEPCUIE14TbXpqQBYWHhkhOUhocD0UMBdoBAEKAFleAlU1';
  };
  HXKline.verifyProjectPermission(projectInfo);

4、创建图表

• 创建分时图，其中initChart 参数说明详见：👉initChart

const stockInfo = {
  code: '300033',
  market: '33',
  data_class: 'trend',
  trade_class: 'intraday',
  trade_date: 0,
};
const trend = HXKline.initChart('trend', stockInfo, {}, trendChartCB);

• 创建 K 线图

const stockInfo = {
  code: '300033',
  market: '33',
  data_class: 'kline',
  time_period: 'day_1',
  trade_date: 0,
};
const trend = HXKline.initChart('kline', stockInfo, {}, klineChartCB);

• 注销

// 销毁图像
HXKline.dispose('kline', cb);

这样你的第一个图表就创建成功了。