多功能圖表之highcharts的使用說明

highCharts能夠說是一款知名度很是高的圖表庫，目前的highCharts能夠支持直線圖，曲線圖，餅圖等近18中圖表
這兩天也有機會接觸highCharts中幾款經常使用的圖表
放圖：

固然這裏展現的混合是的圖表開發，還有不少別的經常使用的圖表demo

這裏就再也不列舉了
下面簡單的介紹下highCharts的使用
首先咱們須要引入jQuery，固然，若是是僅僅在圖表利用到jQuery的話，能夠選擇小一點的文件引入Highcharts Standalone Framework這個壓縮後只有2k的大小
可是對於文件的引入有一點須要說明
Highchart插件中用到了jquery，當時jquery-1.8.3.js的引入順序放到了highchart插件js的下面，
致使當加載highchart插件用到的js時，找不到jquery的js，報出某個js的函數不合法
所以 jquery的js要在引入highchart的js以前引入

對於上面的圖片，我還引用到了一個主題js文件，

準備工做基本就是這些，下面說說highCharts的使用吧

highCharts具備特別的大的可定製性，這裏的一張圖大概就能夠說明的highCharts的定製型，以及咱們能夠修改的地方

具體的一些修改細節，你們能夠看看highCharts中文網http://www.hcharts.cn/
對於highCharts的使用和配置你們也能夠參考下中文網中的教程。說的都十分很是的詳細
這裏我拿我其中的一個簡單的demo，加註釋展現下：
前端頁面展現：

這個是設定了圖表的寬度和高度，固然咱們也能夠不設置，可是若是設置了div的高度和寬度的時候咱們就須要給ion-content設置能夠 橫向滾動的屬性。
這裏面咱們主要是經過id去標識，底層經過canvas去繪畫出來的
後面controller的代碼：

$(function(){
  $('#containerSimple1').highcharts({//圖表展現容器，與div的id保持一致
    chart:{
      type:'column'//指定圖表的類型，默認爲直線型（line）
    },
    title:{
      text:'測試使用HightCharts'//指定圖表的標題
    },
    xAxis:{
      categories:['my','first','highChart']//指定x軸分組
    },
    yAxis:{
      title:{
        text:'something'//指定y軸標題
      }
    },
    series:[//指定數據列，數據名和數據
      {name:'ECharts',data:[12,5,6]},
      {name:'chartJs',data:[8,4,5]},
      {name:'ECharts',data:[2,5,6]},
      {name:'chartJs',data:[1,4,5]},
      {name:'ECharts',data:[2,7,4]}
    ]
  });
});

其實highCharts的使用就是這麼簡單。
一句話歸納就是圖表樣式所有的可定製，設置在上面還能夠添加各類的事件監聽。點擊事件、加載後事件、圖表重繪事件等等。

圖表仍是要玩，多玩玩多改改，本身喜歡的樣子天然就出來了

下面稍微的整理了下在使用highCharts過程當中咱們會遇到的一些問題：
Error #10 
對數軸的值不能爲 0 或負數
下述狀況下會發生這個錯誤：
• 在對數座標軸中出現值爲 0 或負數的狀況
• 對數軸的最小值爲0 或 小於 0
• 閥值（threshold）設置爲 0 或小於 0

Error #12 數據量超過Error #13 圖表 div 渲染容器不存在Error #14 數據類型錯誤，須要的是Number類型，傳入的倒是StringError #15 未排序的數據Error #16 Highcharts 重複定義Error #17 指定的數據列類型不存在Error #18 指定的數軸不存在Error #19 座標軸間隔過多Error #20 沒法將對象點配置添加到長數據序列