绘图插件Highcharts你了解多少

来源：最后更新：22-04-03 02:42:44

导读：绘图插件Highcharts你了解多少，　Web的前端开发中，常常会对数据做出统计，进而要求绘制出相应的统计图以便查看数据的走向和趋势。本文通过对基于Jquery的绘图插件Highcharts的结构分析，完成了对Highcharts的简介、文件结构和配置以及高级功能的介绍。

　　Web的前端开发中，常常会对数据做出统计，进而要求绘制出相应的统计图以便查看数据的走向和趋势。本文通过对基于Jquery的绘图插件Highcharts的结构分析，完成了对Highcharts的简介、文件结构和配置以及高级功能的介绍。
　　
　　在前端开发中，能完成图表的绘制功能的插件有很多，例如Cubism、RGraph、Cytoscape Web gvChart和Highcharts等。这些插件都是以Js为基础开发而成，其中，Highcharts是目前较为流行且功能强大的一款图表插件，几乎可以满足Web图表的任何需求。本文介绍了Highcharts插件的基本概念、文件结构、配置方法和高级功能。

　　1 Highcharts简介
　　
　　1.1 Highcharts概念
　　
　　Highcharts是一个用纯HTML5/JavaScript一个图表库，提供直观的，交互式的图表到你的网站或Web应用程序。 Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表。
　　
　　1.2 Highcharts的兼容性
　　
　　它适用于所有的主流浏览器，如：IE、Firefox、Chrome、Safari，甚至包括括iPhone/ iPad和android等移动设备上的浏览器。并且，在iOS和Android，多点触控支持提供无缝的用户体验。标准浏览器使用SVG的图形渲染。在较为老旧的Internet Explorer中的图形使用VML绘制。
　　
　　1.3 免费用于非商业场景
　　
　　对个人用户及非商业用途而言，Highcharts是免费的，并且开放源代码的下载。而商业用途的话，需要购买软件许可。
　　
　　2 Highcharts文件结构
　　
　　本文以Highcharts 3.0.9版本为例，介绍Highcharts的文件结构。
　　
　　在官方网站（http：//www.highcharts.com/）下载得到Hightcharts的压缩包以后解压会得到5个文件夹（example，exporting-server，gfx，graphic和js）和一个index.htm的实例入口页面。这5个文件夹的作用分别是：
　　
　　example：例子代码目录
　　
　　exporting-server：导出服务器目录
　　
　　gfx、graphics：示例代码所需要的图片文件
　　
　　js：所有的js文件
　　
　　3 Hightcharts配置
　　
　　Highcharts运行需要两个js文件，Highcharts.js及jQuery、MooTools、Prototype、Highcharts Standalone Framework 中的一个框架文件。
　　
　　在html文件引入js文件有在线引入和本地引入两种方式，针对不同的js框架需要引入的js文件不同。
　　
　　3.1 在线引入js文件
　　
　　jQuery是目前使用最多的js框架，Highcharts就是基于jQuery的一款绘图插件。
　　
　　如果页面只有highcharts用到jquery功能（也就是jQuery没有进行其他的dom操作），可以考虑使用Highcharts Standalone Framework。Highcharts Standalone Framework 压缩后只有 2k，相对jQuery 100多k的体积，Highcharts Standalone Framework无疑会减少很多网络带宽。
　　
　　3.2 引入本地js文件
　　
　　Highcharts所有js文件都可以通过下载获得，在实际项目中，更多的是引入本地文件。
　　
　　3.3 高级功能
　　
　　Highcharts提供图表导出、更换图表主题等功能，要实现这些功能需要额外引入js文件
　　
　　Highcharts提供将图表导出（或下载）为常见图片文件及打印图表功能。想要使用该功能，只需要引入exporting.js即可。
　　
　　Highcharts提供图表更换主题功能，只需要引入主题js文件即可更换主题。除默认主题样式外，Highcharts官方提供5款可选主题，当然你也可以设计自己的图表主题。
　　
　　4 结束语
　　
　　本文在对基于Jquery的Highcharts绘图插件的基本情况进行了一个较为全面的介绍，由于该插件的资料几乎都以英文为主，本文把该插件的概念、安装和高级功能进行梳理，希望对其他程序员有所启发。