带着canvas去流浪系列之五 绘制K线图
【摘要】 用canvas原生API实现百度Echarts
示例代码托管在:http://www.github.com/dashnowords/blogs
一. 任务说明
使用原生canvasAPI
绘制K线图。(截图以及数据来自于百度Echarts官方示例库【查看示例链接】)。
二. 重点提示
K线图最常见的是在金融市场,尤其是股市中,它的绘制算法和表达的意思是直接相关的:
一般一个数据点包含
开盘价
,收盘价
,当日最高价
,当日最低价
4个数据点。当
开盘价
低于收盘价
时,当天为涨价,则图形为红色,反之则为绿色。图形中间的细线是
当日最高价
和当日最低价
之间的连线。图形中的矩形是在
开盘价
和收盘价
之间的范围。
了解了上述基本知识,K线图的绘制和折线图其实并没有太大区别,按部就班去绘制就好了。如果仔细观察Echarts
官方提供的示例会发现图例中还有 MA5
,MA10
这样的图例标记,这里其实指的是N天的移动平均值Moving Average N,是减小数据波动性展示其宏观规律的常用方法之一,示例中的MA5
就是指依次将源数据中每5个点的值求平均值作为当前点的数据(至于5个点是从当前点开始算,还是从当前点结束都是可以的)。
三. 示例代码
实现难度较低,本文不再赘述。
/*数据点来自于百度Echarts官方示例库
* 每个数据点意义:[日期,开盘(open),收盘(close),最低(lowest),最高(highest)]
* 例如: ['2013/2/7', 2430.69,2418.53,2394.22,2433.89],
*//**
* 绘制数据
*/
function drawData(options) {let data = options.data;let xLength = options.chartZone[2] - options.chartZone[0];let c;//记录当前绘制点的颜色let gap = xLength / options.xAxisLabel.length;let activeX = 0;//记录绘制过程中当前点的坐标let activeY = 0;//记录绘制过程中当前点的y坐标context.strokeWidth = 2;context.beginPath();context.moveTo(options.chartZone[0],options.chartZone[3]);//先将起点移动至0,0坐标for(let i = 0; i < data.length; i++){//获取绘图颜色c = getColor(data[i]);context.strokeWidth = 1;context.strokeStyle = context.fillStyle = c;//计算绘制中心点x坐标activeX = options.chartZone[0] + (i + 1) * gap;//绘制最高最低线;context.beginPath();context.moveTo(activeX,transCoord(data[i][2]));context.lineTo(activeX,transCoord(data[i][3]));context.closePath();context.stroke();//绘制开盘收盘矩形if (data[i][0] >= data[i][1]) { context.fillRect(activeX - 5 , transCoord(data[i][0]) , 10, transCoord(data[i][1]) - transCoord(data[i][0]));} else{context.fillRect(activeX - 5 , transCoord(data[i][1]) , 10, transCoord(data[i][0]) - transCoord(data[i][1]));}}}//根据K线图的数据中开盘价和收盘价计算绘图颜色
function getColor(data) {return data[0] >= data[1] ? '#1abc9c' : '#DA5961';
}//从可视坐标系坐标转换为canvas坐标系坐标
function transCoord(coord) {return options.chartZone[3] - (options.chartZone[3] - options.chartZone[1])*(coord - options.yMin) / (options.yMax - options.yMin);
}
浏览器中可查看效果:
demo.rar
作者:大史不说话
带着canvas去流浪系列之五 绘制K线图相关推荐
- 带着canvas去流浪系列之七 绘制水球图
[摘要] 用原生canvasAPI实现百度echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- 带着canvas去流浪系列之四 绘制散点图
[摘要] 用原生canvasAPI实现百度Echarts图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI ...
- 带着canvas去流浪系列之六 绘制雷达图
[摘要] 用canvas原生API实现百度Echarts基本图表. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvas ...
- 带着canvas去流浪系列之三 绘制饼图
一. 任务说明 使用原生canvasAPI绘制饼图(南丁格尔玫瑰). 二. 重点提示 南丁格尔玫瑰图的画法有很多种,Echarts中提供的以半径或面积两种不同模式,本文中以面积比例画法为例,绘制算法如 ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- 带着canvas去流浪系列之八 碰撞
[摘要] canvas动画-碰撞仿真 示例代码托管在:http://www.github.com/dashnowords/blogs 经过前面章节相对枯燥的练习,相信你已经能够上手canvas的原生A ...
- 带着canvas去流浪系列之一:绘制柱状图
[摘要] 学习使用canvasAPI来实现数据可视化. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制柱 ...
- 带着canvas去流浪系列之九 粒子动画
[摘要] canvas实现粒子动画 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 粒子特效 粒子特效一般指密集点阵效果,它并不是canvas独有 ...
- python画k线图_小白学Python(14)——pyecharts 绘制K线图 Kline/Candlestick
Kline-基本示例 from pyecharts import options as opts from pyecharts.charts import Kline data = [ [2320.2 ...
最新文章
- exit语句php,php or die() 语句,exit()
- 栈 - 关于出栈序列,判断合法的出栈序列
- 27.垃圾收集器(Serial收集器、ParNew收集器、Parallel收集器、Parallel Old 收集器、CMS收集器、G1收集器、常用的收集器组合)
- pygame 学习check_event,game_function,alien_invasion等程序
- logback 的拆分 Appender
- vim 底行命令模式的正则表达式(匹配模式)
- Linux 用C/C++创建新文件并写入内容
- java pdf 类库_有哪些可以给pdf加水印,java第三方开源类库?
- java的响应机制_JAVA事件响应机制
- scala 模式匹配概念及用法示例
- 新浪网产品设计指南(含UI规范)
- 图:智能手机Android系统的评委专用的比赛打分客户端,开发进行中...
- Anaconda下载(Windows系统)
- python同构数_用c语言求1到1000的同构数_后端开发
- *揭秘!阅读类APP如何实现自动阅读赚钱**
- 关于怎么查看自己电脑正版windows的产品密钥
- java average_Java IntStream average()用法及代码示例
- ICRA 2020轨迹预测竞赛冠军的方法总结
- 编程序找出1000之内的所有完数,并输出其因子
- RUN 文件安装 postgresql8.4.12