javascript高级程序设计pdf_分享 9 个 JavaScript 可视化工具

点击上方“Python数据之道”，选择“星标公众号”

精品文章，第一时间送达

作者 | arthur puszynski 

来源 | FreeCodeCamp

翻译 | Lemonbit

译文出品 | Python数据之道(PythonDataLab)

推荐 2019年最受欢迎的 

9 个 JavaScript 可视化工具

首先，简要介绍一下：

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

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

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

进入当前由 JavaScript 和 SVG(可缩放矢量图形)主导的数据可视化时代。 图表现在可以在所有浏览器上运行，无需特殊插件，支持交互性和动画，即使在最高分辨率的设备上也能看起来很清晰。

回顾了 50 多个可视化库，下面这 9 个产品脱颖而出，让我们一起来认识下：

D3.js

D3.js：

https://d3js.org/

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

D3 goes well beyond typical charting libraries, including many other smaller technical modules such as axes, colors, hierarchies, contours, easing, polygons, and more. All this makes for a steep learning curve.

Trying to create a simple chart can be complicated. All elements including the axes, and other chart items need to be defined explicitly. Many samples show how CSS can be used to style chart elements. No charting-based features apply automatically. If you want to get into the weeds and use creativity to fully control every element, it is the best choice. Working against the clock to meet data visualization project requirements it may not be the best choice starting from scratch.

D3.js can be a building block for a charting library. Developers have used D3 to make it easier to use chart solutions that consume it, such as NVD3.

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

D3.js is open source and free to use.

JSCharting

JSCharting： 

https://jscharting.com/

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

The gallery is divided into chart type and feature samples. The chart styling is polished and yields some clean looking charts. The overall visuals provide a clean and professional charting experience.

Included samples use a configuration object to customize charts. The settings to create and control chart types are very simple to use. Few property settings are needed to specify more complex chart types and JSCharting has strong and dynamic defaults meaning it attempts to choose the best settings for the scenarios automatically.

Included samples use a configuration object to customize charts. The settings to create and control chart types are very simple to use. Few property settings are needed to specify more complex chart types and JSCharting has strong and dynamic defaults meaning it attempts to choose the best settings for the scenarios automatically.

JSCharting is free for non commercial and personal use and also offers commercial license options that includes all chart types and products for a single fee.

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

Highcharts

Highcharts 

https://www.highcharts.com/

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

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

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

Highcharts is a popular JavaScript charting library used by many of the world’s largest companies. Charts are generated using SVG and fallback to VML for backward compatibility all the way to IE6/IE8. The demo charts demonstrate a fairly rich feature set but don’t wow visually. General documentation includes tutorials for many relevant topics and the API documentation is thorough.

The chart uses configuration options to create charts and the API is easy to use.

Highcharts is free for non-commercial and personal use. Commercial licensing is required for other usage and stock, map and gantt charts are licensed separately.

amCharts

amCharts 

https://www.amcharts.com/

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

The demo charts look very nice. Most demos offer a number of palettes and a slider UI to adjust chart variables in real-time. Documentation includes many tutorials and full API property descriptions.

Creating a chart feels slightly different from the configuration-based approach, and instead uses a more declarative API. It requires slightly more code to configure charts but gives a better code completion experience.

amCharts 提供免费许可证(带品牌标识)，其他用途需要付费许可。

Google Charts

Google Charts 

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

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

示例图表看起来很干净，效果很漂亮。 图库和扩展图库显示了许多图表类型，但按下菜单会显示更多类型(如日历)，这些类型未在这些图库列表中显示。

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

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

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

Google charts are powerful and easy to use.

The sample charts look clean and are easy on the eyes. The gallery and extended gallery shows many chart types, but pressing the hamburger menu reveals more types (like calendar) that are not shown in these gallery lists.

Each chart type has a dedicated tutorial with live examples. The tutorials include code for the related features and API listings. This is a pleasant experience getting started with a new chart library.

Charts are customized using the configuration options object. Data sets are populated using a DataTable class which can be consumed by all charts. Each chart type has unique options listed in the type specific tutorials. Property naming is standardized and many options work across all types.

