6a9deffd44af0e4ba55fc3bec34de85a.png

本文由ScriptEcho平台提供技术支持

项目地址：传送门

基于JSChart实现Web端K线图

应用场景

在Web端展示股票或其他金融产品的K线图，提供可交互的K线分析功能，满足专业投资者的需求。

基本功能

• 加载K线数据并绘制K线图
• 提供丰富的技术指标，支持叠加指标和窗口指标
• 支持拖拽缩放、十字光标、右键菜单等交互功能
• 可通过外部接口动态切换股票代码和技术指标

功能实现步骤及关键代码分析

1. 加载必要资源

const jsUrls = [
  'https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js',
  // ... 其他JS资源URL
];
const styleUrls = [
  'webhqchart/jscommon/umychart.resource/css/tools.css',
  'webhqchart/jscommon/umychart.resource/font/iconfont.css',
];

await Promise.all(styleUrls.map((styleUrl) => loadStyle(styleUrl)));
await Promise.all(jsUrls.map((jsUrl) => loadJavascript(jsUrl)));

• 使用loadJavascript和loadStyle函数加载必要的JavaScript和CSS资源。
• 这些资源包括jQuery、JSChart库和umychart资源。

2. 初始化K线控件

function KLineChart(divKLine) {
  this.DivKLine = divKLine;
  this.Chart = JSChart.Init(divKLine, false, false); //把K线图绑定到一个Div上
  // ...
}

• 实例化KLineChart类，并传入要绑定的DOM元素（divKLine）。
• 使用JSChart库初始化K线图。

3. 配置K线图选项

this.Option = {
  Type: '历史K线图',
  // ...
  Symbol: 'if2312.SHFE',
  // ...
  KLine: {
    DragMode: 1, //拖拽模式 0=禁止拖拽 1=数据拖拽 2=区间选择
    Right: 0, //复权 0 不复权 1 前复权 2 后复权
    Period: 50500, //周期 0 日线 1 周线 2 月线 3 年线
    MaxRequestDataCount: 600, //数据个数
    // ...
  },
  // ...
};

• 配置K线图的各种选项，包括类型、股票代码、复权方式、周期、数据个数等。

4. 创建K线图

this.Create = function () {
  // ...
  this.Option.OnCreatedCallback = (chart) => {
    this.OnCreateHQChart(chart);
  };
  this.Option.NetworkFilter = (data, callback) => {
    this.NetworkFilter(data, callback);
  };
  this.Chart.SetOption(this.Option); //设置K线配置
};

• 设置OnCreatedCallback和NetworkFilter回调函数。
• OnCreatedCallback在K线图创建后触发，用于执行自定义操作。
• NetworkFilter用于过滤网络请求，可以拦截和修改请求数据。
• 调用SetOption方法设置K线图选项。

5. 自定义K线图事件处理

this.OnCreateHQChart = function (chart) {
  chart.AfterBindMainData = (name) => {
    this.AfterBindMainData(chart, name);
  };
};

this.NetworkFilter = function (data, callback) {
  console.log(`[KLineChart::NetworkFilter] ${data.Explain}`, data);
  // ...
};

this.AfterBindMainData = function (jsChart, name) {
  console.log('[AfterBindMainData]', name);
  // ...
};

• 定义OnCreateHQChart、NetworkFilter和AfterBindMainData方法。
• OnCreateHQChart在K线图绑定主数据后触发，用于执行自定义操作。
• NetworkFilter用于过滤网络请求，可以拦截和修改请求数据。
• AfterBindMainData在K线图绑定主数据后触发，用于执行自定义操作。

6. 绑定K线图到页面

window.$(function () {
  // ...
  var klineControl = new KLineChart(document.getElementById('kline'));
  // ...
});

• 在页面加载后，实例化KLineChart类，并绑定到指定的DOM元素（#kline）。

总结与展望

通过以上步骤，我们实现了基于JSChart库的Web端K线图功能。该K线图支持多种技术指标、交互功能和自定义事件处理。

未来，该K线图功能可以进一步拓展和优化：

• 优化性能，减少数据加载和渲染时间

• 增加更多技术指标和叠加指标

• 提供更丰富的交互功能，如趋势线、注释等

• 集成其他数据源，支持更多股票和金融产品

  更多组件：

id-51f8cf4cd6ae9903464db07df758464b.png

id-78de24382b39525d4c57f25a22539afa.png

获取更多Echos

本文由ScriptEcho平台提供技术支持

项目地址：传送门

微信搜索ScriptEcho了解更多