🚀 快速开始-仅使用Chart组件绘图
TIP
- 仅使用chart组件意味着需要自行实现数据的获取和处理，以及与图表的数据层面交互。
- 开始使用前，请保证环境满足要求，环境要求参阅：👉环境要求
1、获取 HXKLineChart
HXKLineChart 支持多种下载方式，你可以通过npm等包管理工具，也可以通过CDN获取。
使用 npm
bash
npm set registry https://miniapp.10jqka.com.cn/npmserver/
# or
npm set registry http://112.90.157.23/
npm install @ths-m/HXKlineChart使用 CDN
注意版本号⚠️
bash
# 国内
https://s.thsi.cn/cd/b2cweb-component-hxklinechart-front/index.[顶部HXKlineChart版本号].js
# 海外
https://cdn.ainvest.com/frontResources/s/b2cweb-component-hxklinechart-front/index.[顶部HXKlineChart版本号].jsTIP
- CDN 只有正式版
- 完整cdn地址需要拼接版本号（版本号参考Header顶部标题栏）
- 例如：https://s.thsi.cn/cd/b2cweb-component-hxklinechart-front/index.2.0.17.js
2、创建第一个图表
2.1、在npm或yarn等包管理工具的项目中创建
组件仅支持具名引入（命名引入）。
javascript
// 命名导出，直接引用组件内部成员
import { init } from '@ths-m/HXKlineChart';
// or
import * as HXKlineChart from '@ths-m/HXKlineChart';
// 初始化图表
const chart = init(`${domId}`);
// 默认导出
const chart = HXKlineChart.init(`${domId}`);
// 为图表添加数据
chart.applyNewData([
{ close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
{ close: 4977.33, high: 4979.94, low: 4971.34, open: 4973.2, timestamp: 1587660060000, volume: 194 },
{ close: 4977.93, high: 4977.93, low: 4974.2, open: 4976.53, timestamp: 1587660120000, volume: 197 },
{ close: 4966.77, high: 4968.53, low: 4962.2, open: 4963.88, timestamp: 1587660180000, volume: 28 },
{ close: 4961.56, high: 4972.61, low: 4961.28, open: 4961.28, timestamp: 1587660240000, volume: 184 },
{ close: 4964.19, high: 4964.74, low: 4961.42, open: 4961.64, timestamp: 1587660300000, volume: 191 },
{ close: 4968.93, high: 4972.7, low: 4964.55, open: 4966.96, timestamp: 1587660360000, volume: 105 },
{ close: 4979.31, high: 4979.61, low: 4973.99, open: 4977.06, timestamp: 1587660420000, volume: 35 },
{ close: 4977.02, high: 4981.66, low: 4975.14, open: 4981.66, timestamp: 1587660480000, volume: 135 },
{ close: 4985.09, high: 4988.62, low: 4980.3, open: 4986.72, timestamp: 1587660540000, volume: 76 },
]);2.2、在直接通过 script 标签引入的项目中创建
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="keywords" content="快速开始" />
<meta name="description" content="快速开始" />
<title>快速开始</title>
</head>
<body>
<div id="chart" style="width:600px;height:600px"></div>
<script>
window.onload = function () {
// 初始化图表
var chart = HXKlineChart.init('chart');
// 为图表添加数据
chart.applyNewData([
{ close: 4976.16, high: 4977.99, low: 4970.12, open: 4972.89, timestamp: 1587660000000, volume: 204 },
{ close: 4977.33, high: 4979.94, low: 4971.34, open: 4973.2, timestamp: 1587660060000, volume: 194 },
{ close: 4977.93, high: 4977.93, low: 4974.2, open: 4976.53, timestamp: 1587660120000, volume: 197 },
{ close: 4966.77, high: 4968.53, low: 4962.2, open: 4963.88, timestamp: 1587660180000, volume: 28 },
{ close: 4961.56, high: 4972.61, low: 4961.28, open: 4961.28, timestamp: 1587660240000, volume: 184 },
{ close: 4964.19, high: 4964.74, low: 4961.42, open: 4961.64, timestamp: 1587660300000, volume: 191 },
{ close: 4968.93, high: 4972.7, low: 4964.55, open: 4966.96, timestamp: 1587660360000, volume: 105 },
{ close: 4979.31, high: 4979.61, low: 4973.99, open: 4977.06, timestamp: 1587660420000, volume: 35 },
{ close: 4977.02, high: 4981.66, low: 4975.14, open: 4981.66, timestamp: 1587660480000, volume: 135 },
{ close: 4985.09, high: 4988.62, low: 4980.3, open: 4986.72, timestamp: 1587660540000, volume: 76 },
]);
};
</script>
</body>
</html>这样你的第一个图表就创建完成了。
📚 chart 绘图所需数据结构
图表所需要的数据必须是固定格式。通过图表实例 API applyNewData(dataList, more)，applyMoreData(dataList, more)和updateData(data)来和图表进行数据交互。
typescript
{
// 时间戳，毫秒级别，必要字段
timestamp: number
// 开盘价，必要字段
open: number
// 收盘价，必要字段
close: number
// 最高价，必要字段
high: number
// 最低价，必要字段
low: number
// 昨收价，非必须字段
pre: number
// 成交量，非必须字段
volume: number
// 成交额，非必须字段，如果需要展示技术指标'EMV'和'AVP'，则需要为该字段填充数据。
turnover: number
}