JS图表插件——HighCharts

3,295 阅读5分钟

今天小渡给大家带来了新的工具干货


经过前几期的炫酷插件库的洗礼

同学们在使用过程中又有了新的疑问

相对枯燥的数据报表

如何呈现才能更加生动直观呢?

这就不得不提到图表编辑界的大佬

Highcharts


它是一个

用纯JavaScript编写的一个图表库


JS图表插件——HighCharts


顾名思义

它能够很简单便捷的

在web网站或是web应用程序添加

有交互性的图表

并且免费提供给个人学习、

个人网站和非商业用途使用

划重点:免费!!!


JS图表插件——HighCharts


Highcharts目前已经被成千上万的开发者

及 72 个全球100强企业使用

是目前是市面上最简单灵活的图表库


JS图表插件——HighCharts


HighCharts支持的图表类型有

曲线图、区域图、柱状图

饼状图、散状点图和综合图表~

可能你会说,同样都是作图

HighCharts比其他软件优秀在哪里呢?

又有哪些特点呢?


1 - 特性多


HighCharts作为一名全能型选手

各种功能特性也不在话下

无论你是初次接触开发的小白萌新

还是业界大佬

都能得心应手的玩转各种特性


1)兼容性


HighCharts采用纯JavaScript编写,可以在所有的移动设备及电脑上的浏览器中使用。


JS图表插件——HighCharts


2)不受语言约束


HighCharts可以在大多数的WEB开发中使用,并且对个人用户免费,支持ASP,PHP,JAVA,.NET等多种语言中使用。


3)提示功能


HighCharts生成的图表中,可以设置在数据点上显示提示效果,即将鼠标移动到某个数据点上,可以显示该点的详细数据,并且可以对显示效果进行设置。


JS图表插件——HighCharts


4)放大功能


HighCharts可以大量数据集中显示,并且可以放大某一部分的图形,将图表的精度增大,进行详细的显示,可以选择横向或者纵向放大。


JS图表插件——HighCharts


5)更多贴心功能


时间轴:可以精确到毫秒;

导出:表格可导出为 PDF/ PNG/ JPG / SVG 格式;

输出:网页输出图表;

可变焦:选中图表部分放大,近距离观察图表;

外部数据:从服务器载入动态数据;

文字旋转:支持在任意方向的标签旋转。


JS图表插件——HighCharts


2 - 主题多


你还可以根据需求调整不同风格款式

商务风、清新风、炫酷风、简洁风

总有一个适合你哦


JS图表插件——HighCharts


3 - 超炫的动态交互


Highcharts 支持丰富交互性

在图表创建完毕后

可以用丰富的 API 进行

添加、移除或修改数据列、数据点、坐标轴等


JS图表插件——HighCharts


同时,结合 jQuery 的 ajax 功能

可以做到实时刷新数据、

用户手动修改数据等功能

结合事件处理

可以做到各种交互功能


JS图表插件——HighCharts


动态模拟实时数据

能准确展示实时数据变化、走向趋势

起到监控、预测的作用


JS图表插件——HighCharts


HighCharts还可以手动添加数据动态图

点击鼠标即可在图表上形成节点

摆脱了制作图表繁琐的步骤

轻轻一点so easy~


4 - 操作简单


Highcharts 完全基于 HTML5 技术,不需要再客户端安装任何插件,如 Flash 或 Java。此外你也不用配置任何服务端环境,不需要 PHP、Tomcat、ASP.NET 等,只需要两个 JS 文件即可运行。


既然HighCharts这么强大

它支持哪些图表类型呢?


1)线图


线图是HighCharts的图形,包括直线图、曲线图,可根据需要使用不同颜色、类型、单位来直观表示数据的走向趋势,还可对X/Y轴进行翻转切换。


JS图表插件——HighCharts

基础折线图


JS图表插件——HighCharts

含标注线的折线图


JS图表插件——HighCharts

大数据量直线图


JS图表插件——HighCharts

通过Ajax加载数据


2)面积图

它的图斑反映了专题的综合性质,如人口增长、库存量面积等,色块的对比碰撞使得图表更加清晰明了,重合、相交关系一目了然。一些数据面积组合成的图表更具艺术性。


JS图表插件——HighCharts

基础面积图


JS图表插件——HighCharts

包含负值的面积图


JS图表插件——HighCharts

堆叠面积图


JS图表插件——HighCharts

流图


3)柱状图


通常利用于较小的数据集分析。柱状图亦可横向排列,或用多维方式表达。在数据的同期对比方面,柱状图占有较大优势。


JS图表插件——HighCharts

包含负值的柱状图


JS图表插件——HighCharts

金字塔图


JS图表插件——HighCharts

嵌套柱状图


JS图表插件——HighCharts

柱形范围图


4)饼状图


饼状图用于显示一个数据系列中各项的大小与各项总和的比例,根据不同需要,饼状图可分为圆形、环形、半环形、等多种类型,用于表达整体与部分之间的关系。


JS图表插件——HighCharts

可变宽度的环形图


JS图表插件——HighCharts

扇形图


JS图表插件——HighCharts

双饼图


5)散点及气泡图


这种图表更为生动活泼,可读性也更强,它既能表达分布趋势,也能表达数值大小,兼具饼状图和折线图的优势。


JS图表插件——HighCharts

带辅助线的气泡图


JS图表插件——HighCharts

散点图


6)混合图


柱状图、饼状图、折线图结合,可以显示多种数据关系,更加清晰明了,信息含量也更为丰富,从多角度能够分析数据。


JS图表插件——HighCharts

双坐标轴折线、柱状混合图


JS图表插件——HighCharts

柱形、饼状、折线混合图


JS图表插件——HighCharts

天气预报


7)3D图


highcharts不仅支持各种平面图表,还支持各种3D图表。立体的表达丰富了图表,也更贴合整体内容的风格。


JS图表插件——HighCharts

3D环形图


JS图表插件——HighCharts

堆叠3D柱状图


8)其他类型


除以上基础类型的图表,highcharts还支持各种仪表图,热力图等综合行图表表现,可读性和可玩性都大大增强,各种花式玩法等你解锁。


JS图表插件——HighCharts

仪表图


JS图表插件——HighCharts

蜂巢热力图


JS图表插件——HighCharts

词云图


这么多图表类型

可以满足你的各种需求

无论何种数据都不在话下


这里只是列出了常用的一些图表类型

如果有特殊需要的话

还可以进行自主的去抽象扩展


如果对自己的技术不够自信,

或者迫不及待想要试试这个插件,

那么可以去到官网在线的代码演示页面

http://code.hcharts.cn/new

来试试自己写一个图表吧。

毕竟只有尝试过才能知道

是否适合自己的使用习惯,个人偏好~

快来试试吧