【用JS自制表格软件玩数据】9. 自制三维 K线图 蜡烛图
2024-04-24 07:42:03
画三维 K线图 蜡烛图
- 概述
- 效果图
- 正面
- 正面近景
- 鸟瞰
- 侧面
- 近观俯视
- 构建一个类
- 初始化环境
- 设置环境背景
- 初始化摄像机
- 设置相机的位置
- 设置相机镜头的位置
- 初始化场景
- 创建坐标系
- 蜡烛图的特点
- 总结几个特点
- 画小方块
- 画蜡烛图
- 测试数据
- 运行展示
当写完本系列后，我会把源代码分享出来给大家。本课程也会持续更新与矫正。欢迎留言指正！
概述
平时做Excel表格，都少不了要画图表之类的。所以，本作品的图表功能也必不可少。为了与时俱进，我就打算做个3D版的K线图，让股民能够360度全方位了解那些行情。
于是就选择了最近这些年非常成熟的 WEBGL，为了能够先快速出结果。就先选择了 Three.js 作为框架。刚开始不太熟悉，就在网上搜了 WEBGL中文网 1 报了个课程速成一下，就撸起袖子开始搞起来。
更多高级功能可以查一下官方文档2
效果图
正面
正面近景
鸟瞰
侧面
近观俯视
构建一个类
class three_d{constructor(){}}
初始化环境
/**
* @property {Function} initThree 初始化整个容器
* @param {Number}
* @returns {NaN} 无返回
*/
initThree() {var that = this;this.renderer = new THREE.WebGLRenderer({antialias : true, // 抗锯齿开关，设置为false，可以提高性能。alpha : this.alpha // 设置背景透明度});// 设置画布的尺寸this.renderer.setSize(this.width, this.height);// 绑定了点击事件this.renderer.domElement.onclick = that.onMouseClick.bind(this);// 绑定了右击事件this.renderer.domElement.oncontextmenu = that.oncontextmenu.bind(this);// 将初始化完成的画布，绑定到Dom树中。document.getElementById(this.canvasID).appendChild(this.renderer.domElement);
}
设置环境背景
/**
* @property {Function} setbg 设置背景
* @returns {NaN} 无返回
*/
setbg(color){this.renderer.setClearColor(color, 1.0);
}
初始化摄像机
/**
* @property {Function} initCamera 初始化摄像机
* @param {Number} width 画布的宽度
* @param {Number} height 画布的高度
* @returns {NaN} 无返回
*/
initCamera() {/*PerspectiveCamera 透视相机：(fov,aspect,near,far)fov 视角(类似眼睛的睁开的大小)aspect 宽高比near 近平面far 远平面*/this.camera = new THREE.PerspectiveCamera(30, this.width / this.height, 1, 10000);
}
设置相机的位置
/**
* @property {Function} setCameraposition 设置相机的位置
* @param {Number} x x坐标
* @param {Number} y y坐标
* @param {Number} z z坐标
* @returns {NaN} 无返回
*/
setCameraposition(x,y,z) {//相机坐标的定位this.camera.position.x = x;this.camera.position.y = y;this.camera.position.z = z;this.setCameraUp(0,1,0);
}
设置相机镜头的位置
/**
* @property {Function} setCameraUp 设置相机顶部快门指向的矢量方向
* @param {Number} x 相机顶部快门指向的矢量方向的x坐标
* @param {Number} y 相机顶部快门指向的矢量方向的y坐标
* @param {Number} z 相机顶部快门指向的矢量方向的z坐标
* @param {Object} lookAt { x : 0, y : 0, z : 0 }
* @returns {NaN} 无返回
*/
setCameraUp(x,y,z,lookAt) {var lookAt = lookAt || {x : 0,y : 0,z : 0}// up 代表相机顶部快门指向的矢量方向this.camera.up.set(x,y,z);// lookAt 代表镜头对准的方向this.camera.lookAt(lookAt);console.log(this.camera.position)this.camera.updateProjectionMatrix();
}
初始化场景
/**
* @property {Function} initScene 初始化场景
* @returns {NaN} 无返回
*/
initScene() {this.scene = new THREE.Scene();
}
创建坐标系
由于画K线图是基于右手坐标系的，如下图：
/**
* @property {Function} initcoordinate 创建坐标系
* @param {Number} size 坐标系的尺寸
*/
initcoordinate(size){// 首先创建一个对象元素组var group = new THREE.Group();// size 是设置坐标系的尺寸边界。因为是以 0 作为原点，所以如果size = 100,那么以0开始的话，就是最大值为99。var min = -1*size-1;// 开始画辅助线for(var i = size;i>min;i--){group.add(this.creatLine([-1*size,i,0,0xe0e0e0],[size,i,0,0xe0e0e0]));group.add(this.creatLine([i,-1*size,0,0xe0e0e0],[i,size,0,0xe0e0e0]));group.add(this.creatLine([-1*size,0,i,0xe0e0e0],[size,0,i,0xe0e0e0]));group.add(this.creatLine([i,0,-1*size,0xe0e0e0],[i,0,size,0xe0e0e0]));}var x = this.creatLine([-1*size,0,0,0xff0000],[size,0,0,0x00ff00]); // 创建一个纯色的线段var y = this.creatLine([0,-1*size,0,0xff0000],[0,size,0,0x00ff00]); // 创建一个纯色的线段var z = this.creatLine([0,0,-1*size,0xff0000],[0,0,size,0x00ff00]); // 创建一个纯色的线段group.add(x);group.add(y);group.add(z);this.scene.add(group); // 将画好的辅助线添加到画布场景中。return group;
}
蜡烛图的特点
总结几个特点
- 颜色分为：红色，绿色
- 图形组成：矩形，一条线
画小方块
/*** @property {Function} creatcolorCube 创建纯色方块* @param {Number} w 宽* @param {Number} h 高* @param {Number} l 长* @param {Number} x 横坐标* @param {Number} y 纵坐标* @param {Number} z 深度坐标* @param {Hex} color 颜色（十六进制）* @param {Function} action 回调函数* @returns */creatcolorCube(w,h,l,x,y,z,color,action){var geometry = new THREE.BoxGeometry(w,h,l);var material = new THREE.MeshLambertMaterial({color:color});var mesh = new THREE.Mesh(geometry,material);mesh.position.x = x;mesh.position.y = y;mesh.position.z = z;// 设置了图形的动作函数if(typeof action === "function"){mesh._action = action;}this.scene.add(mesh); // 添加到场景中return mesh;}
画蜡烛图
/*** @property {Function} candleCube 画蜡烛图* @param {Number} open 开盘值* @param {Number} close 收盘值* @param {Number} high 区间最高点* @param {Number} low 区间最低点* @param {Number} x 横坐标位置*/
candleCube(open,close,high,low,x){var weight = 0.5; // 矩形的宽度var color = 0x000000; // 设置蜡烛图颜色，初始值为黑色if(open > close){ // 如果开盘值大于收盘值color = 0x00ff00; // 设置绿色}else{ // 如果开盘值小于收盘值color = 0xff0000;}var hsize = Math.abs(open-close); // 矩形的长度var highlowsize = Math.abs(high-low); // 线的长度var y = (open+close)/2; // 蜡烛图在Y轴的高度// 画线var highlow = this.creatcolorCube(0.1,highlowsize,0.1,x,y,0,0x000000);// 画矩形var openclose = this.creatcolorCube(weight,hsize,weight,x,y,0,color,(thisobj)=>{thisobj.rotation.y -= 0.06;});// 当被点击时的事件openclose._onclick = function(){console.log("openclose._onclick");}// 当鼠标移入时的事件openclose._onMouseOn = function(){console.log("openclose.position：");}// 当鼠标移出时的事件openclose._onMouseLeave = function(){console.log("openclose._onMouseLeave");}
}
大致上，功能就基本完成了。我们开始测试一下。
测试数据
var data2 = [];
var size = 30;
var temp = {open: 5 ,close: 5 ,high: 10 ,low: 10
}
data2.push(temp)
for(var i = 1;i<100;i++){// 对测试数据做了一些约束。以避免展示效果乱七八糟。temp = {open: data2[data2.length-1].open + (-1)**Math.round(Math.random()*1)*Math.round(Math.random()*2) + (-1)**Math.round(Math.random()*1)*Math.round(Math.random()*1),close: data2[data2.length-1].open + (-1)**Math.round(Math.random()*1)*Math.round(Math.random()*1),high: data2[data2.length-1].high + (-1)**Math.round(Math.random()*1)*Math.round(Math.random()*2) + (-1)**Math.round(Math.random()*1)*Math.round(Math.random()*1),low: data2[data2.length-1].high + (-1)**Math.round(Math.random()*1)*Math.round(Math.random()*1)}console.log(temp)data2.push(temp)
}
运行展示
var theChart = this.initcoordinate(100);// 画坐标系与辅助线
theChart._action = (thisobj)=>{// thisobj.rotation.y += 0.001;
}// 导入数据，画蜡烛图
var length = data2.length;
for(var i=0; i<length;i++){console.log(i,':',data2[i].open,data2[i].close,data2[i].high,data2[i].low)this.candleCube(data2[i].open,data2[i].close,data2[i].high,data2[i].low,i-50);
}
WEBGL中文网 ↩︎
https://threejs.org/docs/index.html ↩︎
【用JS自制表格软件玩数据】9. 自制三维 K线图 蜡烛图相关推荐
- 【用JS自制表格软件玩数据】2.读取 xls 文件
读写Excel Excel文档的包结构 Excel文档的组织形式 Content Types 主要内容(worksheet) 关联(Relationships) 第三方库 SheetJS 工作原理介绍 ...
- 【用JS自制表格软件玩数据】6. 单元格的多选
单元格的框选,列选择,行选择 框选 列选择 行选择 列的右键菜单 行的右键菜单 当写完本系列后,我会把源代码分享出来给大家.本课程也会持续更新与矫正.欢迎留言指正! 框选 在Excel 表格中,一般我 ...
- plotly基于dataframe数据绘制股票自定义K线图
plotly基于dataframe数据绘制股票自定义K线图 # 绘制蜡烛图并自定义可视化形式: import plotly as py import plotly.graph_objs as go ...
- 蜡烛图plotly_Python数据可视化：如何用mplfinance创建蜡烛图
Python数据可视化:如何用mplfinance创建蜡烛图 Python数据可视化:如何用mplfinance创建蜡烛图 一图胜千言,使用Python的matplotlib库,可以快速创建高质量的图 ...
- python画k线图_python自动获取行情数据，并画k线图
1.概述 本例子为画k线图,同时画出5日,10日,30日均线,且鼠标移动到上面会显示当前交易日,开盘价,收盘价,最高价,最低价. 移动平均线:Moving Average,简称MA,MA是用统计分析的 ...
- Python获取股票数据并绘制相应K线图，看这个就够了！
Python对股票的K线可视化 前言 说明 注意 数据获取 Tushare获取股票数据 获取医疗器械板块数据(代码部分) 获取股票数据(代码部分) 数据预处理 变量中文化(代码部分) K线绘制 代码部 ...
- python蜡烛图预测_Python数据可视化：如何用mplfinance创建蜡烛图
一图胜千言,使用Python的matplotlib库,可以快速创建高质量的图形. 我们团队推出一个新的系列教程:Python数据可视化,针对初级和中级用户,将理论和示例代码相结合,使用matplotl ...
- tushare获取数据用pyecharts画k线图
tushare ID:505405 import pyecharts.options as opts from pyecharts.charts import Kline import tushare ...
- Python数据可视化：如何用mplfinance创建蜡烛图
一图胜千言,使用Python的matplotlib库,可以快速创建高质量的图形. 我们团队推出一个新的系列教程:Python数据可视化,针对初级和中级用户,将理论和示例代码相结合,使用matplotl ...
最新文章
- 【CCNP考试】2010-01-31-北京-845（PASS）
- python的运行窗口-在 Python 窗口中执行工具
- 快速生成一个二维矩阵Python
- 魅族升级鸿蒙,魅族要“弯道超车”？率先升级鸿蒙OS，挥别安卓系统
- 整合.NET WebAPI和 Vuejs——在.NET单体应用中使用 Vuejs 和 ElementUI
- 改善Python程序的91个建议（二）
- Nik Collection 3.3.0中文版 (摄影师必备ps滤镜插件套装)支持big surv
- 用什么 软件测试无线频段,Wirelessmon无线频段与信号强度扫描工具软件使用技巧...
- python风变编程是骗局吗-请问风变编程的Python课怎么样？
- Altium Designer——usb信号线布线注意的问题——应使用差分布线
- UPS电源设备消防与电气安全要求
- 用摄像管替换电视机电路里的显现管的摄像机
- Android 仿京东淘宝多规格选择
- mfc连接oracle12c,MFC ADO连接Oracle12c数据库 类库文件
- mp2551总线收发器芯片作用_高速CAN收发器MCP2551
- install - graph-tool
- 【渝粤题库】陕西师范大学292311国际金融Ⅰ 作业（高起专）
- SAP QM 检验批里某检验特性的取样数量跟检验计划设置不符？
- 《MySQL高级篇》三、存储引擎
- 【MPI编程】矩阵向量乘法--解法三（子矩阵块分解）【高性能计算】