【用JS自制表格软件玩数据】9. 自制三维 K线图 蜡烛图

画三维 K线图 蜡烛图

• 概述
• 效果图
• • • 正面
    • 正面近景
    • 鸟瞰
    • 侧面
    • 近观俯视
• 构建一个类
• 初始化环境
• 设置环境背景
• 初始化摄像机
• 设置相机的位置
• 设置相机镜头的位置
• 初始化场景
• 创建坐标系
• 蜡烛图的特点
• • • 总结几个特点
    • 画小方块
    • 画蜡烛图
• 测试数据
• 运行展示

当写完本系列后，我会把源代码分享出来给大家。本课程也会持续更新与矫正。欢迎留言指正！

概述

平时做Excel表格，都少不了要画图表之类的。所以，本作品的图表功能也必不可少。为了与时俱进，我就打算做个3D版的K线图，让股民能够360度全方位了解那些行情。

更多高级功能可以查一下官方文档²

效果图

正面

鸟瞰

近观俯视

/*** @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)
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！