組成

標(biāo)題（Title）
坐標(biāo)軸（Axis）
數(shù)據(jù)列（Series）
數(shù)據(jù)提示框（Tooltip）
圖例（Legend）
標(biāo)示線（PlotLines）
標(biāo)示區(qū)（PlotBands）

圖表配置chart

• 實(shí)例化綁定容器

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
  內(nèi)邊距：包括 spacing馅闽、spacingTop、spacingRight耸采、spacingBottom、spacingLeft

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

還可以通過(guò)chart.className來(lái)綁定CSS類(lèi)

繪圖區(qū)
plotBackgroundColor ： 繪圖區(qū)背景顏色
plotBackgroundImage ： 繪圖區(qū)背景圖片
plotBorderColor ： 繪圖區(qū)邊框顏色
plotBorderWidth ： 繪圖區(qū)邊框?qū)挾?br> plotShadow ： 繪圖投影

• 事件
  click：點(diǎn)擊事件
  load：加載完成后事件
  addSeries：增加序列事件
  drilldown：下鉆事件
  drillup：上鉆事件
  redraw：重繪事件
  selection：范圍選擇事件
  beforePrint：打印前事件
  afterPrint：打印后事件
• 圖表類(lèi)型
  通過(guò)chart.type來(lái)指定圖表類(lèi)型工育。如果series中沒(méi)有指定type虾宇，則圖表的類(lèi)型由該屬性來(lái)決定。
• 圖表反轉(zhuǎn)
  chart.inverted=true將x軸和y軸進(jìn)行對(duì)調(diào)操作

標(biāo)題title

• 常見(jiàn)屬性：
  text
  align
  verticalAlign
  floating
  margin
  style
• 獲取標(biāo)題內(nèi)容
  通過(guò)highcharts對(duì)象獲取標(biāo)題內(nèi)容

var chart = Highcharts.chart(el, options);    // Highcharts構(gòu)造函數(shù)
var title  = chart.title.textStr;             // 通過(guò)chart對(duì)象獲取標(biāo)題內(nèi)容

• 動(dòng)態(tài)設(shè)置標(biāo)題
  setTitle (Object title, object subtitle, Boolean redraw)
  title : 標(biāo)題對(duì)象
  subtitle: 副標(biāo)題對(duì)象
  redraw：是否重繪如绸，即設(shè)置標(biāo)題后是否重新繪制圖表嘱朽，默認(rèn)是false

var title = {
    text:"我是新標(biāo)題",
    style:{
        color:"#ff0000"
    }
};

chart.setTitle(title);

還可以通過(guò)標(biāo)題對(duì)象的update方法來(lái)更新標(biāo)題

• 隱藏標(biāo)題
  title:{text:null}

坐標(biāo)軸xAxis,yAxis

默認(rèn)情況下，y軸打豎怔接，x軸打橫搪泳，可以通過(guò)char.inverted=ture來(lái)對(duì)調(diào)xy軸

• 坐標(biāo)軸標(biāo)題title

xAxis:{
   title:{
       text:'x軸標(biāo)題'
   }
}
yAxis:{
   title:{
       text:'y軸標(biāo)題'
   }
}

• 坐標(biāo)軸刻度標(biāo)簽labels
  enabled：是否啟用labels。默認(rèn)為true
  formatter：格式化

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

step：lebals的間隔

• 坐標(biāo)軸刻度tick
  默認(rèn)情況下x軸刻度高為5px扼脐，寬為1px森书，y軸寬為0px（不顯示刻度）
  tickLength,tickWidth,tickColor：刻度線的長(zhǎng)度、寬度谎势、顏色
  tickInterval：刻度間隔
  tickmarkPlacement：刻度線對(duì)齊方式凛膏，默認(rèn)為between，可以設(shè)置成on
• 坐標(biāo)軸網(wǎng)格線
  默認(rèn)情況下脏榆，x軸網(wǎng)格線寬度為0猖毫，y軸網(wǎng)格線寬度為1px
  gridLineWidth：網(wǎng)格線寬度
  gridLineColor：默認(rèn)為#C0C0C0
  gridLineDashStyle：網(wǎng)格線線條樣式，常用的有solid,dot,dash
• 多軸
  多軸時(shí)须喂，Axis是一個(gè)數(shù)組吁断，賦值時(shí)通過(guò)Axis數(shù)組的下標(biāo)與數(shù)據(jù)關(guān)聯(lián)

數(shù)據(jù)列series

• 數(shù)據(jù)
  數(shù)值data : [1, 4, 6, 9, 10]
  數(shù)組data ： [ [5, 2], [6,3], [8,2] ]
  點(diǎn)對(duì)象

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

• 線條寬度lineWidth
• 數(shù)據(jù)標(biāo)簽dataLables
  在數(shù)據(jù)點(diǎn)上顯示的數(shù)據(jù)信息標(biāo)簽

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

數(shù)據(jù)標(biāo)簽?zāi)J(rèn)顯示當(dāng)前數(shù)據(jù)點(diǎn)的點(diǎn)值，可以通過(guò) formatter 函數(shù)或 format 來(lái)對(duì)其格式化坞生。

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'
}]

