javascript 图表_这些是2019年最好JavaScript图表库

javascript 图表

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.

数据可视化技术在过去十年中一直在不断改进，现在许多高级图表库可供消费者使用。 在2000年代初，图表生成主要由服务器端图像位图构成。 诸如Flash和Silverlight之类的插件提供了更具交互性的制图体验，但下载速度，电池寿命和系统资源却遭受了沉重打击。

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:

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

D3.js (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.js是一个非常强大的图形JavaScript库。 它允许您将任意数据绑定到文档对象模型(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.

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

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.

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

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来简化使用消耗D3的图表解决方案，例如NVD3。

D3.js is open source and free to use.

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

JSCharting (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.

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.

随附的示例使用配置对象来自定义图表。 创建和控制图表类型的设置非常易于使用。 只需很少的属性设置即可指定更复杂的图表类型，并且JSCharting具有强大而动态的默认值，这意味着它会尝试自动为方案选择最佳设置。

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

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

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 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.

Highcharts是一个流行JavaScript图表库，被许多世界上最大的公司使用。 使用SVG生成图表，并回退到VML，以实现向后兼容IE6 / IE8的所有功能。 演示图表展示了相当丰富的功能集，但外观上并不令人赞叹。 常规文档包括许多相关主题的教程，并且API文档非常详尽。

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

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

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.

Highcharts可免费用于非商业和个人用途。 其他用途需要商业许可，并且库存，地图和甘特图分别获得许可。

图表 (amCharts)

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

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.

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

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.

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

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

amCharts提供带有品牌图表的免费许可证以及其他用途的付费许可证。

Google图表 (Google Charts)

Google charts are powerful and easy to use.

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

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.

每种图表类型都有专门的教程和实时示例。 这些教程包括相关功能和API清单的代码。 这是从新图表库开始的愉快经历。

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.

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

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.

Google图表是免费的，但有一个警告。 它是一个Web服务，不能在本地托管。 过去，Google已经淘汰了API，因此，如果您的使用对任务至关重要，则可能需要选择其他选项。

金图 (ZingChart)

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

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

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.

文档包括所有可用类型的教程，大量功能以及完整的API清单。

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使用配置选项来自定义图表。 示例包括许多属性设置，例如字体样式。 这些可能会妨碍您了解给定图表需要哪些设置。

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

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

融合图 (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.

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

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.

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

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.

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

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

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

酷乐图 (KOOLCHART)

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

KoolChart是基于HTML 5画布JavaScript图表库。 还提供了地图和网格产品。

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.

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

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.

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

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

该API的文档详细说明了每个属性的示例图表。 也提供173页的PDF手册。

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

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

Chart.js (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.

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

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.

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

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.

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

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

该文档是详尽的，并且包含有关属性API和代码段的教程。

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.

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

结论 (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.

在过去的十年中，JavaScript图表库的生态系统有了长足的发展。 如今，有大量的图表产品可以满足非常多样化的要求，通过数百种图表类型为广泛的项目提供服务。 大多数库提供免费的试用版或商标版，使您可以利用自己的数据，加载和项目复杂性来评估图表的有效性。

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.

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

翻译自: https://www.freecodecamp.org/news/these-are-the-best-javascript-chart-libraries-for-2019-29782f5e1dc2/

javascript 图表