学习Highcharts（一）——什么是Highcharts
我们需要一份好看的报表——从需求出发
假设你有一份几个城市过去一年月降水量的数据，你可以像下面这样列给你的客户或老板看：
| 月份 | Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Tokyo | 49.9 | 71.5 | 106.4 | 129.2 | 144 | 176 | 135.6 | 148.5 | 216.4 | 194.1 | 95.6 | 54.4 |
| New York | 83.6 | 78.8 | 98.5 | 93.4 | 106 | 84.5 | 105 | 104.3 | 91.2 | 83.5 | 106.6 | 92.3 |
| London | 48.9 | 38.8 | 39.3 | 41.4 | 47 | 48.3 | 59 | 59.6 | 52.4 | 65.2 | 59.3 | 51.2 |
| Berlin | 42.4 | 33.2 | 34.5 | 39.7 | 52.6 | 75.5 | 57.4 | 60.4 | 47.6 | 39.1 | 46.8 | 51.1 |
看上去很整齐，表格也挺漂亮。可看到这密密麻麻的数据，客户或老板会不会有种想哭的冲动？
那如果换成下面这样呢？四个城市、12个月，信息没有丢失；图形化的呈现，对比与趋势一目了然；鼠标移上去，提示框弹出这个月四个城市降水量的具体数据。看上去更好一些？别慌，需求怎么可能结束，老板这时发话了：我对Tokyo没什么兴趣，你给我让它即刻消失。是不是要重新画一张呢？很简单，在下面Tokyo的方块上点一下，哇，神奇的事情发生了！别急，还没完。Tokyo是消失了，可12个月的柱子摆在这里，老板表示密集恐惧：就只给我显示前半年的吧。这个该要再画一遍了吧？不急，试着用鼠标在图的左半部分画一个矩形，是不是看到了什么？（矩形怎么画？点一下，按住往后拖呀）纵然客户、老板虐我千百遍，我依然淡定的操作，深藏功与名。
这就是Highcharts！
Highcharts是什么
前面的例子已经给了大家一个直观的例子，那就是Highcharts，拥有将枯燥的数据华丽地变身为美观形象、炫酷无比的图表的神奇力量。
好了，不再继续吹了。Highcharts是一个用JavaScript实现的图表库，也可以说就是一个js文件（引用地址：http://code.highcharts.com/highcharts.js），它用SVG（低版本IE中采用VML绘制）在网页中绘制图表。本质上与JQuery类似，只不过JQuery更偏向于框架级别的库文件，而Highcharts专注于图表的展现。借用它丰富的配置参数，可以在网页中绘制曲线图、饼图、柱状图等多种类型的图表。前文就是一个简单的柱状图的例子。
这里谈谈Highcharts的优点：
- 良好的兼容性 官方宣称支持主流的手机和桌面浏览器，IE最低兼容到IE6版本。
- 丰富的图表类型 除了常见的曲线图、饼图、柱状图，诸如散点图、蛛网图、金字塔图、热力图等图表也都能通过Highcharts实现，基本覆盖了我们日常需要的统计图了。
- 美观及良好的交互 相信前文的示例已经展现了Highcharts的良好体验。最新更是推出了3D统计图，提供了更好的视觉效果。
- 灵活的配置 Highcharts提供了丰富的方法和参数，图表上的几乎每个组件都可以通过配置改变其内容和样式，这对开发人员是个福音。解决了数据的问题后，开发人员就可以专注于配置项，来满足老板的各项新奇需求。
Highcharts针对个人和非盈利组织是免费的，如果是商业网站或项目，则需要购买开发者授权了。详细信息可以在下面的网站中了解：http://shop.highsoft.com/highcharts.html。
学习Highcharts需要什么基础吗
因为Highcharts主要用于在网页中绘制图表，所以学习Highcharts前需要基本的网页开发知识，这包括：HTML、CSS、Javascript和至少一个JavaScript框架（JQuery、MooTools或Prototype，本系列使用JQuery开发）。
当然，绘制图表所需要的数据多从后台数据库中查询得到，前后台交互的知识也需要一定了解，如基于ajax+json的传递方式和数据格式
怎样搭建开发环境
前文说过，Highcharts本质上与JQuery一样，是一个js图表库，因此只需在网页中加上下面这句引用就可以使用Highcharts绘图了：
<script src="http://code.highcharts.com/highcharts.js"></script>
获得支持与帮助
学习和遇到问题的时候，可以选择下面的方式获得帮助：
-
毫无疑问，官方网站是获得支持的最权威的渠道了。官网提供了丰富的示例程序，学习这些示例程序可以快速入门，在示例程序上适当的修改就可以满足开发中大多数需求了。遇到不熟悉的方法和参数也可以在API页面中得到详细介绍。
-
stackoverflow上汇聚了众多的技术大牛，要好好利用这个网站提问并学习其他开发者遇到类似问题时的解决方法。
-
不多说了。
-
Highcharts使用的一个在线编辑网站，可在这里进行调试工作。一个很实用的功能：在向其他人提问前，先在这里保存快照，再共享快照链接，保证对方能重现你的问题。
-
本来是一群国内开发者为普及Highcharts而做的一个翻译网站，现在已成为官方License代理商了。官网上有的内容这里基本上都有。他们工作做的很出色，对国内开发者是很方便的。