Google charts is free, but there is a caveat. It is a web service and cannot be hosted locally. In the past Google has retired API’s so if your usage is mission critical you may want to pick another option.

ZingChart

ZingChart 

https://www.zingchart.com/

ZingChart 提供了许多图表类型，并集成了 angular、react 和其他框架。 它具有强大的功能集和许多自定义选项。

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

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

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

ZingChart 可以免费(带品牌标识)。 付费许可适用于非品牌使用。

ZingChart offers many chart types and integrates with angular, react, and other frameworks. It has a strong feature set with many customization options.

The demo charts show a range of styling themes, some of which look better than others, but the options to style them as needed are there. Demos don’t demonstrate all the available chart types.

Documentation includes tutorials for all the available types, a good number of features, and full API listing.

ZingChart uses configuration options to customize charts. Samples include many property settings such as font styling. These can get in the way of understanding what settings are required for a given chart.

ZingChart can be used for free with branding. Paid licensing is available for non-branded usage.

FushionCharts

FushionCharts 

https://www.fusioncharts.com/

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

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

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

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

FusionCharts 可免费用于个人用途(带品牌标识)。 付费许可可用于非品牌和商业用途。

FusionCharts has been around for many years starting as a Flash-based chart plugin. It is a robust chart visualization library. It supports many data formats including XML, JSON, and JavaScript, works in modern browsers and is backwards compatible back to IE6. Many JavaScript frameworks and server-side programming languages are also supported.

The chart gallery includes a large number of examples and they have a clean visual appearance.

Documentation includes good API descriptions, and examples of each chart type. The configuration properties are grouped by tasks and chart features.

Charts are created using configuration based options and is relatively easy to use. The list of properties can be lengthy when digging deeper into the API. All configuration properties are shallow such as {chartLeftMargin, showAlternateHGridColor }. It seems like an attempt to improve code completion.

FusionCharts is free for personal use with chart branding. Paid licensing is available for unbranded and commercial use.

KOOLCHART

KOOLCHART 

https://www.koolchart.com/

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

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

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

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

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

KoolChart is an HTML 5 canvas-based JavaScript charting library. A mapping and grid product is also available.

Their new v5 release includes a more interactive feature set and updated styling. The visuals are clean and modern. The use of canvas offers better performance at the expense of being raster based.

The samples use a string based XML to apply chart options which seems less practical than other approaches. These options look like HTML5 but are set through a JavaScript string.

The API is well documented with example charts for each property. A 173 page PDF manual is also available.

A two month trial period is available for evaluation. Licensing is required after the trial period expires.

Chart.js

Chart.js 

https://www.chartjs.org/

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

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

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

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

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

Chart.js is an open source JavaScript library supporting 8 chart types. It is a small js library at just 60kb. Types include line charts, bar charts, area charts, radar, pie charts, bubble, scatter plots, and mixed. A time series is also supported. It uses canvas element for rendering and is responsive on window resize to maintain scale granularity. It is backwards compatible to IE9. Polyfills are available to work with IE7 as well.

The sample visuals are fairly modern looking and include initial animations when drawing for the first time. It animates smoothly when adding series or data points in real-time. Chart options can be modified after and calling an update() function redraws the chart.

Sample source code is not shown the website gallery but is available in the GitHub repo. Configuration options are used to create and modify charts. The options API is clean and intuitive.

The documentation is thorough and includes tutorials with property API and code snippets.

Chart.js is an open source library and free to use for personal and commercial use which is a plus. The limited number of types can be an issue for more advanced dashboard requirements.

Conclusion

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

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

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

These are the best JavaScript chart libraries for 2019

First, a brief history:

With data collection and use continuing to increase exponentially, the need to visualize this data is becoming more important. Developers seek to consolidate millions of database records into beautiful charts and dashboards that humans can quickly and intuitively interpret.

Data visualization technology has continued to improve over the past decade and many advanced chart libraries are now available to consumers. In the early 2000s, chart generation was dominated by server side image bitmap charts. Plugins such as Flash and Silverlight offered a more interactive charting experience but with a heavy toll on download speed, battery life and system resources.

