13款经典JavaScript图形和图表绘制工具

2023-11-01

【IT168 技术】如今,在互联网上发布在线免费的Javascript图形和图表绘制工具越来越多。作者此前在一家网站从事复杂的图形学方面的工作,使用highchart,在那期间,没有大量的插件工具可供选择,不像现在,我们可以轻易地找到非常有用的图表库。作者认为,此种插件的兴起源于:

  Flash 是最佳的解决方案,大部分人从这方面迁移的;

  现在的浏览器和强大的计算机使其在实时数据方面的能力更加的容易;

  绘制矢量图的工具(技术取向)不同:VML、SVG、Canvas。

  当然,你也可以根据自身需求进行选择,正如之前提到的,使用各种技术导致一些插件只能在现代的浏览器的下支持canvas,其他一些技术结合在一起可运行在不同的平台上或旧版本的浏览器上。

  在这篇文章中,我们搜集了13个JavaScript插件可用于绘制图形和图表。还有一部分是独立的框架支持bars, lines, pies甚至还有一些更加复杂的图形,比如,plots, Venn diagrams, heatmaps, newick trees, 2D-scatter plots, 2D-scatter bubble plots, 3D-scatter plots。

  1. Flotr2

  Flotr2是一个独立框架,支持HTML5绘制图表和图形。它是flotr 的分支,可移除 Prototype的依赖,包含许多改进,支持lines, bars, candles, pies and bubbles charts。支持旧版本的浏览器如IE6和移动平台。

  2. Rickshaw

  Rickshaw是一种用于创建交互式时间列图的JavaScript工具箱。它依赖于D3可视化库、Query扩展和jQuery UI。

  3. D3

  一款出色且高效的可视化库,可用于图表的插件。使用D3你可以捆绑任意一个数据到DOM(Document Object Model),然后采用数据驱动转化成文件。 作为一个示例,你可以用D3从数组中生成一个基本的 HTML表格。或者你也可以利用相同的数据来创建一个互动的SVG柱状图。

  4. AwesomeChartJS

  AwesomeChartJS作为一个简单的Javascript库,它可以被用来创建基于HTML 5 canvas元素的图表。目的是让用户只需用几行代码就可创建一个简单的图表。

  5. CanvasXpress

  CanvasXpress是一个Javascript库利用tag在HTML5中执行任务,该库开发的目的是为 BMS系统生物学平台创建可视化的核心组件。它适用于高度复杂的图表和图形。

  6. HumbleFinance

  HumbleFinance是HTML5数据可视化编译工具。作为交互式图形的范本,与Flash工具类似,工具本身是用JavaScript编译的,使用Prototype和Flotr 库,它可以用于显示实际数值共享一个轴的任意两个2D数据集。

  7. Graph

  Graph是HTML5 Javascript图表库支持超过20种不同类型的图表。使用HTML5 canvas标签,RGrap可以在Web浏览器中创建Javascript图表。也是就说页面响应时间更快,Web服务器加载时间更少。

  8. dygraphs

  dygraphs是一个开源的 JavaScript库,可生成时间系列的交互式zoomable图表。它的设计是被用来显示密集型的数据集,能够让用户探索和解释这些数据。这是一款轻量级的解决方案,运行在IE中。

  9. Highchart

  Highchart是用纯JS编写的图表库,给你的网站或者Web应用呈现最直观、交互式的图表。 Highcharts 目前支持 line, spline, area, areaspline, column, bar, pie and scatter等图表类型。这个著名的图表解决方案曾被许多知名的企业使用,比如 IBM, NASA, Siemens, HP等。

  10. gRaphael

  gRaphael的目标是为您的网站创建绝妙的图表,基于Raphaël 图形库。通过示例能看到静态和动态的图表场景。gRaphaël目前支持Firefox 3.0+,Safari 3.0+, Opera 9.5+、IE 6.0+以上版本。

  11. jqPlot

  jqPlot是jQuery Javascript 框架的绘图和图表插件。 jqPlot能绘制出美妙的line,bar和pie图形,具有许多独特的性能。

  12. JS Charts

  JS Charts是JavaScript只需很少或者无需代码即可实现的图形生成器。利用JS来绘制图表既简单又容易,因为你只需要客户端脚本即可实现(通过Web浏览器实现)。无需额外的插件或者服务器模块。只需要准备脚本、XML图表数据,JSON或JavaScript Array和绘图工具即可。

  13. JSXGraph

  JSXGraph是一款跨浏览器的交互式几何图、函数绘图、图表的数据可视化工具。它完全在JavaScript实现,不依赖于任何库,并且使用SVG,VML和canvas。JSXGraph容易嵌入网页中,体积小,小于100K字节。无插件,采取特别措施优化性能。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

