组成

标题（Title）
坐标轴（Axis）
数据列（Series）
数据提示框（Tooltip）
图例（Legend）
标示线（PlotLines）
标示区（PlotBands）

---

图表配置chart

• 实例化绑定容器

var charts = Highcharts.chart('container'.{
//code
});

或者

var charts = Highcharts.chart({
    // Highcharts 配置
    chart : {
        renderTo : 'container'  // 或 document.getElementById('container')
    }
}); 

或者jquery中的绑定
$("#container").highcharts({});

• 图表样式
  高度宽度：由容器的宽高决定
  边框：包括 borderColor、borderRadius、borderWidth
  背景：包括 backgroundColor
  外边距：包括 margin、marginTop、marginRight、marginBottom、marginLeft
  内边距：包括 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft

chart: {
    style: {
        fontFamily: "",
        fontSize: '12px',
        fontWeight: 'bold',
        color: '#006cee'
    }
}

还可以通过chart.className来绑定CSS类

绘图区
plotBackgroundColor ： 绘图区背景颜色
plotBackgroundImage ： 绘图区背景图片
plotBorderColor ： 绘图区边框颜色
plotBorderWidth ： 绘图区边框宽度
plotShadow ： 绘图投影

• 事件
  click：点击事件
  load：加载完成后事件
  addSeries：增加序列事件
  drilldown：下钻事件
  drillup：上钻事件
  redraw：重绘事件
  selection：范围选择事件
  beforePrint：打印前事件
  afterPrint：打印后事件
• 图表类型
  通过chart.type来指定图表类型。如果series中没有指定type，则图表的类型由该属性来决定。
• 图表反转
  chart.inverted=true将x轴和y轴进行对调操作

---

标题title

• 常见属性：
  text
  align
  verticalAlign
  floating
  margin
  style
• 获取标题内容
  通过highcharts对象获取标题内容

var chart = Highcharts.chart(el, options);    // Highcharts构造函数
var title  = chart.title.textStr;             // 通过chart对象获取标题内容

• 动态设置标题
  setTitle (Object title, object subtitle, Boolean redraw)
  title : 标题对象
  subtitle: 副标题对象
  redraw：是否重绘，即设置标题后是否重新绘制图表，默认是false

var title = {
    text:"我是新标题",
    style:{
        color:"#ff0000"
    }
};

chart.setTitle(title);

还可以通过标题对象的update方法来更新标题

• 隐藏标题
  title:{text:null}

---

坐标轴xAxis,yAxis

默认情况下，y轴打竖，x轴打横，可以通过char.inverted=ture来对调xy轴

• 坐标轴标题title

xAxis:{
   title:{
       text:'x轴标题'
   }
}
yAxis:{
   title:{
       text:'y轴标题'
   }
}

• 坐标轴刻度标签labels
  enabled：是否启用labels。默认为true
  formatter：格式化

yAxis: {        
  labels: {
    formatter:function(){
      if(this.value <=100) { 
        return "第一等级("+this.value+")";
      }else if(this.value >100 && this.value <=200) { 
        return "第二等级("+this.value+")"; 
      }else { 
        return "第三等级("+this.value+")";
      }
    }
  }
}

step：lebals的间隔

• 坐标轴刻度tick
  默认情况下x轴刻度高为5px，宽为1px，y轴宽为0px（不显示刻度）
  tickLength,tickWidth,tickColor：刻度线的长度、宽度、颜色
  tickInterval：刻度间隔
  tickmarkPlacement：刻度线对齐方式，默认为between，可以设置成on
• 坐标轴网格线
  默认情况下，x轴网格线宽度为0，y轴网格线宽度为1px
  gridLineWidth：网格线宽度
  gridLineColor：默认为#C0C0C0
  gridLineDashStyle：网格线线条样式，常用的有solid,dot,dash
• 多轴
  多轴时，Axis是一个数组，赋值时通过Axis数组的下标与数据关联

---

数据列series

• 数据
  数值data : [1, 4, 6, 9, 10]
  数组data ： [ [5, 2], [6,3], [8,2] ]
  点对象

data : [{
    name : "point 1",
    color : "#00ff00",
    y : 0
}, {
    name : "Point 2",
    color : "#ff00ff",
    y : 5
}] 

• 线条宽度lineWidth
• 数据标签dataLables
  在数据点上显示的数据信息标签

plotOptions: {
    line: {
        dataLabels: {
            enabled: true
        }
    }
}

