ThingJS图表整合

最新推荐文章于 2023-08-09 20:36:01 发布
最新推荐文章于 2023-08-09 20:36:01 发布
阅读量939 收藏 6
点赞数
分类专栏： 前端 文章标签： 大屏 3D 物联网 ThingJS ChartBuilder
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39816410/article/details/99437205
版权
本文介绍了如何使用ThingJS的ChartBuilder工具进行3D可视化图表的创建和集成，包括启动ChartBuilder、插入图表、对接数据以及实现图表与场景的交互功能。通过ChartBuilder，用户可以方便地构建专业水准的可视化场景，并通过数据源接口实现动态数据展示。
摘要由CSDN通过智能技术生成

ThingJS有自己的可视化图表编辑工具啦！
ChartBuilder可以让更多的人通过可视化发现数据的价值,帮助非专业工程师通过图形化界面,轻松搭建专业水准的可视化场景。

启动ChartBuilder

ThingJS的商业开发者进入调试环境会看到下图中图标“导入图表”按钮。
在这里插入图片描述
新建或者打开项目，点击导入图标可进入ChartBuilder界面。在这里就可以添加想要的图表啦！

插入图表

在ChartBuilder菜单栏中有各种不同类型的图表，可根据项目需求任意添加。操作完成后可以通过ctrl+s保存图表，保存完成回到调试环境，刷新页面或者点击项目前边小图标刷新，就可以看到项目下新增了后缀为“.cht”的文件。“.cht”的右键菜单就包含了该场景的“图表编辑”和“图表预览”。
在这里插入图片描述

对接数据

选中图表，选择下图框选按钮，接入多种数据源。其中包含了静态数据、接口请求、数据库查询等方式，具体的可以参考ChartBuilder的文档的数据接入部分。
在这里插入图片描述

