整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Chart.js - 漂亮的Javascript图表

Chart.js - 漂亮的Javascript图表开源库

是一个使用简单、动效现代酷炫js图表库,用来构建专业美观的数据图表。

介绍

Chart.js 是一个基于 canvas 的可视化开源库。它可以用于构建简单漂亮的 H5 图表,满足产品数据可视化的需求。

官网截图

特点

  • 包含6种不同的常用图表,每种方式都有酷炫的动画,以及一大堆的定制选项和交互性扩展;
  • 兼容性好。基于HTML5 canvas ,兼容所有现代浏览器,并且支持 IE7/8;
  • 无依赖的超级轻量级产品,gzip后大小仅11.01kb。
  • 智能响应式,如果浏览器改变了大小,Chart.js 会重新调整图表的大小,同时为这个大小提供了完美的缩放粒度;
  • 支持模块化加载,并且每个图表类型都已经分离,可以按需加载项目所需的图表类型;
  • 针对鼠标和触摸设备上提供了对画布工具提示的简单支持,也支持自定义触发事件,能满足复杂的交互需求。

官方文档(英文)

使用体验

图表需求在互联网产品中极其常见,一般的图表库能把人给丑哭,开发一个好看的图表功能,需要投入的精力非常多。Chart.js 就是一款优秀漂亮的图表解决方案,不仅可以用在pc端中后台项目上,由于其出色的响应式设计,使得用在移动端上表现尤为亮眼,而且使用简单、API简洁,开箱即用的特点,直到现在都是我选择图表库的首选。

虽然 Chart.js 基于HTML5,不仅能用在web、小程序上,也能用混合开发的方式用在App产品中。

遗憾的是,虽然目前 Chart.js 足够好看,但并不支持样式定制,样式也不偏中性,所以对视觉设计要求高的产品需求,如果风格不相近的话,使用起来会有些突兀。

免费使用说明

Chart.js 是开放源代码,基于MIT许可开源,我们可以免费使用在任何项目。

关注我,持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的相关网址。

位工作党平时上班的时候,相比不少人都需要制作PPT之类的文件,用来进行汇报或者参加各种会议,而图表则是PPT中必不可少的展示数据的要素。


各种类型的图表应该怎样才能快速绘制出来?今天给大家带来几个能给绘图带来巨大帮助的网站。


01

ChartCube


网址:https://chartcube.alipay.com/


一款网页端的在线图表绘制工具,是由阿里巴巴开发提供的。可以免费使用。



网站可以根据我们提供的数据内容,快速自动生成各种类型的表格,包括柱状图、饼状图、折线图、雷达图等 ,我们只需要在生成的表格中选择需要的下载即可。






02

迅捷画图


网址:www.liuchengtu.com


除了一些数据可视化的图标,在进行活动策划等工作的时候,流程图和思维导图也是非常好用的图形,但是复杂的流程图绘制起来有些费工夫,用这个网站能够完美解决。


我们可以选择下载客户端,也可以直接在网页端进行使用。



绘图时利用网站中的各种图形,可以快速添加后续在不候,并进行文字的编辑修改,即使是很复杂,步骤很多的流程图,画起来也非常轻松,不用话费太多时间。





03

ChartCool


网址:https://www.ichartcool.com/zh/index.html


一个免费的在线图表网站,可以在网站中快速制作各种类型的图标,大幅降低了制图难度并提升了速度。



网站中还有各种不同类型图表的制作教学,其中涵盖了图表的追踪要点,主要功能,适用场景等等。





04

Flourish


网址:https://flourish.studio/


图表类型更多更全面的绘图网站,但网站本身是全英文的,英语不好的朋友可以配合浏览器的翻译插件使用。



网站中提供了线表图、散点图、动态变化图等平时比较少见的图表,还有一些论文等地方需要用到的数据动态比较图等。




05

Kepler.gl

网址:https://kepler.gl/


将地图和图表制作结合的网站,如果你的PPT或者报告中需要展示不同地区之间的数据差别,那么这个网站可以给你提供很大的帮助。




以上就是今天分享的所有可以帮助我们绘图的网站了,有需要的话赶紧收藏起来吧!