13款经典JavaScript图形和图表绘制工具 的相关文章

  • Mapbox GL 中的 MaxBounds 和自定义非对称填充

    我有一个 Mapbox GL JS 应用程序 在地图上显示一些小部件 为了确保地图上的任何内容都不会被它们隐藏 我使用以下命令添加了一些填充map setPadding 这是一个不对称的 在我的例子中左边比右边大 它按预期工作 例如fitB
  • 这种类型注释在没有 TypeScript 的 React 代码中如何工作?

    我在看这段代码示例 https reacttraining com react router web example auth workflow在 ReactRouter 页面上 这篇文章很有趣 const PrivateRoute com
  • API 使用令牌向 odoo 进行身份验证

    我想使用令牌从 Express 应用程序向 Odoo 进行身份验证 我在用odoo xmlrpc https www npmjs com package odoo xmlrpc连接 Odoo 的节点模块 我的快递应用程序 Odoo 要求 A
  • JS 保留以零结尾的小数[重复]

    这个问题在这里已经有答案了 在JavaScript中 是否可以 锁定 十进制数 以保留以零结尾的 浮点数 例如 我有 2 个不同的数字 如下所示 伪代码 let a 1 0 let b 1 00 a b true should be fal
  • React JS 服务器端问题 - 找不到窗口

    你好 我正在尝试在我的reactJS项目中使用react rte 我有服务器端渲染 每次我想使用这个包时 我都会得到 return msie 6 9 b test window navigator userAgent toLowerCase
  • JavaScript 将键添加到数组中的每个值

    我下面有这个数组 它由一个简单的数组组成 我想要完成的是放一把钥匙id在每个数组值前面以实现类似的效果 id a id b id c id d 有没有一种简单的方法可以做到这一点 任何帮助将不胜感激 谢谢 var test a b c d
  • 使用 CSS 网格布局使网格项内的元素高度相等

    我在长度超过 4 的 div 中有一系列文章 没有任何舍入行标签 我需要将其表示为每行 3 篇文章 列 的表格 可能包含display grid 每篇文章都有页眉 章节和页脚 如何在每行文章内实现每个标题的等高 每个部分的等高以及与文章底部
  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用
  • 如果没有 /// 标签,TypeScript 的“将 JavaScript 输出合并到文件中”选项无法推断出正确的脚本顺序

    我正在开发一个使用 将 JavaScript 输出合并到文件中 选项的 TypeScript 解决方案 我经常引用另一个文件中定义的项目 例如 In MyBaseClass ts export class MyBaseClass In My
  • CSS 网格框架中的间距有什么作用?

    我正在深入研究 Web 开发 并且正在使用 Blueprint CSS 框架 其中包括网格系统 我有几个问题 水沟有什么用处 当然 它们不用于在列之间包含空间 因为您可以使用 margin CSS 属性来实现这一点 对吗 或者排水沟只是一种
  • 如何使用 window.onerror 捕获所有 javascript 错误? (包括道场)

    这个问题是后续问题javascript 如何在弹出警报中显示脚本错误 https stackoverflow com questions 2604976 javascript how to display script errors in
  • 如何使用新的analytics.js跟踪多个帐户?

    我需要使用 Google 的新的analytics js 跟踪一个页面上两个帐户的综合浏览量 有大量教程和示例如何使用较旧的 ga js 进行操作 但我发现的只是这个分析文档页面 https developers google com an
  • 适用于移动设备的响应式订单确认电子邮件?

    我从未见过令人惊叹的订单确认 发票电子邮件 即使是最好的 html5 网站也会发送糟糕的订单确认电子邮件 有时是纯文本 我相信这是因为发票通常需要使用表格来显示购买的物品 这在移动设备上实现起来非常困难 我发现了一些让手机上的表格更易于管理
  • 如何删除标题中的粗体?

    我有一个标题 h1 THIS IS A HEADLINE h1 如何使短语 THIS IS 不加粗 其余部分不做任何更改 我在文本装饰中找不到任何相关标签 标题看起来很粗体 因为它大尺寸 如果您已应用粗体或想要更改行为 您可以执行以下操作
  • 摩纳哥:如何添加内联自动完成/代码建议?

    我找不到任何有关如何添加内联自动完成功能的示例 如下图所示 有人可以指导我如何在摩纳哥做到这一点吗 这可以在 v1 66 中启用 现在在 Insiders 中 The editor quickSuggestions设置现在接受内联为 配置值
  • Jwt 签名和前端登录身份验证

    我有这个特殊的 jwt sign 函数 Backend const token jwt sign id user id process env TOKEN SECRET expiresIn 1m res header auth token
  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是
  • 确定 Javascript 中的日期相等性

    我需要找出用户在 Javascript 中选择的两个日期是否相同 日期以字符串 xx xx xxxx 形式传递给该函数 这就是我需要的全部粒度 这是我的代码 var valid true var d1 new Date datein val
  • 如何映射轮播的子项数组?

    我正在尝试将 Carousel 组件包装在映射对象数组周围作为组件的子级 目前我只能让映射创建映射对象的 1 个子对象 轮播需要像这样
  • 如何在 Jquery/Javascript 中绑定模糊和更改,但只触发一次函数?

    我试图在选择元素更改时触发函数 由于 Ipad 在 on change 方面遇到问题 我还想绑定到 blur 这在 Ipad 上工作得很好 但是我不希望两个事件都触发该函数两次 所以我需要某种挂钩来确保两个事件是否都触发change and

