前端可视化入门与实战 Canvas 图表篇：从 0 到 1 实现金融图表 K 线图

前端可视化入门与实战 - 谦宇 - 掘金小册

上文示例是 ECharts 官网的示例 K 线图，在我们平常金融图表的开发中一般不会使用 ECharts，我们会更偏向更专业的金融图表库 TradingView。

但为了带领大家快速实现 K 线图，我们将用 Canvas 来实现一个 ECharts 基础示例。该图表的核心难点在于区域动态渲染和交互逻辑。

为避免信息传递误差，在绘制之前我们得先来聊一聊 K 线图中相关的概念。

了解 K 线图

K 线图是一种用于展示金融市场价格走势的图表形式，常用于股票、期货、外汇等市场的技术分析。它由一根根垂直的线段和横向的矩形构成，如下图所示：

K 线图中的每根 K 线代表一段时间内的价格走势，通常是一天或一周。每根 K 线由四个价格点组成，分别是开盘价（Open）、最高价（High）、最低价（Low）和收盘价（Close）。这四个价格点决定了 K 线的形状和颜色。

K 线的主体部分是开盘价和收盘价之间的矩形，用来表示价格的涨跌情况