本文中,我将向您展示一些用于图形/图表的最佳JavaScript库。这些库将帮助您为未来的项目创建漂亮且可自定义的图表。

虽然大多数库都是免费和开源的,但其中一些库提供了带有附加功能的付费版本。

D3.js - 数据驱动文档

当我们想到今天的图表时,D3.js是第一个出现的名字。作为一个开源项目,D3.js肯定会带来许多现有库中缺少的强大功能。“enter and exit”等功能,强大的转换和熟悉jQuery或Prototype的语法使其成为最佳的图表JavaScript库。D3.js中的图表通过HTML,SVG和CSS呈现。

与许多其他JavaScript库不同,D3.js不提供任何预先构建的开箱即用的图表。但是,您可以查看使用D3.js构建的图表列表以获得概述。

Google Chart

Google Charts是轻松创建图表的首选JavaScript库。它提供了许多预先构建的图表,如区域图表,条形图,日历图表,饼图,地理图表等。

Google图表还附带了各种自定义选项,可帮助您更改图表的外观。使用HTML5 / SVG呈现图表,为iPhone,iPad和Android提供跨浏览器兼容性和跨平台可移植性。它还包括用于支持旧版IE的VML。

Highcharts JS

Highcharts JS是另一个非常受欢迎的图形库。它装载了许多不同类型的炫酷动画,足以吸引许多眼球到您的网站。与其他库一样,Highcharts附带了许多预先构建的图形,如样条曲线,面积,区域线,柱,条,饼,散点等。

使用Highcharts JS的最大优势之一是与旧版浏览器的兼容性 - 甚至可以回溯到Internet Explorer 6.标准浏览器使用SVG进行图形渲染。在旧版Internet Explorer中,使用VML绘制图形。

虽然Highcharts JS是免费供个人使用,但您需要购买商业用途的许可证。

ECharts

商业级数据图表,它是一个纯JavaScript的图标库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。

amCharts

amCharts无疑是最美丽的图表库之一。它完全隔离成3个独立的图表 - JavaScript图表,地图图表(amMaps)和股票图表。

amMaps是我最喜欢的三个。它提供的功能包括在地图上加载图标或照片,热图,绘图线,以及在地图上添加文本,缩放等。

amCharts使用SVG渲染在现代浏览器中工作的图表。

amCharts具有免费和收费版本。

ChartJS

ChartJS为图表提供漂亮的平面设计。它使用HTML5 canvas元素进行渲染。通过polyfill添加对IE7 / 8等旧版浏览器的支持。

ChartJS图表默认是响应式的。它们适用于手机和平板电脑。ChartJS开箱即用了6种不同类型的核心图表(核心,条形图,圆环图,雷达图,线图图和极地图),它绝对是近期最令人印象深刻的开源图表库之一。

Chartist.js

Chartist.js提供了漂亮的响应式图表。它使用SVG渲染图表。它可以通过CSS3媒体查询和Sass进行控制和定制。另请注意,Chartist.js提供的酷炫动画仅适用于现代浏览器。

N3-Charts

如果您是Angular开发人员,您肯定会发现n3-charts非常有用且有趣。n3-charts建立在D3.js和Angular之上。它以可定制的Angular指令的形式提供各种标准图表。

uvCharts

uvCharts是一个开源JavaScript图表库,声称拥有100多个自定义选项。它有12种不同的标准图表类型。

uvCharts是使用D3.js库构建的。它承诺从D3.js中消除所有困难的编码部分,并提供标准图表类型的简单实现。uvCharts使用SVG,HTML和CSS呈现。

Plotly.js

Plotly.js是第一个用于Web的科学JavaScript图表库。它自2015年以来一直是开源的,这意味着任何人都可以免费使用它。Plotly.js支持20种图表类型,包括直方图,3d图,误差线和地图。它还可以执行所有基本图表,如条形图,折线图和馅饼。

Plotly.js在引擎盖下使用D3.js,因此它比制作D3.js图形更容易,而不是单独使用D3.js。有关使用Plotly.js制作的图表的一些示例,请查看Plotly的图表新闻Feed。