With the explosion of mobile and tablet usage, plugins were no longer supported on major platforms and developers had to shift to open client side technologies that could run everywhere. At the same time, the advent of very high resolution screens and more common zooming through touch gestures brought resolution independent vector charts to the forefront.

Enter the current era of data visualization dominated by JavaScript and SVG (Scalable Vector Graphics). Charts now run on all browsers, without special plugins, support interactivity and animations and look sharp even on the highest resolution devices. Reviewing over 50 visualization libraries, these 9 products stood out:

D3.js

D3.js is a very extensive and powerful graphics JavaScript library. It allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.

D3 goes well beyond typical charting libraries, including many other smaller technical modules such as axes, colors, hierarchies, contours, easing, polygons, and more. All this makes for a steep learning curve.

Trying to create a simple chart can be complicated. All elements including the axes, and other chart items need to be defined explicitly. Many samples show how CSS can be used to style chart elements. No charting-based features apply automatically. If you want to get into the weeds and use creativity to fully control every element, it is the best choice. Working against the clock to meet data visualization project requirements it may not be the best choice starting from scratch.

D3.js can be a building block for a charting library. Developers have used D3 to make it easier to use chart solutions that consume it, such as NVD3.

D3.js is open source and free to use.

JSCharting

JSCharting chart library supports a large number of chart types including maps, gantt, stock and others that often require separate libraries to use. It includes built-in maps of all world countries, and a library of SVG icons. A suite of standalone micro charts can render in any chart labels or in any div element on a page. UI controls (UiItems) are also included allowing for richer interactive charts. To control data or visualization variables in real-time is easy and charts can be exported to SVG, PNG, PDF, and JPG formats.

The gallery is divided into chart type and feature samples. The chart styling is polished and yields some clean looking charts. The overall visuals provide a clean and professional charting experience.

Included samples use a configuration object to customize charts. The settings to create and control chart types are very simple to use. Few property settings are needed to specify more complex chart types and JSCharting has strong and dynamic defaults meaning it attempts to choose the best settings for the scenarios automatically.

The documentation includes many tutorials and thorough API property descriptions. Many properties include example usage and sample links.

JSCharting is free for non commercial and personal use and also offers commercial license options that includes all chart types and products for a single fee.

Highcharts

Highcharts is a popular JavaScript charting library used by many of the world’s largest companies. Charts are generated using SVG and fallback to VML for backward compatibility all the way to IE6/IE8. The demo charts demonstrate a fairly rich feature set but don’t wow visually. General documentation includes tutorials for many relevant topics and the API documentation is thorough.

The chart uses configuration options to create charts and the API is easy to use.

Highcharts is free for non-commercial and personal use. Commercial licensing is required for other usage and stock, map and gantt charts are licensed separately.

amCharts

amCharts has recently released their version 4 which adds a strong SVG animation engine that allows creating movie-like scenes.

The demo charts look very nice. Most demos offer a number of palettes and a slider UI to adjust chart variables in real-time. Documentation includes many tutorials and full API property descriptions.

Creating a chart feels slightly different from the configuration-based approach, and instead uses a more declarative API. It requires slightly more code to configure charts but gives a better code completion experience.

amCharts offers a free license with branded charts and paid licenses for other usage.

Google Charts

Google charts are powerful and easy to use.

The sample charts look clean and are easy on the eyes. The gallery and extended gallery shows many chart types, but pressing the hamburger menu reveals more types (like calendar) that are not shown in these gallery lists.

Each chart type has a dedicated tutorial with live examples. The tutorials include code for the related features and API listings. This is a pleasant experience getting started with a new chart library.

Charts are customized using the configuration options object. Data sets are populated using a DataTable class which can be consumed by all charts. Each chart type has unique options listed in the type specific tutorials. Property naming is standardized and many options work across all types.

Google charts is free, but there is a caveat. It is a web service and cannot be hosted locally. In the past Google has retired API’s so if your usage is mission critical you may want to pick another option.

ZingChart

ZingChart offers many chart types and integrates with angular, react, and other frameworks. It has a strong feature set with many customization options.

