5个最好的javascript免费图表库

在我们的项目中包含图表变得比你想象的要容易。外面有很多用javascript编写的图表组件, 当你要使用图表以图形方式漂亮地显示某些信息而不是使用html表时, 可以使你的工作变得更轻松。

但是, 如果你最终实现第一个图表库, 则由于对旧浏览器不兼容, 文档不完善以及功能有限等诸多原因而发现, 则此任务可能对你来说是一个严重的问题。

在项目上开始使用图表库的所有功能之前, 务必先阅读该文档。

今天, 此顶部将为你提供5种最佳的JavaScript免费图表库。

顶部从最常用的图表库之一morris.js开始, 该库使你可以通过简单的初始化来创建简单的图表.Morris.js是为时序图提供动力的库。这是用于绘制折线图, ​​条形图, 面积图和甜甜圈图的非常简单的API。尽管它没有提供很多功能, 但是有时候这是完成日常开发人员任务所需要的。

演示版

Chartist为你提供了一个具有许多类型的完整图表库, 具有响应能力并且包含许多功能, 而这些功能并不是Web上所有可用的图表库都能做到的。 Chartist允许你添加插件(可以用插件定制的插件, 是吗？)来扩展图表的基本功能。你可以开发自己的插件, 也可以使用其他人已经开发的插件。

• 使用约定优于配置时的简单处理
• 使用清晰的关注点分离时具有极大的灵活性(带有CSS的样式和带有JS的控件)
• SVG的用法
• 完全响应且独立于DPI
• 媒体查询的响应式配置
• 使用Sass完全构建和可定制

试试小提琴|快速开始

使用Google使用的相同图表工具, 完全免费, 并保证三年的向后兼容性。 Google图表工具功能强大且使用起来非常简单, 只需阅读文档并使用示例即可。

• 它们是可定制的
• 很多例子
• 免费提供许多专业图表

演示| Wiki和范例

D3.js是一个JavaScript库, 用于根据数据处理文档。 D3可帮助你使用HTML, SVG和CSS使数据栩栩如生。 D3不仅是制图库, 你还可以在主页上发现更多功能并阅读该库的文档。

演示版

该库使你可以轻松地为Web项目创建交互式图表。 Highcharts由成千上万的开发人员和全球100家最大的公司中的61家使用, 是市场上最简单但最灵活的图表JavaScript API。由于功能众多, 因此这是一个付费库, 但请不要担心！如果你的项目不将高价图用于商业目的, 则可以根据知识共享署名-非商业3.0许可免费使用它。

• 它使用SVG
• 高支持跨浏览器
• 高度可定制
• 很多图表

Highcharts具有更多组件, 例如Highmaps(带有javascript的动态地图)和Highstocks(更多图表…), 可高度自定义并具有良好的性能, 它将对你的项目非常有帮助。如果你在尝试将图表导出到客户端图像时遇到麻烦, 请查看本文, 如果你需要此功能, 它可能会很有用。

荣誉奖

Chart.js

Github

Chart.js是一个简单的HTML5图表库, 可与canvas标记一起使用。你可以通过8种不同的方式来可视化数据, 每种方式都具有动画效果且可自定义。

如果你认为我们忘记了其他有用的图表库, 请在评论框中与我们分享。