随机推荐

  • 联想小新air14 降频问题

    联想小新air14 2020款 AMD版本 当CPU温度过高会锁频在0 4G 降温降功率之后好一阵才能正常运行 解决方案 AMD版本下载软件Ryzen Controller Intel卡有自己的软件throttlestop或者XTU 使用软
  • 【SGU 176】 Flow construction

    176 Flow construction time limit per test 0 5 sec memory limit per test 4096 KB input standard output standard You have
  • JAVA中重载和重写的区别

    重载 重载发生在同一类中 方法名一样 参数列表不同 不关心返回值类型和权限修饰符是否相同 class Test public void test 方法名相同参数列表相同 即便返回值类型不同也不是重载 会抛出异常 public int tes
  • 微信小程序 canvas服务器图片,微信小程序导出当前画布指定区域的内容并生成图片保存到本地相册(canvas)...

    最近在学小程序 在把当前画布指定区域的内容导出并生成图片保存到本地这个知识点上踩坑了 这里用到的方法是 wx canvasToTempFilePath 该方法作用是把当前画布指定区域的内容导出生成指定大小的图片 并返回文件路径 详情 看文档
  • Typora 闭合二重、三重积分不美观问题

    参考链接 知乎的二重闭曲面积分号怎么输入 Maxwell的回答 知乎 结论 1 行内公式 二重 int kern 7pt int kern 21mu bigcirc 三重 int kern 8 5pt int kern 8 5pt int
  • Git常用命令速查表

    转载来源 web项目聚集地 https mp weixin qq com s GNgmT9e8 Ps2D5ib7WR44w 名词 master 默认开发分支 origin 默认远程版本库 Index Stage 暂存区 Workspace
  • Git第四讲 中文乱码解决

    解决GIT中文乱码问题 ls不能显示中文目录 解决办法 在git git completion bash中增加一行 alias ls ls show control chars color auto git commit不能提交中文注释 解
  • linux内核网络子系统初探2---socket层

    linux内核网络子系统初探2 socket层 一 内核网络socket层相关 接着上文 从这章开始 将按照五层网络模型的顺序逐层分析内核代码 linux1 0网络协议栈部分代码如下 root localhost linux 1 0 ls
  • 操作系统-基础

    目录 1 冯诺依曼体系推导与介绍 2 外存与内存 3 操作系统 什么是进程 进程控制块 PCB 调度算法 并发与并行 1 冯诺依曼体系推导与介绍 计算机的作用就是为了解决人的问题 而要解决问题 首先需要将数据或是问题输入到计算机当中 所以计
  • 微信小程序 检测返回事件 左上角返回按钮

    微信小程序 检测返回事件 微信小程序暂时来说没有相对应的检测左上角的返回按钮的事件 不过可以利用app js和onShow事件来完成这个小功能 1 主要就是在app js里面为页面设置相对应的值 例如a页面跳到b页面 然后从b页面返回a页面
  • 【python 2】python 进阶

    文章目录 一 函数 1 函数的参数 2 全局变量和局部变量 3 内部函数 4 闭包 5 匿名函数 6 系统自带的函数 7 递归函数 二 文件操作 三 os 模块 1 os path 2 os 里边的函数 四 异常 五 推导式 1 列表推导式
  • 安卓平板标注pdf,坚果云+zotero+xodo

    问题描述 之前买了个平板 但是使用zotero编辑pdf会出现不能保存等问题 也就是无法实现安卓平板标注pdf且能够多平台同步 WPS是保存到本地一个副本 福昕阅读器提示只能另存或者放弃编辑 静读天下直接就没有保存 这里指的是坚果云app里
  • c++ oop面向对象

    定义基类 基类通常都应该定义一个虚析构函数 即使该函数不执行任何实际操作也是如此 基类必须将它的两种成员函数区分开来 一种是基类希望其派生类进行覆盖的函数 既虚函数 使用virtual关键字 一种是基类希望派生类直接继承而不要改变的函数 c
  • 深度学习基础篇之卷积神经网络(CNN)

    一 CNN的基本结构 首先我们来看CNN的解百纳结构 一个常见的图像识别CNN模型如下图 从图中可以看出最左边的图像就是模型的输入层 在计算机中就是若干个矩阵 这点与DNN类似 接着是卷积层 Convolution Layer 这个层是CN
  • VUE之高德地图轨迹绘制与轨迹回放

    步骤 安装依赖 npm install vue amap S main js中注册 import AMap from vue amap Vue use AMap AMap initAMapApiLoader key 你申请的key plug
  • mysql到sqlite数据传输

    在实际的工作中需要将mysql数据库表中的数据同步到sqlite对应的表中 主要有两种方法 第一种是使用Navicat里的数据传输 第二种是使用程序来实现 第一种 程序实现 1 添加sqlite驱动 本项目是通过maven管理 在pom x
  • kali linux eth0网卡消失解决方法

    eth0网卡消失 不知道什么原因 kali的eth0网卡突然不见了 ifconfig 发现eth0网卡不见了之后可以使用 ifconfig eth0 up 但是 eth0没有ipv4地址 还是没有办法上网 然后我们打开interfaces修
  • WebSocket 详解教程

    概述 WebSocket 是什么 WebSocket 是一种网络通信协议 RFC6455 定义了它的通信标准 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议 为什么需要 WebSocket 了解
  • Jmeter学习

    个人学习笔记 接口测试分类 接口架构 接口测试要点 接口测试工具 一 接口测试分类 内部接口 1 被测系统各个子模块之间的接口 或被测系统提供给内部使用的接口 外部接口 1 被测系统调用外部接口 2 系统对外提供的接口 二 接口架构 1 基
  • 13款经典JavaScript图形和图表绘制工具

    IT168 技术 如今 在互联网上发布在线免费的Javascript图形和图表绘制工具越来越多 作者此前在一家网站从事复杂的图形学方面的工作 使用highchart 在那期间 没有大量的插件工具可供选择 不像现在 我们可以轻易地找到非常有用