专栏首页相约机器人2019年最好的JavaScript图表库

2019年最好的JavaScript图表库

作者 | arthur puszynski

来源 | Medium

编辑 | 代码医生团队

首先,简要介绍一下:

随着数据收集和使用持续呈指数级增长,对这些数据进行可视化的需求变得越来越重要。开发人员寻求将数百万个数据库记录整合到美丽的图表和仪表板中,人类可以快速直观地解释这些记录。

数据可视化技术在过去十年中不断改进,现在消费者可以使用许多高级图表库。在21世纪初期,图表生成由服务器端图像位图图表主导。Flash和Silverlight等插件提供了更具交互性的图表体验,但下载速度,电池寿命和系统资源都很重要。

随着移动和平板电脑使用量的激增,主要平台不再支持插件,开发人员不得不转向可以在任何地方运行的开放客户端技术。与此同时,高分辨率屏幕的出现以及通过触摸手势进行更常见的缩放,使分辨率独立的矢量图表成为最前沿。

进入当前由JavaScript和SVG(可缩放矢量图形)主导的数据可视化时代。图表现在可以在所有浏览器上运行,无需特殊插件,支持交互性和动画,即使在最高分辨率的设备上也能看起来很清晰。回顾了50多个可视化库,这9个产品脱颖而出:

D3.js

https://d3js.org/

D3.js是一个非常广泛和强大的图形JavaScript库。它允许您将任意数据绑定到文档对象模型(DOM),然后将数据驱动的转换应用于文档。

D3远远超出了典型的图表库,包括许多其他较小的技术模块,如轴,颜色,层次结构,轮廓,缓动,多边形等。所有这些都使得学习曲线陡峭。

尝试创建简单的图表可能很复杂。需要明确定义包括轴和其他图表项在内的所有元素。许多示例显示了如何使用CSS来设置图表元素的样式。没有基于图表的功能自动应用。如果你想进入杂草并利用创造力来完全控制每一个元素,那么它是最好的选择。为了满足数据可视化项目的要求,它可能不是从头开始的最佳选择。

D3.js可以是图表库的构建块。开发人员使用D3使其更容易使用消耗它的图表解决方案,例如NVD3。

D3.js是开源的,可以免费使用。

JSCharting

https://jscharting.com/

JSCharting图表库支持大量图表类型,包括地图,甘特图,股票和其他通常需要单独库使用的图表类型。它包括所有世界国家的内置地图和SVG图标库。一套独立的微图表可以在任何图表标签或页面上的任何div元素中呈现。还包括UI控件(UiItems),允许更丰富的交互式图表。实时控制数据或可视化变量非常简单,图表可以导出为SVG,PNG,PDF和JPG格式。

图库分为图表类型和要素样本。图表样式经过抛光处理,产生了一些干净的图表。整体视觉效果提供了清晰而专业的图表体验。

包含的示例使用配置对象来自定义图表。创建和控制图表类型的设置非常易于使用。指定更复杂的图表类型需要很少的属性设置,而JSCharting具有强大的动态默认值,这意味着它会尝试自动为场景选择最佳设置。

该文档包含许多教程和全面的API属性描述。许多属性包括示例用法和示例链接。

JSCharting可免费用于非商业和个人用途,并提供商业许可选项,包括所有图表类型和产品,只需一次性费用。

Highcharts

https://www.highcharts.com/

Highcharts是一个流行的JavaScript图表库,被许多世界上最大的公司使用。使用SVG生成图表并回退到VML,以便向后兼容IE6 / IE8。演示图表演示了相当丰富的功能集,但不会在视觉上令人惊叹。一般文档包括许多相关主题的教程,API文档是全面的。

该图表使用配置选项来创建图表,API易于使用。

Highcharts可免费用于非商业和个人用途。其他用途和库存需要商业许可,地图和甘特图是单独许可的。

amCharts

https://www.amcharts.com/

amCharts最近发布了他们的第4版,增加了一个强大的SVG动画引擎,可以创建类似电影的场景。

演示图表看起来非常好。大多数演示提供了许多调色板和滑块UI来实时调整图表变量。文档包括许多教程和完整的API属性描述。

创建图表与基于配置的方法略有不同,而是使用更具声明性的API。它需要稍多的代码来配置图表,但提供更好的代码完成体验。

amCharts提供免费许可证,包括品牌图表和其他用途的付费许可证。

谷歌图表

https://developers.google.com/chart/

Google图表功能强大且易于使用。

样本图表看起来很干净,很容易在眼睛上。图库和扩展图库显示了许多图表类型,但按下汉堡菜单会显示更多类型(如日历),这些类型未在这些图库列表中显示。

每种图表类型都有一个带有实例的专用教程。这些教程包括相关功能和API列表的代码。这是一个开始使用新图表库的愉快体验。

使用配置选项对象自定义图表。使用DataTable类填充数据集,可以由所有图表使用。每种图表类型都有特定类型教程中列出的唯一选项。属性命名是标准化的,许多选项适用于所有类型。

谷歌图表是免费的,但有一点需要注意。它是一种Web服务,无法在本地托管。过去,谷歌已退役API,因此,如果您的使用是关键任务,您可能需要选择其他选项。

ZingChart

https://www.zingchart.com/

ZingChart提供了许多图表类型,并集成了角度,反应和其他框架。它具有强大的功能集和许多自定义选项。

