highcharts使用介绍

本文章来自嗨网

原文标题： highcharts使用介绍

HighCharts的简介

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

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

HighCharts的主要特点

HighCharts的主要特性包括：

• 速度快，看起来很雅致,界面漂亮。
• 不像Flash或Java需要插件才可使用。
• 弹出窗口是�]有问题的。可以在当前的浏览器窗口中打开�热荨�
• 单点击。弹出的�热菰诘鼻颁�览器窗口中，用户还可以在保留当前弹出�热莸那�r下继续滚动网页而不需要关闭它。
• 大量的配置选项和可扩展性。一个组件系�y可让您未使用的功能压缩到一个10kB的文件大小。
• 出色的，无条件的和不限用户身分，包含支持商业和非商业用户。
• 具有良好的兼容性和可访问性，当用户在Javascrip 失效的情�r下，或是使用早期版本的浏览器，浏览器仍然会重定向到图片本身或事先指定的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图表库。

<script type="text/javascript" src=\'#\'" /jquery.js"></script>  <script type="text/javascript" src=\'#\'" /highcharts.js"></script>  

XHTML代码

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

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

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

Javascript代码

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