【带着canvas去流浪(5)】绘制K线图
目录
- 一. 任务说明
- 二. 重点提示
- 三. 示例代码
示例代码托管在: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);
}
浏览器中可查看效果:
转载于:https://www.cnblogs.com/dashnowords/p/10645679.html
【带着canvas去流浪(5)】绘制K线图相关推荐
- echarts 雷达图_【带着canvas去流浪】绘制雷达图
使用原生canvasAPI绘制雷达图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示 雷达图绘制的看起来并不复杂,无非就是一些路径点的连线,其中的难点都在于一些细 ...
- 带着canvas去流浪系列之五 绘制K线图
[摘要] 用canvas原生API实现百度Echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- 带着canvas去流浪系列之二 绘制折线图
[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
- python画k线图_小白学Python(14)——pyecharts 绘制K线图 Kline/Candlestick
Kline-基本示例 from pyecharts import options as opts from pyecharts.charts import Kline data = [ [2320.2 ...
- python能画k线图吗_,求教使用python绘制K线图
如何用python实现视频关键帧提取并保存为图片 import cv2 vc = cv2.VideoCapture('Test.avi') #读入视频文件 c=1 if vc.isOpened(): ...
- python画k线图_Python绘制K线图
不管是对量化分析师还是普通的投资者来说,K线图(蜡烛图)都是一种很经典.很重要的工具.在K线图中,它会绘制每天的最高价.最低价.开盘价和收盘价,这对于我们理解股票的趋势以及每天的多空对比很有帮助. 一 ...
- Python绘制K线图之可视化神器pyecharts
目录 K线图 概念 用处 K线图系列模板 最简单的K线图绘制 K线图鼠标缩放 有刻度标签的K线图 K线图鼠标无缩放 大量数据K线图绘制(X轴鼠标可移动) 每文一语 K线图 概念 股市及期货市bai场中 ...
- 用Python绘制K线图
K线图简介 K线由高开低收四个价格绘制而成.分为阳线与阴线两种,收盘价高于开盘价时为阳线,收盘价低于开盘价时为阴线:K线图的示意图如下: K线由矩形实体与上下两根影线组成,实体上方的影线成为上影 ...
- Tableau绘制K线图、布林线、圆环图、雷达图
Tableau绘制K线图.布林线.圆环图.雷达图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. K线图 1.1 导入数据源 1.2 拖拽字段 将[日期]托到列 ...
最新文章
- [Android] Toast问题深度剖析(二)
- sql 按 月份 结余_积累中沉淀,反思中提升——白霓镇幼儿园九月份工作总结会...
- 5 CrawlSpider操作
- spring boot 启动卡住_SpringBoot 居然有 44 种应用启动器
- python画图小猪佩奇_吊炸天!Python 20秒画出小猪佩奇
- php文件怎么制定编码格式,php文件编码格式对结果有影响
- linux 内核开发_25年Linux内核开发中的9课
- 图像识别(3)---验证码篇
- c++ 链表_链表(单向链表的建立、删除、插入、打印)
- 如何做相册_今天才知道,原来长按微信相册,还隐藏着一个实用功能
- vuecli工程里面引入图片
- 百度运维部电子竞技大赛!
- 奇安信荣获中国电子2021年度科技进步奖一、二等奖
- 记 笔记软件极力推荐------------->思源
- 北美计算机专业申请,美国计算机专业名校TOP5申请深入解读
- 如何键盘锁定计算机,怎么锁键盘-键盘上的小秘密你真知道吗?
- 使用Excel 2007绘制甘特图
- SpringCloud 分布式日志采集方案
- excel单元格的合并与计算
- 八年,腾讯优图攒了多厚的技术“家底”?
热门文章
- gitlab简单使用教程【转】
- JavaScript-DOM(2)
- PHP EOF(heredoc)的使用方法
- LeetCode 6 - ZigZag Conversion
- 窥探Swift之别样的枚举类型
- PHP的学习--在sublime中使用XDebug(Ubuntu)
- 【Java】什么是多态?多态的实现机制是什么?
- microsoft visual c++全家桶_橡木桶——白兰地风味的“主宰”
- python dataframe索引转成列_Pandas之DataFrame对象的列和索引之间的转化
- 函数传参数_算法笔记(7)第二章C、C++快速入门函数,main函数,