首页 > 作文

绘图插件Highcharts你了解多少

更新时间:2023-02-28 15:27:31 阅读: 评论:0

  Web的前端开发中,常常会对数据做出统计,进而要求绘制出相应的统计图以便查看数据的走向和趋势。本文通过对基于Jquery的绘图插件Highcharts的结构分析,完成了对Highcharts的简介、文件结构和配置以及高级功能的介绍。
  
  在前端开发中,能完成图表的绘制功能的插件有很多,例如Cubism、RGraph、C读送东阳马生序有感ytoscape 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-rver,gfx,graphic和js)和一个index.htm的实例入口页面。这5个文件夹的作用分别是:
  
  example:例子代码目录
  
  exporting-rver:导出服务器目录
  
  gfx、graphics:示例代码所需要的图片文件
  
  js:所有的js文件
  
  3 Hightchart罗子群s配置
  
  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绘图插件的基本情况进行了一个较为全面的祛疤精油介绍,由于该插件的资料几乎都以英文为主,本文把该插件的概念、安装和高级功能进行梳理,希望对其他程序员有所启发。

本文发布于:2023-02-28 15:27:30,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/167756925182595.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:绘图插件Highcharts你了解多少.doc

本文 PDF 下载地址:绘图插件Highcharts你了解多少.pdf

标签:文件   图表   插件   功能
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 站长QQ:55-9-10-26 专利检索|