• 數(shù)據(jù)列分區(qū)zones
  不同范圍的值用不同的樣式來(lái)表示

$(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是一個(gè)數(shù)組仔役，常見(jiàn)的屬性有：
value 表示對(duì)小于這個(gè)值的區(qū)域有效（或區(qū)域上界）
color 對(duì)當(dāng)前范圍設(shè)置顏色
dashStyle 對(duì)當(dāng)前范圍設(shè)置線條樣式
fillColor 對(duì)當(dāng)前范圍設(shè)置填充顏色（針對(duì)面積圖）
zones默認(rèn)是針對(duì)y軸，可以通過(guò)zoneAxis=x來(lái)指定針對(duì)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

通過(guò)設(shè)置colorByPoint為true使得每個(gè)數(shù)據(jù)列/點(diǎn)分配一個(gè)顏色是己，該屬性默認(rèn)為false又兵，即根據(jù)數(shù)據(jù)類(lèi)來(lái)分配顏色。

plotOptions: {
            column: {
                colorByPoint:true
            }
        }

數(shù)據(jù)提示框tooltip

當(dāng)鼠標(biāo)懸停在某點(diǎn)上時(shí)，以框的形式提示該點(diǎn)的數(shù)據(jù)沛厨。通過(guò)設(shè)置tooltip.enabled=false可以取消提示框

• 提示框樣式

tooltip: {
    backgroundColor: '#FCFFC5',   // 背景顏色
    borderColor: 'black',         // 邊框顏色
    borderRadius: 10,             // 邊框圓角
    borderWidth: 3,               // 邊框?qū)挾?    shadow: true,                 // 是否顯示陰影
    animation: true               // 是否啟用動(dòng)畫(huà)效果
    style: {                      // 文字內(nèi)容相關(guān)樣式
        color: "#ff0000",
        fontSize: "12px",
        fontWeight: "blod",
        fontFamily: "Courir new"
    }
}

其他詳見(jiàn)官方文檔->基礎(chǔ)教程->數(shù)據(jù)提示框

圖例legend

通過(guò)legend.enabled=true|false來(lái)打開(kāi)或關(guān)閉圖例
其他詳見(jiàn)官方文檔->基礎(chǔ)教程->圖例

版權(quán)信息
通過(guò)credits.enabled=false來(lái)隱藏版權(quán)信息

標(biāo)示線plotLines

標(biāo)示線是用來(lái)標(biāo)記坐標(biāo)軸上特殊值的一條直線宙地，在繪圖區(qū)內(nèi)繪制一條自定義的線。標(biāo)示線總是垂直于它屬于的軸
在x軸上值為3的地方畫(huà)一條紅色的寬度為2px的線：

xAxis: { 
    // ... 省略代碼
    plotLines:[{
        color:'red',            //線的顏色逆皮，定義為紅色
        dashStyle:'longdashdot',//標(biāo)示線的樣式宅粥，默認(rèn)是solid（實(shí)線），這里定義為長(zhǎng)虛線
        value:3,                //定義在哪個(gè)值上顯示標(biāo)示線电谣，這里是在x軸上刻度為3的值處垂直化一條線
        width:2                 //標(biāo)示線的寬度秽梅，2px
    }]
}

color 線的顏色
dashStyle 線的樣式
events 線的事件
id 定義標(biāo)示線
value 在坐標(biāo)軸上顯示的位置
label 標(biāo)示線的文字標(biāo)簽
width 線的寬度
zindex 層疊

圖表縮放

圖表類(lèi)型

• 設(shè)置
  通過(guò)chart.type來(lái)設(shè)置圖表類(lèi)型

chart: {
    type: 'spline'
}

也可以在數(shù)據(jù)列里指定每個(gè)數(shù)據(jù)列的類(lèi)型

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

• 直線圖 line
• 曲線圖 spline
• 面積圖 area
  直線面積圖area
  曲線面積圖areaspline
  直線面積范圍圖arearange
  曲線面積范圍圖areasplinerange
  范圍圖需要引入highcharts-more.js
• 柱狀圖
• 餅圖 pie
• 散點(diǎn)圖
  散點(diǎn)圖和直線圖的區(qū)別就是少了點(diǎn)之間的連線，所以隱藏聯(lián)系即可：

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

在線圖中剿牺，可以通過(guò)marker來(lái)指定某個(gè)數(shù)據(jù)列的點(diǎn)的形狀

• 氣泡圖 bubble
• 漏斗圖 funnel
  通過(guò)neckWidth和neckHeight可以指定漏斗脖子的寬度和高度风纠，其值為百分比
  neckWidth: '40%'
neckHeight: '35%',
• 金字塔圖pyramid
• 極地圖
  需要引入highcharts-more.js將chart.polar設(shè)為true即可創(chuàng)建極地圖

chart: {
    polar: true
}

極地圖的 X 軸展現(xiàn)為極地圖的圓周（即沿著圖形的圓周的是 X 軸），Y 軸則表現(xiàn)為圓心到圓的頂端（即圓的半徑線）

極地圖

• 瀑布圖waterfall
• 誤差線圖 errorbar