highcharts 快速入門 (五分鐘什麼的都是騙人的,看完都不止五分鐘)

首先固然是下載組件啦.....  由於我以爲簡介就不必了,時下最好用的chart組件有空我也會介紹一下

附一個官網給那些英文999的童鞋--------http://www.highcharts.com/

不bb了,如今官方提供了三種把highcharts down下來的方式,

第一種固然是最簡單粗暴的下載嘍,官方提供了不少連接

• 中文網下載中心:http://www.hcharts.cn/product/download.php
• 官方下載:http://www.highcharts.com/download
• Github開源項目:https://github.com/highslide-software/highcharts.com
• 中文網開放CDN:http://cdn.hcharts.cn
• 官方 CDN 服務:http://code.highcharts.com

哈哈,這麼多連接,down不下來那真的是有鬼了,,,,,,

固然,做爲有逼格的前端,咱們確定不能就這麼來,對吧,那麼咱們用npm,咳咳,我這邊用的是cnpm

cnpm install highcharts --save

還有就是bower,也是同樣滴

bower install highcharts --save

好了,接下來就是你們都熟悉的hello world啦

有一點要注意的是highcharts是有組件依賴的,因此我這裏用的就是用的最多的jquery

<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

OK,接下來建立容器

<div id="container" style="min-width:800px;height:400px"></div>

而後就是highcharts代碼,ps:放在頁面的任何地方均可以哦..

<script>
$(function () { 
    $('#container').highcharts({                   //圖表展現容器，與div的id保持一致
        chart: {
            type: 'column'                         //指定圖表的類型，默認是折線圖（line）
        },
        title: {
            text: 'My first Highcharts chart'      //指定圖表標題
        },
        xAxis: {
            categories: ['my', 'first', 'chart']   //指定x軸分組
        },
        yAxis: {
            title: {
                text: 'something'                  //指定y軸的標題
            }
        },
        series: [{                                 //指定數據列
            name: 'Jane',                          //數據列名
            data: [1, 0, 4]                        //數據
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });
});
</script>

好啦,這樣出來就是一個最簡單的柱狀圖,至於其餘的圖嘛,就能夠慢慢來研究嘍