数据标签默认显示当前数据点的点值，可以通过 formatter 函数或 format 来对其格式化。

plotOptions: {
    line: {
        dataLabels: {
            enabled: true,
            formatter: function() {
                return this.x + "   " + this.y;
            },
            // format: "{x}      {y}"
        }
    }
}

• 线条样式dashStyle

series: [{
    data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
    dashStyle: 'longdash'
}]

• 数据列分区zones
  不同范围的值用不同的样式来表示

$(function() {
    $('#container').highcharts({
        series: [{
            data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
            zones: [{
                value: 0,
                color: '#f7a35c',
                dashStyle: 'dot'
            }, {
                value: 10,
                color: '#7cb5ec'
            }, {
                color: '#90ed7d'
            }]
        }]
    });
});

zones是一个数组，常见的属性有：
value 表示对小于这个值的区域有效（或区域上界）
color 对当前范围设置颜色
dashStyle 对当前范围设置线条样式
fillColor 对当前范围设置填充颜色（针对面积图）
zones默认是针对y轴，可以通过zoneAxis=x来指定针对x轴

series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
      zoneAxis: 'x',
      zones: [{
          value: 8
      }, {
          dashStyle: 'dot'
      }]
  }]

---

颜色color

通过设置colorByPoint为true使得每个数据列/点分配一个颜色，该属性默认为false，即根据数据类来分配颜色。

plotOptions: {
            column: {
                colorByPoint:true
            }
        }

---

数据提示框tooltip

当鼠标悬停在某点上时，以框的形式提示该点的数据。通过设置tooltip.enabled=false可以取消提示框

• 提示框样式

tooltip: {
    backgroundColor: '#FCFFC5',   // 背景颜色
    borderColor: 'black',         // 边框颜色
    borderRadius: 10,             // 边框圆角
    borderWidth: 3,               // 边框宽度
    shadow: true,                 // 是否显示阴影
    animation: true               // 是否启用动画效果
    style: {                      // 文字内容相关样式
        color: "#ff0000",
        fontSize: "12px",
        fontWeight: "blod",
        fontFamily: "Courir new"
    }
}

其他详见官方文档->基础教程->数据提示框

---

图例legend

通过legend.enabled=true|false来打开或关闭图例
其他详见官方文档->基础教程->图例

---

版权信息
通过credits.enabled=false来隐藏版权信息

---

标示线plotLines

标示线是用来标记坐标轴上特殊值的一条直线，在绘图区内绘制一条自定义的线。标示线总是垂直于它属于的轴
在x轴上值为3的地方画一条红色的宽度为2px的线：

xAxis: { 
    // ... 省略代码
    plotLines:[{
        color:'red',            //线的颜色，定义为红色
        dashStyle:'longdashdot',//标示线的样式，默认是solid（实线），这里定义为长虚线
        value:3,                //定义在哪个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
        width:2                 //标示线的宽度，2px
    }]
}

color 线的颜色
dashStyle 线的样式
events 线的事件
id 定义标示线
value 在坐标轴上显示的位置
label 标示线的文字标签
width 线的宽度
zindex 层叠

---

图表缩放

---

图表类型

• 设置
  通过chart.type来设置图表类型

chart: {
    type: 'spline'
}

也可以在数据列里指定每个数据列的类型

series: [{
    type: 'line'
    data: []
},{
    type: 'column'
    data: []
}]

• 直线图 line
• 曲线图 spline
• 面积图 area
  直线面积图area
  曲线面积图areaspline
  直线面积范围图arearange
  曲线面积范围图areasplinerange
  范围图需要引入highcharts-more.js
• 柱状图
• 饼图 pie
• 散点图
  散点图和直线图的区别就是少了点之间的连线，所以隐藏联系即可：

series: [{
    type: 'line',
    lineWidth: 0,
    data: [
        [12, 2],
        [24, 12]
    ]
}]

在线图中，可以通过marker来指定某个数据列的点的形状

• 气泡图 bubble
• 漏斗图 funnel
  通过neckWidth和neckHeight可以指定漏斗脖子的宽度和高度，其值为百分比
  neckWidth: '40%'
neckHeight: '35%',
• 金字塔图pyramid
• 极地图
  需要引入highcharts-more.js将chart.polar设为true即可创建极地图

chart: {
    polar: true
}

极地图的 X 轴展现为极地图的圆周（即沿着图形的圆周的是 X 轴），Y 轴则表现为圆心到圆的顶端（即圆的半径线）

极地图

• 瀑布图waterfall
• 误差线图 errorbar