最低0.47元/天 解锁文章
叶子Yana
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简化物联网可视化图表开发之使用ThingJS平台的ChartBuilder工具
qq_42739428的博客
03-18 1252
物联网可视化项目怎么制作的？除了需要建模还需要什么？一般来说物联网可视化项目中都包含哪些东西？物联网可视化项目的制作周期大概是多久？一个用来初期投标的物联网可视化方案怎么制作才算是简单？就目前而言，可视化运用的最为广泛的位置是哪？游戏领域可以说是可视化运用的最为广泛的位置，比如《刺客信条》《荒野大镖客》等等，可以说，绝大多数3d游戏，都运用到了可视化的技术，除此之外就是影视行业了，一些特效的制作同...
ThingJS结合图表实现数据展示
qq_42739428的博客
06-01 1406
ThingJS如何添加图表？ ThingJS中能否添加图表？怎么在ThingJS中添加图表？如何使用ThingJS中的ChartBuilder工具快速制作图表？只是普通开发者还没有花钱的打算，能不能使用ThingJS搭建场景并且添加图表？本文提供免费和VIP两种方式，让你使用ThingJS快速将图表功能集成到三维可视化场景中去。 以下是VIP用户拿来即用的ChartBuilder工具， 白嫖党以及观望党不用急，我们也能使用Echarts，将Echart网站中制作的图表集成到ThingJS中。 ChartB
thing.js入门学习
lff18277233091的博客
07-29 3940
1.官网链接，若有不懂的直接戳官网：thing.js官网 2.开发工具：直接使用在线开发工具 3.学习路线：先了解清楚thing.js的用途 可以做可视化页面展示 做3D效果等 4.建议：一定要浏览文档及看文档的官方示例（非常重要个人觉得） 5.做项目的时候都是用vue语法，但是目录结构方面有很大的差别： 自我感觉到的相同点： 可以用vue的双向数据绑定及生命周期，监听及计算属性的用法都相同，js都是通用的 自我感觉到的不同点： 更多的是使用原生js创建节点及插入元素及使用模板字符串 ..
ThingsJs-学习笔记1:初步了解
ZLZQ_Yuan
05-28 2815
1.官网： thingsjs官网 2.大致功能概述： thingsjs介绍 ThingJS平台的推出，解决了传统3D开发人员投入大、开发效率低、场景制作周期长、模型无法复用、系统部署复杂的问题。 特点： （1）强大的3D引擎：可在各类主流网页浏览器中自如运行，包括可在移动端直接访问运行。 （2）简化模型制作：ThingBuilder（包括面向园区级别的搭建工具CampusBuilder，还包括面向城市级场景的CityBuilder）。使用平台的CampusBuilder3D场景快速搭建工具，拥有便捷的搭建
ThingJS那些笔记
qq_36873693的博客
03-23 347
创建 var equipment = app.create({ type: ‘Thing’, url: ‘models/truck/’, name: ‘我的卡车’, id: ‘31415926’, position: [-5, 0, 7], complete: function(ev) { console.log(ev.object.name + ’ created!’); } }); 事件 // 选择室外所有物体 + 所有建筑 var objs = app.query(’.Building’).add(c
js旭日图表统计代码
06-11
**JS旭日图表统计代码详解** JS旭日图表是一种创新的数据可视化工具，它结合了圆环图和树状图的特点，常用于展示层次结构数据，特别是在业务分析、用户行为分析和市场细分等领域。这种图表在JavaScript库ECharts中...
js图表插件
03-27
"js图表插件"这个主题涵盖了多种用于生成图表的库和工具，这些工具广泛应用于数据分析、报表展示以及用户界面的美化。以下是基于给定的文件名所涉及的几个关键知识点： 1. **3159212621132841.zip**：虽然这个...
Highcharts js图表控件
04-26
Highcharts JS是一款强大的JavaScript图表库，它为网页和移动设备提供了丰富的数据可视化解决方案。相比于charts.js，Highcharts在功能、定制性和性能上更胜一筹，适合开发复杂的、交互式的图表应用。 首先，...
Echart制作图表Js文件
04-24
下面我们将详细探讨ECharts制作图表及其相关js文件的知识点。 1. **ECharts的基本结构**：ECharts的核心在于它的`echarts.init`方法，这个方法接受一个DOM元素作为参数，初始化一个ECharts实例。例如： ```...
LightningChart JS 图表库1.2.2
11-12
LightningChart JS 具有出色的运行性能，能同时输入十个实时数据源，极速输出10个百万点的图表。GPU加速和WebGL渲染保证设备的图形处理器得到有效利用，提高了刷新频率，使动画效果运行流畅。 LightningChart JS是...
ThingJS 开发使用感悟
似水流年的博客
08-11 7199
ThingJS 隶属于北京优锘科技有限公司，是优锘科技旗下物联网三维可视化开发平台。ThingJS采用JavaScript开发语言，主要面向前端程序员和实施人员。ThingJS平台让传统企业无需组建3D可视化开发团队，也能开发3D可视化应用。以上解释来自百度百科，我相信应该是由其官方人员编写的。简单的说，ThingJS 是由国人开发的（北京优锘），需要付费使用的，基于ThreeJS封装的一个 3d 可视化开发平台。.....................
ThingJS开发使用感受
@Fonden
08-09 852
出于为了实现有关厂区的数字孪生项目，断断续续使用ThingJS平台开发一年左右，做一个使用感受的总结。在编码方面，笔者的编码方式和博客中的描述基本一致：“由于平台提供的代码编码端体验不佳，我们不得不先在本地进行开发，再将相关代码复制到在线平台，而调试修改代码也是如此繁琐”。个人感觉至少现阶段的ThingJS还是比较适合去做一些简单的业务场景、数据交互简单的项目，类似于大屏展示，这种纯数据展示；如果要实现一个较为庞大复杂的业务场景时，就不太方便，开发难度也会随之增加。
数字孪生——thing.js和three.js
smile_hahahaxixi的博客
08-07 4640
本文讲了thing.js和three.js的对比及它们的应用
教你用四步快速将图表集成到场景
ThingJS的博客
12-15 1508
科学研究证明，人类获取信息的途径80%靠视觉，现在地图可视化和3D物理结构可视化已经很好的应用在各个领域，然而随着信息量越来越大，图表的结构必然越来越复杂，更科学简单的可视化工具就越来越重要。 ThingJS中能否添加图表？怎么在ThingJS中添加图表？如何使用ThingJS中的ChartBuilder工具快速制作图表？能不能使用ThingJS搭建场景并且添加图表？ 下面教你用ThingJS工具组件之一ChartBuilder四步快速将图表功能集成到三维可视化场景中去。 第一步：选择组件 在数
从零开始学习3D可视化之2D界面
ThingJS的博客
07-19 1534
在ThingJS中搭建的数字孪生可视化场景都是放在3D“容器”内的，3D“容器”提供了3D和2D的界面展示能力。上篇文章浅析过了3D空间界面，下面我继续学习一下2D界面如何与3D界面连接。ThingJS内置了div2d和div3d元素，创建2D界面时需要将元素插入到 div2d。 创建 UIAnchor UIAnchor可以把 2D html 界面连接到 3D 物体上，跟随 3D 物体移动。需要注意的是删除后，其对应的 panel 也会被删除。 var uiAnchor = app.create({
结合Echarts、Ajax技术实现可视化大屏监控 ThingJS 3d 开发
ThingJS的博客
12-02 1425
#三维可视化# #3D开发# ECharts是 Enterprise Charts缩写，表示商业级数据表图，它是一个基于html5 Canvas的图标库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器 (E6/7/8/9/10/1, chrome, firefox, Sarari等)，底层依赖轻量级的 Canvas类库 ZRender，创建了坐标系、图例、提示、工具箱等基础组件，能够提供直观、生动、可交互、可高度个性化定制的数据可视化图表。创新的拖拽计算、数据视图、值域漫游等特性大大增强了用户体验
ThingJS官方案例（四）：快速应用3D场景下的模拟导航能力
ThingJS的博客
12-26 1270
3D室内场景承载了建筑物基础的环境信息，利用ThingJS平台模拟导航功能，实现物联网远程管理的可视化。在一个室内场景中，相隔的两个房间也可以实现路径导航功能！ 第三人称视角 第一人称视角 首先保证房间、门和电梯/楼梯添加相应属性后，就可以利用鼠标点击功能，设置导航起点、导航终点，自动生成导航线。为了满足模拟导航能力，3D建筑需要有特定的搭建规则。 详情见文档【ThingJS室内导航场景的搭建规则】>> 其中导航点、导航线的对象可以自由设置其样式，包括启动UV动画，设置动画播放速度，更能引
有关echarts、thingJS和threeJS
Ada_lake的博客
10-14 6643
之前为了做一个地图和一个像CAD建模的房屋。看了一下echarts和thingJS，threeJS。了解的不太多，现在把自己所稍微了解到的东西记录下来 echarts、thingJS、threeJS是什么 三者应该如何进行使用 三者的具体原理是什么 1. echarts、thingJS、threeJS是什么 echarts echarts 是一个基于JS的数据可视化的图表工具。 可将数据以 地...
Iframe去嵌入ThingJS的物联网项目传值postMessage
熊宗的博客
08-19 436
1.页面代码 <div width="800px"> <button style="position: absolute;top: 15px;left: 15px;width: 75px;" onclick="flyToCar()">飞到小车</button> <button style="position: absolute;top: 45px;left: 15px;width: 75px;" onclick="flyToBack()">返&
thingjs区位分析图制作
最新发布
09-21
ThingJS 区位分析图制作是一种利用 ThingJS 技术来制作区位分析图的方法。 首先，区位分析图是一种用于展示地理位置和相关数据的图表，可用于分析不同地区的优势和劣势。制作区位分析图可以有助于决策者了解某个地区的特点和潜力，从而作出更准确的决策。 制作 ThingJS 区位分析图的步骤如下： 1. 数据收集：首先需要收集相关的地理位置数据和相关数据，例如人口统计数据、经济指标等。这些数据可以从政府统计部门、研究机构或互联网上获取。 2. 数据整理：将收集到的数据整理和处理，以便能够与地理位置数据相匹配。这需要将数据转化为适合 ThingJS 使用的格式。 3. 地图制作：利用 ThingJS 提供的地图功能，将整理好的数据与地理位置数据相结合，通过颜色、大小等视觉效果来展示不同地区的数据差异。可以根据需要选择适合的地图类型，如普通地图、3D 地图等。 4. 交互设计：利用 ThingJS 的交互设计功能，为区位分析图添加交互性，使用户能够通过鼠标滚动、点击等方式与图表进行互动。例如，可以通过悬停在特定地区上显示详细数据，或者通过点击地区来展示更多相关信息。 5. 发布和分享：制作完成的区位分析图可以通过 ThingJS 平台直接发布和分享，使其他用户能够访问和使用。也可以将制作完成的图表嵌入到网站或应用程序中，以便更好地与其他内容相结合。 总之，ThingJS 区位分析图制作能够帮助用户更直观地了解地区的特点和潜力，为决策提供更准确的数据支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值