在说 3D 图表以前,首先要明确两个概念,一个是数据的维度,一个是呈现数据载体的维度。对于数据的维度,一维的数据呈现,但是呈现的载体是二维的平面图,比如饼图: 已经能够很清晰地观察到数据的分布情况。...数据的维度越大,理解起来理所当然地,也越来越困难。 但是第二个问题,我们至少有两种解决办法。一种,在当前二维图表的基础上,通过颜色、图形、数值的不同等等,来表示第三个维度的数据。...需要注意的是,绘制 3D 的图形仅仅是技术上的一种呈现形式,并不意味着它的易懂性要好于上面一种方式。实际上,我们还是需要看看具体的问题是什么。...明确了这些概念以后,我再来介绍两则 JavaScript 的 3D 图表,它们都是为了呈现三维的数据,而不仅仅是看起来 3D 而已,大部分 JavaScript 的 3D 图表库都是基于 Canvas...WebGL 是一种 3D 的绘图标准,有了它,JavaScript 就可以实现 OpenGL 标准能做的事情了,在 HTML5 Canvas 基础上,WebGL 允许硬件 3D 加速。
背景 近期的一个项目中,对数据的统计分析有非常大的要求,这就要求有一款非常强大的报表、图表插件。因此,组长给分了任务。让我们各自去研究不同的图表插件。...用了一两天的时间,对java这块的图表插件做了一个简单的研究。java方向的图报表还是有非常多非常多的。比如。...在业界颇具口碑的商业插件—— ChartDirector、 JavaScript图表 JScharts 等。...然而,就眼下来说,在报表方面,国内仅仅有稀疏的几家公司提供了非常好的开发工具;但在图表方面,国内就欠缺非常多了。大部分知名的图表插件都是国外的产品。...结束语 这里对照了经常使用的三款java图表插件。至于项目中选用那一款插件,这个要视情况而定,首先须要看项目中的需求怎样。其次看项目组成员的基本素养,以及项目的进度、时间等等。
历时365天,【Excel催化剂】与【EasyShu】联手升级的Excel图表插件EasyCharts 2.0版本-EasyShu,即将面世。...接下来我们会陆陆续续介绍插件的各种功能,同时内测,等内测结束就发布。我们先从与表格完美融合的类别型图表开始讲解。...将类别型图表完美地嵌入表格中,能更加清晰明了地表示数据信息,尤其在咨询行业。废话少说,直接上插件一键操作的图表绘制视频。...EasyCharts是EasyShu团队使用C#语言编写的一款Excel插件,主要用于数据可视化与数据分析。EasyCharts可以算是国内最先关注数据可视化的Excel图表插件。...现EasyCharts插件现在是1.0版本。EasyCharts1.0的升级版本2.0-EasyShu大大升级了原图表功能。其界面如下,具体功能以后会一一介绍,包括多图绘制神器、图表高清导出等。
除了绘制经典的二维图表外,matplotlib还支持绘制三维图表,通过mplot3d工具可以实现,只需要在axes对象中指定projection参数为3d即可,常见的折线图,散点图,柱状图,等高线图等都可以进行三维图表的绘制...,只需要同时提供x,y,z三个坐标轴对应的值即可,下面来看下具体用法 1....numpy as np >>> import matplotlib.pyplot as plt >>> fig = plt.figure() >>> ax = plt.axes(projection='3d...散点图 示例如下 >>> fig = plt.figure() >>> ax = plt.axes(projection='3d') >>> for mark,start, end in (['o',...除了以上基本类型外,matplotlib还支持更多的3D图表类型,具体用法请查看官方文档。 ·end·
致力于把最实用、最好玩的开源项目推荐给大家。 chart.xkcd:手绘风格的 JS 图表库。 手绘风格的设计给人一种很可爱的感觉,看了这些图表你会发现数据也可以以萌萌哒的形式展示。...只需页面中包含的脚本以及一个用于显示图表的 节点即可。 在以下示例中,我们创建一个折线图。...class="line-chart"> <script src="https://cdn.jsdelivr.net/npm/chart.xkcd@1/dist/chart.xkcd.min.<em>js</em>...如果你有什么好玩、实用<em>的</em>前端开源项目,欢迎联系我,把最实用、最好玩<em>的</em>开源项目推荐给大家。
编译| 沈祥振 审稿| 郭梦月 本文介绍了唐建课题组的Shengchao Liu等人基于3d几何研究的成果:鉴于现实世界场景中 3D 信息的缺乏极大地阻碍了对分子几何图表示的学习,本文提出了一种图预训练框架...这两个 SSL 任务获得的知识是相辅相成的,因此GraphMVP 框架将它们整合在一起,形成更具判别力的 2D 分子图表示。作为通用的 SSL 预训练管道,GraphMVP 有两个阶段:预训练和微调。...具体到药物发现,我们有一个 2D 图和每个分子的一定数量的 3D 构象,我们的目标是学习一个强大的 2D/3D 表示,可以在最大程度上恢复其 3D/2D 对应物。...如图1,它本质上是从采样的 2D 分子图表示 () 中重建 3D 构象异构体 (y)。 上述过程称为变分分子重建,在具体实现上,实际采用了一种类似于 VAE 的轻量级生成 SSL。...4总结 从领域的角度来看,GraphMVP是结合 3D 信息来增强 2D 图表示学习的首次尝试,并且能够通过考虑建模中的随机性来利用 3D 构象。
背景介绍 今天我们演示绘制在极坐标中定义的曲面3D图。并使用matplotlib中内置的color map做展示。 ?...入门实例 先看视频演示效果: 代码块 ''' ================================= 3D表面与极坐标 =================================...演示绘制在极坐标中定义的曲面。...as plt import numpy as np #定义子图表,添加3D投影 fig = plt.figure() ax = fig.add_subplot(111, projection='3d'...) # 在极坐标中创建网格并计算相应的Z值. r = np.linspace(0, 1.25, 50) p = np.linspace(0, 2*np.pi, 50) R, P = np.meshgrid
这是一个简单的 JS 3D 模型,能跑在包括 IE6 的所有浏览器上,结合一下 tween 缓动算法,理论上已经可以完美模拟像 http://www.cu3ox.com/ 这个网站上方 banner 的各种变换效果了...介绍一下实现细节,矢量绘图仍然用的是 Raphael 库,Raphael 我在《如何用 JS 实现 3D ×××效果》这篇文章里有过介绍。...场景类 Sence 场景你可以理解为存放物体的一个有限大的空间,本例的场景可以添加任意多个不同的物体(比如长方体等),场景支持任意方向的旋转,对于旋转,本例场景的实现分为以下三种方式,他们分别是绕场景中任意一个参考点的...关于画家算法 渲染器工作时,会从他的角度上能看到的所有物体都描绘出来,即用 2D 的手法去描述 3D 的物体。...这里涉及一个问题,离观察者越近的物体会挡住或部分挡住离得远的物体,同样的,在同一个物体上的多个面,离观察者越近的面会挡住或部分挡住离得远的面。
历时365天,【Excel催化剂】与【EasyShu】联手升级的Excel图表插件EasyCharts 2.0版本-EasyShu,即将面世。...接下来我们会陆陆续续介绍插件的各种功能,同时内测,等内测结束就发布。我们先从与表格完美融合的类别型图表开始讲解。...我们团队总结挑选了三种不同的商业期刊风格,使用EasyShu插件的【风格转换】功能就可以一键转换不同的图表风格。...EasyCharts是EasyShu团队使用C#语言编写的一款Excel插件,主要用于数据可视化与数据分析。EasyCharts可以算是国内最先关注数据可视化的Excel图表插件。...现EasyCharts插件现在是1.0版本。EasyCharts1.0的升级版本2.0-EasyShu大大升级了原图表功能。其界面如下,具体功能以后会一一介绍,包括多图绘制神器、图表高清导出等。
发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美丽的图表了,然而图表轻易做不成美丽的...看到有一个网站上在卖的图表,感觉挺好看的,就用 HT for Web 3D 做了一个小例子,挺简单的,也挺好看的,哈哈~ Demo 地址: http://www.hightopo.com/demo/WireframeAnim...这个例子用 HT 实现真的很容易,首先创建一个 HT 中最基础的 dm 数据模型,然后将数据模型添加进 g3d 3d 组件中,再设置 3d 中的视角并把 3d 组件添加进 body 元素中: 1 dm...,我的思路是这样的,里层有一个节点,外层一个透明的节点,底部一个 3d 的文字显示当前的百分比。...最后,要动态的变化 chart 图表中的柱形图,我们得设置动画,并且将 3d 字体也同步更新数值: 1 setInterval(function(){ 2 if(node.a('myHeight
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有“特色”的图表库:一个手绘风格的 JS 图表库 —— Chart.xkcd,快收起你紧绷、严肃的面容让我们一起看看用手绘风格展示数据的效果...--引入 JS 库--> </script...xLabel:图表的 x 标签 yLabel:图表的 y 标签 data:需要可视化的数据 options:自定义设置 三、图表类型 Chart.xkcd 支持多样的图表类型,下面将逐一讲解和实现:...--引入 JS 库--> </script...雷达图是以在同一点开始的轴上显示的三个或更多个变量的二维图表的形式来显示多元数据的方法,其中轴的相对位置和角度通常是无意义的。
分子图表示学习是现代药物和材料发现中的一个基本问题。分子图通常由其2D拓扑结构进行建模,但最近研究发现,3D几何信息在预测分子功能中起着更为重要的作用。...然而,真实场景中3D信息的缺乏严重阻碍了分子图对其几何图表示的学习。...本文的学习范式是,在预先训练期间将3D分子结构的知识注入2D分子图编码器,使下游任务即使没有3D信息可用的情况下也可以受益于模型隐含的3D几何知识。...这两个SSL任务所获得的知识是相辅相成的,因此本文的GraphMVP框架将它们整合在一起,形成了一个更具有鉴别力的2D分子图表示。...在 GraphMVP中,本文更倾向于 VAE 类方法,原因如下:(1)两个分子视图之间的映射是随机的:多个3D构象对应于相同的2D拓扑; (2)下游任务需要一个显式的2D图表示(即特征编码器); (3)
nvd3——让你可以构建可重用的图表和图表组件,同时具有d3.js的强大功能。 rickshaw——用于创建可交互时间线图表的JavaScript工具。...Cubism.js——用于可视化时间线的D3插件。使用了Cubism构建更好的实时仪表盘,可以从Graphite、Cube和其他源拉取数据。...xkcd——让你可以使用D3在JavaScript中做出XKCD样式的图表。 jQuery Sparklines——一种jQuery插件,可以直接在浏览器中创建小型的内嵌图表。...Flotr——为Prototype.js所用的JavaScript图表库。...jQuery-Visualize——HTML的table元素驱动的HTML5 canvas图表。也是针对jQuery的图表插件。
;我为了方便都写到一个html中了;请把这个script标签中的内容单独写在一个js文件里 //整个插件写在一个立即执行函数里;就是function(){}();函数自执行;保证里面的变量不会与外界互相影响...号(叹号)或者;(分号)这不是写错了,为了防止那个二货写的js结束没有分号;而可能发生报错 /* ;function(win,doc,$,undefined){ }(window...比如你要点击按钮 添加input的值到 div里 var addHtml = function(demo,btn){//插件名,调用的时候直接new一下插件名就行了并传参数或者传对象(一般这个函数名手写字母大写比较好...add-1");//这里是实例1调用插件的代码 new addHtml("demo-2","add-2"); //这里是实例2调用插件的代码 //是不是明白为什么要写插件了;要封装...--这里是最简单的插件写法;当然还有传对象参数的插件等等。。。。-->
分享一个js的拖拽框选插件 官网:https://dragselect.com/ 源码:https://github.com/ThibaultJanBeyer/DragSelect.git 使用: pnpm...i dragselect 有前端大佬翻译了部分,并编写了一个html的demo https://gitee.com/ovsexia/DragSelect-Doc-Cn 我在使用过程中发现反选有点问题,...所以如果是跟我一样pnpm i下载下的版本,应该也会有这个问题,因此反选自己实现即可,这是我按照上面链接中的demo在vue模块化项目中的组件: TagDragSelect.vue <!...element.querySelector('input[type="checkbox"]').checked = false; }, //鼠标抬起后返回所有选中的元素
1.Chart.js 官网地址:http://chartjs.cn/ 2.优秀的bootstrap模板推荐 官网地址:http://bootswatch.com 3.wow+animate+js插件库
历时365天,【Excel催化剂】与【EasyShu】联手升级的Excel图表插件EasyCharts 2.0版本-EasyShu,即将面世。...接下来我们会陆陆续续介绍插件的各种功能,同时内测,等内测结束就发布。我们先从与表格完美融合的类别型图表开始讲解。...将时序型图表完美地嵌入表格中,能更加清晰明了地表示数据信息,尤其在咨询行业。废话少说,直接上插件一键操作的图表绘制视频。这次时序型图表主要使用【经典图表】和【位置标定】两个功能。...EasyCharts是EasyShu团队使用C#语言编写的一款Excel插件,主要用于数据可视化与数据分析。EasyCharts可以算是国内最先关注数据可视化的Excel图表插件。...现EasyCharts插件现在是1.0版本。EasyCharts1.0的升级版本2.0-EasyShu大大升级了原图表功能。其界面如下,具体功能以后会一一介绍,包括多图绘制神器、图表高清导出等。
前言 在之前的文章中介绍了Unity中一些关于浏览器相关的插件 大概介绍了十来款,只是简单的介绍了一下插件的基本功能和使用说明,并没有深入研究 那本篇文章将会对3D WebView插件做一个系列的文章介绍...包括基本的概念和方法,后面也会结合几个实例更加详细的介绍说明!...本文是关于Unity浏览器插件3D WebView的系列文章,系列文章地址:浏览器插件3D WebView ---- 3D WebView 插件详细介绍 3D WebView 插件官方下载地址:https...://store.vuplex.com/ ---- 基本概念介绍 3D WebView这款插件主要是实现了一个在Unity中可以做一个自己的浏览器!...之前也介绍过十来款可以在Unity中做一个浏览的插件,但是觉得这款是效果最好的
历时365天,【Excel催化剂】与【EasyShu】联手升级的Excel图表插件EasyCharts 2.0版本-EasyShu,即将面世。...接下来我们会陆陆续续介绍插件的各种功能,同时内测,等内测结束就发布。我们先从新型环形图开始讲解。...新型环形图主要是指平时需要大量辅助数据才能实现的环形图系列图表,比如南丁格尔玫瑰图、环形柱形图、度量仪表盘等。南丁格尔玫瑰图,是由南丁格尔发明的,她是英国护士和统计学家。...EasyCharts是EasyShu团队使用C#语言编写的一款Excel插件,主要用于数据可视化与数据分析。EasyCharts可以算是国内最先关注数据可视化的Excel图表插件。...现EasyCharts插件现在是1.0版本。EasyCharts1.0的升级版本2.0-EasyShu大大升级了原图表功能。其界面如下,具体功能以后会一一介绍,包括多图绘制神器、图表高清导出等。
前言: 前端最重要的就是美感,图片的显示也需要,博主在此分享一款灯箱JS插件,非常简单的调用即可实现全局的图片灯箱。...优势介绍 无需其他JavaScript编码 没有其他HTML片段 没有额外的CSS资源 没有其他图标/资产 无需额外处理动态内容和事件侦听器 效果图 调用方法 将以下代码插入到HTML底部 --> $(function
领取专属 10元无门槛券
手把手带您无忧上云