DataGear 专业版 1.0.0 已公布,欢送试用!http://datagear.tech/pro/
DataGear 反对采纳原生的 HTML、JavaScript、CSS 制作数据可视化看板,也反对导入由 npm
、vite
等前端工具构建的前端程序包。得益于这一个性,能够很容易制作基于 three.js 的 3D 数据可视化看板。
首先,参考 three.js 的官网教程 https://threejs.org/docs/index.html#manual/en/introduction/Installation 编写 3D 前端源码包。
源码包中蕴含两个文件:index.html
、main.js
,如下所示:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="module" src="/main.js"></script>
<script type="module">
import {ThreeRenderer} from "/main.js";
window.ThreeRenderer = ThreeRenderer;
</script>
<div style="padding:1rem;">
<button onclick="threeRender()"> 渲染 </button>
<button onclick="threeUpdate()"> 更新 </button>
<p></p>
<div id="threeChart" style="width:300px;height:300px;"></div>
</div>
<script>
var renderer;
function threeRender(){renderer = new ThreeRenderer(document.getElementById("threeChart"));
renderer.render();}
function threeUpdate(){renderer.update(0xff0000);
}
</script>
</body>
</html>
index.html
是下述main.js
中定义 3D 组件的调试页面,点击【渲染】、【更新】按钮可调试 3D 组件成果。
main.js
import * as THREE from 'three';
export function ThreeRenderer(dom)
{
this.dom = dom;
this.render = function()
{const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, this.dom.clientWidth / this.dom.clientHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(this.dom.clientWidth, this.dom.clientHeight);
this.dom.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00} );
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {requestAnimationFrame( animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
this.cube = cube;
};
this.update = function(hexColor)
{
const cube = this.cube;
const material = cube.material;
const color = material.color;
color.setHex(hexColor);
};
}
main.js
定义了一个ThreeRenderer
3D 组件类,大部分代码由 three.js 官网教程拷贝,它的render
函数绘制一个简略的 3D 立方体,update
函数能够更新这个 3D 立方体的色彩。
调试:
npm install --save three
npm install --save-dev vite
npx vite
执行 npx vite build
将它们构建为前端程序包:
index.html
assets/index-*.js
先将上述前端程序包压缩为 ZIP
包后导入为 DataGear 看板,而后将 index.html
中的
<script type="module" crossorigin src="/assets/index-*.js"></script>
批改为采纳相对路径引入形式:
<script type="module" crossorigin src="assets/index-*.js"></script>
此时,点击【保留并展现】看板后,关上展现页面,点击【渲染】、【更新】按钮,将能够看到 3D 成果,如下所示:
上面,咱们将上述 3D 组件制作为 DataGear 自定义图表,能够依据数据集返回的数值,更新其色彩。
首先,新建 SQL 数据集:
名称:最新指标值
SQL:
SELECT
D_VALUE AS VALUE
FROM
t_date_value
ORDER BY
d_date DESC
LIMIT 0, 1
上述 SQL 从
t_date_value
表中查问最新日期的指标值
而后,新建一个关联上述数据集的 自定义
类型的图表;
名称:最新指标值
图表类型:自定义
数据集:最新指标值
更新距离:2000 毫秒
上述图表每隔 2 秒更新一次数据
最初,批改方才导入看板的 index.html
,增加自定义图表渲染器,当t_date_value
表中最新指标值大于等于 80
时,将 3D 模型渲染为红色,否则,渲染为绿色。
批改后的 index.html
如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="assets/index-*.js"></script>
<script>
// 自定义图表渲染器
var chartRenderer =
{render: function(chart)
{var internal = new ThreeRenderer(chart.element());
internal.render();
chart.internal(internal);
},
update: function(chart, results)
{var chartDataSet = chart.chartDataSetMain();
var result = chart.resultOf(results, chartDataSet);
var value = chart.resultCell(result, "VALUE", 0);
var color = (value >= 80 ? 0xff0000 : 0x00ff00);
var internal = chart.internal();
internal.update(color);
}
};
</script>
</head>
<body>
<div style="padding:1rem;text-align:center;">
<h1>DataGear 制作 3D 图表 </h1>
<h5>http://www.datagear.tech</h5>
<div style="display:inline-block;width:300px;height:300px;margin:1rem;"
dg-chart-renderer="chartRenderer" dg-chart-widget="【图表 ID】"></div>
<div style="display:inline-block;width:300px;height:300px;margin:1rem;"
dg-chart-renderer="chartRenderer" dg-chart-widget="【图表 ID】"></div>
</div>
</body>
</html>
上述
assets/index-*.js
应替换为理论的 JS 文件名,【图表 ID】
应替换为理论的最新指标值
图表的 ID
点击【保留并展现】,即可看到 3D 图表成果,如下图所示:
官网地址:http://www.datagear.tech
源码地址:
Gitee:https://gitee.com/datagear/datagear
Github:https://github.com/datageartech/datagear