演示图表显示了一系列样式主题,其中一些看起来比其他主题更好,但是根据需要设置样式的选项就在那里。演示不会演示所有可用的图表类型。

文档包括所有可用类型的教程,大量功能和完整的API列表。

ZingChart使用配置选项来自定义图表。示例包括许多属性设置,如字体样式。这些可能会妨碍了解给定图表所需的设置。

ZingChart可以免费使用品牌。付费许可适用于非品牌使用。

FushionCharts

https://www.fusioncharts.com/

FusionCharts作为基于Flash的图表插件开始存在多年。它是一个强大的图表可视化库。它支持许多数据格式,包括XML,JSON和JavaScript,可在现代浏览器中使用,并向后兼容IE6。还支持许多JavaScript框架和服务器端编程语言。

图表库包含大量示例,并且具有干净的视觉外观。

文档包括良好的API描述以及每种图表类型的示例。配置属性按任务和图表功能分组。

图表是使用基于配置的选项创建的,并且相对易于使用。在深入研究API时,属性列表可能会很长。所有配置属性都很浅,例如{chartLeftMargin,showAlternateHGridColor}。这似乎是尝试改进代码完成。

FusionCharts可免费用于图表品牌的个人用途。付费许可可用于非品牌和商业用途。

KOOLCHART

https://www.koolchart.com/

KoolChart是一个基于HTML 5画布的JavaScript图表库。还提供映射和网格产品。

他们的新v5版本包括更具交互性的功能集和更新的样式。视觉效果干净而现代。画布的使用以牺牲基于栅格为代价提供了更好的性能。

这些示例使用基于字符串的XML来应用图表选项,这似乎不如其他方法实用。这些选项看起来像HTML5,但是通过JavaScript字符串设置。

API已详细记录,每个属性都有示例图表。还提供173页PDF手册。

两个月的试用期可供评估。试用期结束后需要许可。

chart.js

https://www.chartjs.org/

Chart.js是一个支持8种图表类型的开源JavaScript库。这是一个只有60kb的小型js库。类型包括折线图,条形图,面积图,雷达,饼图,气泡,散点图和混合。还支持时间序列。它使用canvas元素进行渲染,并对窗口大小调整进行响应以保持缩放粒度。它向后兼容IE9。Polyfill也可以与IE7一起使用。

样本视觉效果相当现代,并且在首次绘制时包含初始动画。在实时添加系列或数据点时,它可以平滑动画。可以在调用update()函数重绘图表之后修改图表选项。

示例源代码未显示在网站库中,但可在GitHub存储库中找到。配置选项用于创建和修改图表。选项API简洁直观。

该文档是完整的,包括有属性API和代码片段的教程。

Chart.js是一个开源库,可以免费用于个人和商业用途。对于更高级的仪表板要求,有限数量的类型可能是一个问题。

结论

JavaScript图表库的生态系统在过去十年中发生了很大变化。如今有大量的图表产品可满足各种不同的需求,通过数百种图表类型为各种项目提供服务。大多数库提供免费试用版或品牌版,使您能够使用自己的数据,加载和项目复杂性来评估图表的有效性。

大多数图表库很容易处理简单的策划数据集和静态可视化。但是,当可视化真实世界的动态数据时,图表可能无法始终顺利处理。可能需要做更多的工作来调整和排列元素,以便图表看起来正确,并且当新的动态数据可视化时,这种手动调整可能会中断。

要根据您的独特需求选择最佳的JS图表解决方案,我建议您针对上面列出的几个库测试您自己的数据,以确保适合您当前和未来的项目。

本文分享自微信公众号 - 相约机器人(xiangyuejiqiren)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ABAP system landscape和vue项目webpack构建的最佳实践

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • 将Chrome调试器里的JavaScript变量保存成本地JSON文件

    我写了一个系列的文章,主要用来搜集一些供程序员使用的小工具,小技巧,帮助大家提高工作效率。

    Jerry Wang
  • 100行代码让您学会JavaScript原生的Proxy设计模式

    面向对象设计里的设计模式之Proxy(代理)模式,相信很多朋友已经很熟悉了。比如我之前写过代理模式在Java中实现的两篇文章:

    Jerry Wang
  • 微信小程序开发系列六:微信框架API的调用

    通过前面五个章节的介绍,大家对微信小程序的视图和控制器,微信调试器,以及如何在微信控制器里编写JavaScript函数来响应微信小程序的用户事件已经有了一个最基...

    Jerry Wang
  • npm scripts的生命周期管理

    我们平时阅读一些开源项目,可能会发现有些项目的package.json里的scripts区域定义的脚本很复杂,令人眼花缭乱。

    Jerry Wang
  • SAP UI5加载xml视图的全过程

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • 如何用Chrome自带的截屏功能截取超过一个屏幕的网页

    前端开发人员经常需要将当前的网页截图发给产品经理讨论。如果网页很长,一个屏幕显示不下,那么操作系统自带的截图功能就没有办法截取整个屏幕了。

    Jerry Wang
  • 微信小程序开发系列七:微信小程序的页面跳转

    这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转。

    Jerry Wang
  • 一些SAP UI5的控件无法按照预期渲染的错误分析方法和解决方案

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • Cordova应用的JavaScript代码和自定义插件代码的调试

    我之前写过三篇Cordova相关的技术文章。当我们使用Cordova将自己开发的前端应用打包安装到手机上后,可能会遇到需要调试Cordova应用的时候。

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券