The demo charts show a range of styling themes, some of which look better than others, but the options to style them as needed are there. Demos don’t demonstrate all the available chart types.

Documentation includes tutorials for all the available types, a good number of features, and full API listing.

ZingChart uses configuration options to customize charts. Samples include many property settings such as font styling. These can get in the way of understanding what settings are required for a given chart.

ZingChart can be used for free with branding. Paid licensing is available for non-branded usage.

FushionCharts

FusionCharts has been around for many years starting as a Flash-based chart plugin. It is a robust chart visualization library. It supports many data formats including XML, JSON, and JavaScript, works in modern browsers and is backwards compatible back to IE6. Many JavaScript frameworks and server-side programming languages are also supported.

The chart gallery includes a large number of examples and they have a clean visual appearance.

Documentation includes good API descriptions, and examples of each chart type. The configuration properties are grouped by tasks and chart features.

Charts are created using configuration based options and is relatively easy to use. The list of properties can be lengthy when digging deeper into the API. All configuration properties are shallow such as {chartLeftMargin, showAlternateHGridColor }. It seems like an attempt to improve code completion.

FusionCharts is free for personal use with chart branding. Paid licensing is available for unbranded and commercial use.

KOOLCHART

KoolChart is an HTML 5 canvas-based JavaScript charting library. A mapping and grid product is also available.

Their new v5 release includes a more interactive feature set and updated styling. The visuals are clean and modern. The use of canvas offers better performance at the expense of being raster based.

The samples use a string based XML to apply chart options which seems less practical than other approaches. These options look like HTML5 but are set through a JavaScript string.

The API is well documented with example charts for each property. A 173 page PDF manual is also available.

A two month trial period is available for evaluation. Licensing is required after the trial period expires.

Chart.js

Chart.js is an open source JavaScript library supporting 8 chart types. It is a small js library at just 60kb. Types include line charts, bar charts, area charts, radar, pie charts, bubble, scatter plots, and mixed. A time series is also supported. It uses canvas element for rendering and is responsive on window resize to maintain scale granularity. It is backwards compatible to IE9. Polyfills are available to work with IE7 as well.

The sample visuals are fairly modern looking and include initial animations when drawing for the first time. It animates smoothly when adding series or data points in real-time. Chart options can be modified after and calling an update() function redraws the chart.

Sample source code is not shown the website gallery but is available in the GitHub repo. Configuration options are used to create and modify charts. The options API is clean and intuitive.

The documentation is thorough and includes tutorials with property API and code snippets.

Chart.js is an open source library and free to use for personal and commercial use which is a plus. The limited number of types can be an issue for more advanced dashboard requirements.

Conclusion

The ecosystem of JavaScript charting libraries has evolved considerably over the last decade. Today, there are a large number of charting products that meet very diverse requirements, serving a wide range of projects though hundreds of chart types. Most libraries provide a free trial or branded version enabling you to evaluate the chart effectiveness with your own data, loading and project complexity.

It is easy for most chart libraries to deal with simple curated data sets and static visualizations. However, charts may not always handle things smoothly when real-world, dynamic data is visualized. More work may be required to adjust and arrange elements so that charts appear correct and this manual tweaking can break as new dynamic data is visualized.

To select the best JS chart solution for your unique needs, I recommend testing your own data against a couple of the libraries listed above to ensure an ideal fit for your current and future projects.

因译者水平有限，如果文章中有问题或者错误，请大家多多指正，谢谢。

来源： https://medium.freecodecamp.org/these-are-the-best-javascript-chart-libraries-for-2019-29782f5e1dc2

提醒福利

之前给大家推荐的《Python核心技术与实战》还在优惠期，原价 ￥99，限时优惠 ￥68，不要错过了。既然你要学 Python，为什么不跟着知名公司 Facebook 的一线程序员学呢？

100天，开启你的高手进阶之路，扫码免费试看。

留言打卡DAY xx

今日主题：聊聊你熟悉或者使用过的编程语言~

『留言打卡活动』

公号后台回复 “留言打卡”，了解活动详情。

-------------------End-------------------