HighCharts的简介

HighCharts的简介

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加丰富漂亮、有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速度快。另外 HighCharts 还有很好的兼容性,它兼容几乎所有的浏览器,包括iphone以及老掉牙的IE6。Highcharts还提供丰富的参数配置,开发人员可以通过不同的配置生成各种图表。此外,Highcharts还支持图表导出,图表局部放大,图表提示、多图表共存等多种特性能够完美支持当前大多数浏览器。现在官方的最新版本为 Highcharts 3.0

HighCharts的主要特点

HighCharts的主要特性 包括:

  • 速度快,看起来很雅致,界面漂亮。
  • 不像Flash或Java需要插件才可使用。
  • 弹出窗口是沒有问题的。可以在当前的浏览器窗口中打开內容。
  • 单点击。弹出的內容在当前浏览器窗口中,用户还可以在保留当前弹出內容的情況下继续滚动网页而不需要关闭它。
  • 大量的配置选项和可扩展性。一个组件系統可让您未使用的功能压缩到一个10kB的文件大小。
  • 出色的,无条件的和不限用户身分,包含支持商业和非商业用户。
  • 具有良好的兼容性和可访问性,当用户在Javascrip 失效的情況下,或是使用早期版本的浏览器,浏览器仍然会重定向到图片本身或事先指定的HTML页。HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括iPhone、IE和火狐等等;
  • 图表类型众多:HighCharts现在支持多种图表类型,包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等,可以满足各种需求。
  • 不受语言约束:HighCharts可以在大多数的WEB开发中使用,并且对个人用户免费,支持ASP,PHP,JAVA,.NET等多种语言中使用。
  • 提示功能:HighCharts生成的图表中,可以设置在数据点上显示提示效果,即将鼠标移动到某个数据点上,可以显示该点的详细数据,并且显示效果可以进行设置。
  • 放大功能:HighCharts可以大量数据集中显示,并且可以放大某一部分的图形,将图表的精度增大,进行详细的显示,可以选择横向或者纵向放大。
  • 时间轴:可以精确到毫秒。
  • 系统需求:jQuery 或者 MooTools
  • 浏览器支持: IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9, IPhone!
  • 授权类型:Creative Commons Attribution Non-Commercial 3.0 License. 学校,非盈利组织及其个人免费使用。

HighCharts使用准备

我们要先将jquery库以及highcharts图表库。

 
 
  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/highcharts.js"></script>

XHTML代码

在需要放置图表的页面body中加入以下代码:

 
 
  1. <div id="higrid_net_chart_line" style="width: 800px; height: 400px; margin: 0 auto"></div>

当然,如果您觉得上面highcharts的安装教程太繁琐,一个最简单的方法是下载highcharts最简单的例子,上面的js和Css已经合并好了,可以快速开始highcharts使用

Javascript代码

具体请看嗨网的在线演示代码,这样,就可以生成一个漂亮的线状图表了。要想对highcharts的应用有更深入的了解,请关注嗨网后面的文章。

HighCharts中文文档

HighCharts中文文档

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值