1：首先在项目里引入threejs文件

threejs下载：用88以上版本https://download.csdn.net/download/tianseyiwan008/11983732

<script src="js/three.min.js"></script>

2：然后再引入饼图插件Cubic.js

cubic-1.1.min.js下载地址：https://download.csdn.net/download/tianseyiwan008/11022386

<script type="text/javascript" src="cubicPieChart-1.0.min.js"></script>

3：使用插件的方法

html：

<div id="WebGL-output" style="width: 900px;height:400px;"></div>

js：

//三维饼图var cubic = new Cubic.PieChart("WebGL-output", {width: 400,height: 300,thickness: 5,//厚度radius: 30,//半径colors: [0xffffff, 0xff00ff, 0xffff00, 0x0000ff,0x5F9EA0,0x00FF7F],//颜色数组16进制的数组data: [12, 13, 5, 50, 23, 54],//数据数组startAngle: 0,//起始角background: 0x00ffff,//背景色，16进制数字opacity: 1,   //背景透明度camera: "perspective" //相机类型，透视投影摄像机('perspective)、正交投影摄像机('orthographic')});console.log(cubic.getPosition());console.log(cubic.getRotation());// cubic.setPosition(0, 20, 0);// cubic.setRotation(0, 0, 0);// cubic.remove();

//三维柱形图var cubic = new Cubic.CylinderChart("WebGL-output", {width: 400,height: 300,thickness: 60,//厚度radius: 15,//半径rate: 0.4,//百分比background: 0x00ffff,//背景色，16进制数字opacity: 1,   //背景透明度topColor: 0x555555,//上部颜色bottomColor: 0xCC0000,//下部颜色topOpacity: 0.5,//上部透明度bottomOpacity: 1,//下部透明度camera: "orthographic"  //相机类型，透视投影摄像机('perspective)、正交投影摄像机('orthographic')});// cubic.remove();

大功告成！

如何在前端用js实现画三维饼图和三维柱形图相关推荐

前端对div连线_《前端图形学从入门到放弃》003 三维世界
从本篇起,我们将正式进入webgl的3D世界本篇涵盖的内容包括: webgl它在干啥? 如何画一个正方体? 如何成为一个"有深度"的正方体? 正方体要离家出走了! webgl它在 ...
前端学习--js.2
写一个通用的事件侦听器函数 markyun.Event = { //页面加载完成后 readyEvent :function(fn) { if(fn==null) { fn=document; } v ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
好程序员web前端分享js剪切板Clipboard.js 使用
好程序员web前端分享js剪切板Clipboard.js 使用,clipboard.js是一个用来设置剪切板的库,小巧无依赖,但用法有点诡异,必须依赖一个DOM元素. 必须要与一个DOM元素相关联,并 ...
前端利用JS导出数据到Excel表数字是文本类型无法计算
问题描述:前端利用JS导出数据到Excel表数字是文本类型无法进行公式计算:前端利用JS导出数据到Excel表数字是文本类型无法计算解决办法:参考https://bbs.csdn.net/t ...
好程序员web前端分享JS引擎的执行机制
好程序员web前端分享JS引擎的执行机制,请先着重牢记两点!JS是单线程语言. JS的EventLoop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的eventloop. 1.灵魂三问: ...
Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head><meta char ...
js 点击闭包_【新年跳槽必备】2020最新（前端原生JS专题）面试题速领！
最近我把每周更新的面试题发在我们的学习群里大家似乎都很高冷哇难道是默默的做题去了没说话每期面试题都是Richard老师认真准备的真的希望能帮到大家哦本期是前端原生JS专题 A前端原生JS专 ...
前端之JS事件events
前端之JS事件events 事件(events) 常用事件绑定事件的方式函数绑定 -- 推荐使用绑定匿名函数行内绑定 -- 不要用事件对象阻止默认行为事件冒泡及捕获事件委托页面绑定回 ...

如何在前端用js实现画三维饼图和三维柱形图

1：首先在项目里引入threejs文件

2：然后再引入饼图插件Cubic.js

3：使用插件的方法

如何在前端用js实现画三维饼图和三维柱形图相关推荐

最新文章

热门文章