highcharts的簡單使用

在使用過的圖表js插件中，我的認爲仍是highcharts最好，不管從兼容性，渲染速度，甚至是文檔詳細上來講，都一直以爲highcharts更勝一籌。如今花點時間作一下簡單的總結，好比從一個矩形圖開始：

1，引入js

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js">

 

2，配置屬性，渲染圖表

<div id="topFiveUsers" class="top-ten-users">
        <div class="ui-loading-wrap">
            <p>正在加載中...</p>
            <i class="ui-loading"></i>
        </div>
    </div>  

 

<script type="text/javascript">
    
    var TopFiveChart = new Highcharts.Chart({
         chart: {
            renderTo: 'topFiveUsers',//渲染的元素id
            type: 'column'
         },
         title: {
             align: "left",
             text: '用戶上報前五',
             color: '#3E576F',
             fontSize: '16px'
         },
         subtitle: {
             text: '數據更新：手動預製',
             align: "left",
         },
         xAxis: {
             categories: ["李建", "夏國球", "李樹軍", "莊儉權", "羅飛"]
             },
         yAxis: {
             min: 0,
             title: {
                 text: '條數（次）'
             }
         },
         tooltip: {
             headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
             pointFormat: '<td style="padding:0"><b>{point.y:.f} 條</b></td></tr>',
             footerFormat: '</table>',
             shared: true,
             useHTML: true
         },
         plotOptions: {
             column: {
                 colorByPoint:true,
                 pointPadding: 0.2,
                 borderWidth: 0
             }
         },
         colors: ['#ff5722', '#1aadce','#77a1e5', '#c42525', '#a6c96a'],
         series: [{
             name: '上報',
             data: [10, 9, 8, 2, 3],
            showInLegend: false // 設置爲 false 即爲不顯示在圖例中
         }],
         credits: {
               enabled: false 
           }
      });        
</script>

屬性摘要：

1，renderTo 注意這裏必定是渲染html元素的id，type:column 矩形圖

2，title標題，subtitle副標題，align：left位置居左

3，xAxis x軸屬性，categories類別，配置data，這裏爲了演示寫死了幾條數據，通常經過ajax調服務端數據，組裝成數組，經過傳參動態配置

4，yAxis y軸屬性，min最小從零開始，title默認豎標題

5，tooltip 提示框，默認鼠標放上去即提示，在移動端點擊才提示，能夠配置html元素，格式化等

6，plotOptions 圖配置項，column列配置內邊距，邊框等

7，colors，highcharts3.x中默認值是colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a']，固然咱們也能夠手動選擇本身喜歡的顏色

8，series，name圖例的名稱，矩形圖能夠配置多個數據列，每一個數據列也能夠有不一樣color，詳情參考官網文檔，showInLegend:false不顯示圖例

9，credits，圖表的版權信息，默認狀況下，highcharts圖表的右下方會放置一個包含連接的版權信息，highcharts.com。咱們能夠經過enabled:false不顯示，也能夠text：本身專屬的版權信息，還能夠改變position屬性等等。這裏只作簡要的介紹

 

3，渲染後圖效果

 

4，相關事件

highcharts也提供了一些事件，好比經常使用的圖表點擊事件click，圖表加載完後的load事件，redraw重繪、等

 

這裏只總結了矩形圖的少部分屬性配置，更詳細的文檔能夠參考HighCharts中文網：http://www.hcharts.cn/

在線演示平臺我的以爲老版的演示比較習慣、一目瞭然，能夠參考網址：http://www.hcharts.cn/demo/index.php