HighCharts学习
先写上这个插件的网站，这里有详细的文档教程。而且排版也很好，如果想要更详细的了解，去官网。
/docs
那我又在这费什么话呢，于是我重新定位了我要怎么写，不要照本宣科的大而全，要精简，摘选。要上案例。我是看别人讲到了这个插件好用，是基于jQuery的，基于JavaScript完美的兼容多种浏览器，样式多样的图表插件。我也觉得很好，就mark一下，通过这遍文章可以简单的知道它。也记录自己学习的过程。
先上实例：
实例一
代码如下（我引入的是cdn,现在网线，WiFi很普遍，我觉得用它很方便）
<title>第一个HighCharts图表</title><script src="/highcharts/highcharts.js"></script></head><body><div id="container" style="width: 600px;height: 400px;"></div><script>//图表的配置var options = {chart: {type: 'bar' //条形图},title: {text: '我的第一个图表'},xAxis: {categories: ['苹果', '橘子', '香蕉']},yAxis: {title: {text: "吃水果的个数"}},//设置数据series: [{name: "小明",data: [1, 0, 4]}, {name: "小红",data: [5, 7, 3]}]};//图表初始化的函数var chart = Highcharts.chart("container", options);</script></body>
实例二
将工资表表转换为柱状图
<
<script>$(function() {//创建两个数组var names = new Array();var salarys = new Array();//使用ajax 方法得到服务器端数据$.get("employee", function(data) {//遍历5个对象for (var i = 0; i < data.length; i++) {//得到每个员工的名子和工资name[i] = data[i].name;salarys[i] = data[i].salary;}//创建图表var options = {//指定图表的类型chart: { type: "column" //柱形图},title: { text: "员工工资一览表" },xAxis: {//指定x轴上分类categories: names},yAxis: {//设置最小值为0min: 0,title: { text: "工资" }},//数据数列series: [{name: "工资",//指定工资的数组data: salarys}]};}); //绑定到div对象上$("#container").highcharts(options);})</script>
这是从数据库获取数据渲染的实例，注意：options配置要放到get 回调函数里面，不然，get还未返回数据，下面options就配置数据为空，无法渲染出图形。
<script>$(function() {//创建两个数组var names = ['孙悟空', '邹丽丽', '猪八戒', '嫦娥'];var salarys = [8000, 12000, 3000, 2000];//创建图表var options = {//指定图表的类型chart: { type: "column" //柱形图 },title: { text: "员工工资一览表" },xAxis: {//指定x轴上分类categories:names},yAxis: {//设置最小值为0min: 0,title: { text: "工资" },//数据数列series: [{name: "工资",//指定工资的数组data: salarys}]};//绑定到div对象上$("#container").highcharts(options);})</script>
操作中还有个失误把数据写成字符串了，别问为什么这么低级的错误，反正错误写法没渲染，改正后渲染出来了。
// var salarys = ['800', '12000', '3000', '2000'];
另外，只是写了get从数据库获取数据的方式，但后来练习的实际渲染是用到下一段代码。
图表主要组成
一般情况下，HighCharts包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltips）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）等。
1. 标题（Title）
图表标题，包含标题和副标题（subTitle），其中副标题是非必须的。
2. 坐标轴（Axis）
坐标轴包含x轴（xAxis）和y轴（yAxis）。通常情况下，x轴显示在图表的底部，y轴显示在图表的左侧。多个数据列可以共同使用同一个坐标轴，为了对比或区分数据，Highcharts提供了多轴的支持。
3. 数据列（Series）
数据列即图表上一个或多个数据系列，比如曲线图中的一条曲线，柱状图中的一个柱形。
4. 数据提示框（Tooltip）
当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值、数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定。
5. 图例（Legend）
图例是图表中用不同形状、颜色、文字等 标示不同数据列，通过点击标示可以显示或隐藏该数据列。
6. 版权标签（Credits）
显示在图表右下方的包含链接的文字，默认是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。
7. 导出功能（Exporting）
通过引入 exporting.js即可增加图表导出为常见文件功能。
8. 标示线（PlotLines）
可以在图表上增加一条标示线，比如平均值线，最高值线等。
9. 标示区（PlotBands）
可以在图表添加不同颜色的区域带，标示出明显的范围区域。
Highcharts 基本组成部分如下图所示：
如何设置图表配置
Highcharts 是通过 JavaScript 对象的形式（JSON）来定义图表的配置参数。
图表配置对象
当使用图表构造函数 Highcharts.Chart 来初始化图表时，图表的配置对象是以第二个参数传递给该构造函数的。
下面是示例代码：
var options = {chart: { type: 'bar' },title: {text: 'Fruit Consumption' },xAxis: {categories: ['Apples', 'Bananas', 'Oranges']},yAxis: {title: {text: 'Fruit eaten' }},series: [{name: 'Jane',data: [1, 0, 4]}, {name: 'John',data: [5, 7, 3]}]};var chart = Highcharts.chart('container', options);
为了更好的使用 Highcharts 配置，你需要了解 JavaScript 对象的基本知识
图表容器
Highcharts 实例化中绑定容器的方式有很多种方式，这里列举三种：
1、通过构造函数
var charts = Highcharts.chart('container', {// Highcharts 配置});
2、或者通过 chart.renderTo 来指定
var charts = Highcharts.chart({// Highcharts 配置chart : {renderTo : 'container' // 或 document.getElementById('container')}});
3、如果你的页面已经引入了 jQuery，那么还可以 jQuery 插件的形式调用
$("#container").highcharts({// Highcharts 配置 });
注意顺序：先引入jQuery，如果你用第三种方式。
Highcharts 兼容性
Highcharts 7 在 Highcharts 6 的基础上进一步将低版本浏览器相关函数的兼容包独立成一个文件，即 oldie-polyfills.js从 Highcharts 6.0.0 开始，我们将兼容低版本 IE 的代码单独成一个模块文件，这样用户可以根据需求是否加载对应的文件Highcharts 4.2.0 起支持 CommonJS 模块标准，即你可以在支持 CommonJS 环境中使用 Highcharts。对于低版本浏览器（IE6、IE8等）我们支持 jQuery 1.6+，主流浏览器（新版 Chrome、Firefox等）支持 jQuery 2.0+写在最后：
这就是插件，在主题库，或者框架上扩展的功能块，它会考虑到复用性，可配置性，可靠性，易用性。下一次，试着写一下，自己学习书写小插件的内容。
