【带着canvas去流浪(5)】绘制K线图

栏目: Html5 · 发布时间: 5年前

内容简介:[TOC]使用原生

【带着canvas去流浪(5)】绘制K线图

[TOC]

一. 任务说明

使用原生 canvasAPI 绘制K线图。(截图以及数据来自于百度Echarts官方示例库 【查看示例链接】 )。

【带着canvas去流浪(5)】绘制K线图

二. 重点提示

K线图最常见的是在金融市场,尤其是股市中,它的绘制算法和表达的意思是直接相关的:

  1. 一般一个数据点包含 开盘价 , 收盘价 , 当日最高价 , 当日最低价 4个数据点。
  2. 开盘价 低于 收盘价 时,当天为涨价,则图形为红色,反之则为绿色。
  3. 图形中间的细线是 当日最高价当日最低价 之间的连线。
  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][3]));
        context.lineTo(activeX,transCoord(data[i][4]));
        context.closePath();
        context.stroke();
        //绘制开盘收盘矩形
        if (data[i][0] >= data[i][5]) {   
           context.fillRect(activeX - 5 , transCoord(data[i][0]) , 10, transCoord(data[i][6]) - transCoord(data[i][0]));
        } else{
           context.fillRect(activeX - 5 , transCoord(data[i][7]) , 10, transCoord(data[i][0]) - transCoord(data[i][8]));
        }
     }
    }

//根据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);
}

浏览器中可查看效果:

【带着canvas去流浪(5)】绘制K线图


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTTP Developer's Handbook

HTTP Developer's Handbook

Chris Shiflett / Sams Publishing / 2003-3-29 / USD 39.99

The largest group with an unsatisfied demand for a good book on HTTP is the worldwide group of Web developers. A good book on HTTP can help new and old Web developers alike, as a thorough understandin......一起来看看 《HTTP Developer's Handbook》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具