1. 程式人生 > >前端圖表製作——HighCharts圖表入門

前端圖表製作——HighCharts圖表入門

HighCharts圖表入門

HighCharts的作用

​ 在JavaEE企業級專案開發中,很多專案都會用到資料的統計和圖表的展示功能,如:各種股票系統,銀行的資金結算,公司的財務報表,等等。如何快速高效的開發這些圖表是一件麻煩的事。

HighCharts可以非常方便的實現這個功能

​ HighCharts是非常棒的一個jQuery外掛,和大多數的瀏覽器都相容。支援很多型別的圖表。並且是動態的外掛,你可以輕鬆在建立圖表後新增,刪除,修改數列,軸或者點,並且可以從外部載入檔案資料,同時支援提示條,甚至還支援縮放和翻轉。

HighCharts的優勢

​ Highcharts 是一個用純 JavaScript 編寫的一個 HTML5 圖表庫, 能夠很簡單便捷的在 Web 網站或是 Web 應用程式新增有互動性的圖表,無需任何外掛,全部原始碼開放, 個人及非商業用途可以任意使用及原始碼編輯。

​ Highcharts 支援的圖表型別有直線圖、曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖、儀表圖、氣泡圖、瀑布流圖等多達 20 種圖表,其中很多圖表可以整合在同一個圖形中形成混合圖。

下載 Highcharts

Highcharts目錄

在這裡插入圖片描述

引入 Highcharts

​ Highcharts 最基本的執行只需要一個 JS 檔案,即 highcharts.js, 將上面的壓縮包解壓,從code資料夾下可以找到,複製到自己專案中的js資料夾。對應的程式碼是:

<script src="js/highcharts.js"></script>

建立一個簡單的圖表

​ 在繪圖前我們需要為 Highcharts 準備一個 DOM 容器,並指定其大小

<div id="container" style="width: 600px;height:400px;"></div>

​ 然後通過 Highcharts 的初始化函式 Highcharts.chart 來建立圖表,該函式接受兩個引數,第一個引數是 容器的 Id,第二個引數是圖表配置,程式碼如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一個 Highcharts 圖表</title>
    <!-- 引入 highcharts.js -->
<script src="js/highcharts.js"></script> </head> <body> <!-- 圖表容器 DOM --> <div id="container" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 圖表配置 var options = { chart: { type: 'bar' //指定圖表的型別,預設是折線圖(line) }, title: { text: '我的第一個圖表' // 標題 }, xAxis: { categories: ['QQ', '支付寶', 'bilibili', '百度雲盤', '百詞斬'] // x 軸分類 }, yAxis: { title: { text: '每天使用該軟體的次數' // y 軸標題 } }, series: [{ // 資料列 name: '張三', // 資料列名 data: [10, 3, 4, 6, 7] // 資料 }, { name: '李四', data: [5, 7, 10, 8, 1] }] };//這個要寫在圖表初始化之前,尤其是在使用回撥函式之前 // 圖表初始化函式 var chart = Highcharts.chart('container', options); </script> </body> </html>

這樣你的第一個圖表就完成了

HighCharts基礎教程

圖表主要組成

一般情況下,Highcharts 包含標題(Title)、座標軸(Axis)、資料列(Series)、資料提示框(Tooltip)、圖例(Legend)、版權標籤(Credits)等,另外還可以包括匯出功能按鈕(Exporting)等。

1. 標題(Title)

圖表標題,包含標題和副標題(subTitle),其中副標題不是必須的。

2. 座標軸(Axis)

座標軸包含x軸(xAxis)和y軸(yAxis)。通常情況下,x軸顯示在圖表的底部,y軸顯示在圖表的左側。多個數據列可以共同使用同一個座標軸,為了對比或區分資料,Highcharts提供了多軸的支援。

3. 資料列(Series)

資料列即圖表上一個或多個數據系列,比如曲線圖中的一條曲線,柱狀圖中的一個柱形。

4. 資料提示框(Tooltip)

當滑鼠懸停在某點上時,以框的形式提示該點的資料,比如該點的值、資料單位等。資料提示框內提示的資訊可以通過格式化函式動態指定。

5. 圖例(Legend)

圖例是圖表中用不同形狀、顏色、文字等 標示不同資料列,通過點選標示可以顯示或隱藏該資料列。

6. 版權標籤(Credits)

顯示在圖表右下方的包含連結的文字,預設是Highcharts官網地址。通過指定credits.enabled=false即可不顯示該資訊。

7. 匯出功能(Exporting)

通過引入 exporting.js即可增加圖表匯出為常見檔案功能。

圖表配置

圖表容器

Highcharts 例項化中繫結容器的方式有很多種方式

1、通過建構函式

var charts = Highcharts.chart('container', {
  // Highcharts 配置
  chart: {
                    type: 'column'//圖表型別
                    events: {
                    load: requestData // 圖表載入完畢後執行的回撥函式(有時候載入不出來是因為函式還沒執行完就開始載入空資料)
                                    //不寫這個要把回撥函式這部分寫在圖表初始化之前
                }
});

2、如果你的頁面已經引入了 jQuery,那麼還可以 jQuery 外掛的形式呼叫

$("#container").highcharts({
    // Highcharts 配置  
    chart: {
                    type: 'column'//圖表型別
                    events: {
                    load: requestData // 圖表載入完畢後執行的回撥函式(有時候載入不出來是因為函式還沒執行完就開始載入空資料)
                                    //不寫這個要把回撥函式這部分寫在圖表初始化之前
                }
}); 

圖表樣式

寬度、高度

Highcharts 圖表的高度和寬度是根據 DIV 容器的寬高來設定的,即

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

標題

標題預設顯示在圖表的頂部,包括標題和副標題(subTitle),其中副標題是非必須的。設定標題和副標題的示例程式碼如下:

title: {
    text: '我是標題'
},
subtitle: {
    text: '我是副標題'
}

座標軸

​ 普通的二維資料圖都有X軸和Y軸,預設情況下,x軸顯示在圖表的底部,y軸顯示在左側(多個y軸時可以是顯示在左右兩側)

座標軸組成部分

座標軸標題

座標軸標題。預設情況下,x軸為null(也就是沒有title),y軸為'Value',設定座標軸標題的程式碼如下:

xAxis:{
           title:{
          		 text:'x軸標題',
                 categories:['1','2','3','4']
                 //還可以設定格式化值
               }
            }
yAxis:{
   title:{
       text:'y軸標題'
   }
}

座標軸刻度標籤

座標軸標籤(分類)。Labels常用屬性有enabledformatterstepstaggerLines

1)enabled

是否啟用Labels。x,y軸預設值都是true,如果想禁用(或不顯示)Labels,設定該屬性為false即可。

2)Formatter

標籤格式化函式。預設實現是:

formatter:function(){
    return this.value;
}

this.value程式碼座標軸上當前點的值(也就是x軸當前點的x值,y軸上當前點的y值)

3)Step

Labels顯示間隔,資料型別為number(或int)

資料列

什麼是資料列

資料列是一組資料集合,例如一條線,一組柱形等。圖表中所有點的資料都來自資料列物件,資料列的基本構造是:

series : [{
    name : '',
    data : []
}] 

提示:資料列配置是個陣列,也就是資料配置可以包含多個數據列。一個name和data表示一組資料列

資料列中的 name 代表資料列的名字,並且會顯示在資料提示框(Tooltip)及圖例(Legend)中。

資料列中的資料

在資料列的 data 屬性中,我們可以定義圖表的資料陣列,定義方式:

  1. 數值陣列。在這種情況下,配置陣列中的數值代表 Y 值,X 值則根據 X 軸的配置,要麼自動計算,要麼從 0 起自增;在分類軸中, X 值就是 categoies 配置,數值陣列配置例項如下:
data : [1, 4, 6, 9, 10] 
  1. 包含兩個值的陣列集合。在這種情況下,集合中陣列的第一個值代表 X, 第二個值代表 Y;如果第一個值是字串,則代表該點的名字,並且 X 值會如 1 中所說的情況決定。陣列集合的例項:
data : [ [5, 2], [6,3], [8,2] ]

圖表型別

Highcharts 支援多種圖表型別,可以針對不同的資料都用合理的圖表型別來展現。

Highcharts 目前支援直線圖、曲線圖、曲線面積圖、面積圖、面積範圍圖、柱狀圖、條形圖、餅圖、散點圖、氣泡圖、儀表圖等豐富的圖表型別。

圖表型別配置

在 Highcharts 中,可以通過 chart.type 來設定所有預設的圖表型別

chart: {
    type: 'spline'
}

示例:柱狀圖的製作

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style></style>
        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    </head>
    <body>
        <div id="container" style="min-width:400px;height:400px"></div>
        <script>
            var chart = Highcharts.chart('container',{
                chart: {
                    type: 'column'//圖表型別
                    events: {
                    load: requestData // 圖表載入完畢後執行的回撥函式(有時候載入不出來是因為函式還沒執行完就開始載入空資料)
                                    //不寫這個要把回撥函式這部分寫在圖表初始化之前
                }
                },
                title: {
                    text: '月平均降雨量'
                },
                subtitle: {
                    text: '資料來源: WorldClimate.com'
                },
                xAxis: {
                    categories: [//分類
                        '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
                    ],
                    crosshair: true//配置跟隨滑鼠或滑鼠滑過點時的十字準星線
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '降雨量 (mm)'
                    }
                },/*資料提示框指的當滑鼠懸停在某點上時,以框的形式提示該點的資料,比如該點的值,資料單位等。資料提示框內提示的資訊完全可以通過格式化函式動態指定;通過設定 tooltip.enabled = false 即可不啟用提示框。
                教程地址:https://www.hcharts.cn/docs/basic-tooltip*/
                tooltip: {
                    // head + 每個 point + footer 拼接成完整的 table
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                /*
                資料列配置是針對所有資料列及某種資料列有效的通用配置。

                資料列的配置有三個級別:

                配置在 plotOptions.series,針對所有圖表型別有效
                配置在 plotOptions.<資料列型別>,針對某種資料列有效
                配置在 series,針對某個資料列有效
                上述三個級別的配置精準度越來越高,也就是越精準的配置會覆蓋前面的配置
                */
                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '東京',
                    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }, {
                    name: '紐約',
                    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
                }, {
                    name: '倫敦',
                    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
                }, {
                    name: '柏林',
                    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
                }]
            });
        </script>
    </body>
</html>

示例:餅型圖的製作

案例要求:

​ 製作瀏覽器的市場佔有比例,使用餅型圖來完成。

案例效果:

1524145489997

案例程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 highcharts.js -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/highcharts.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script type="text/javascript">
    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'pie'  //圖表型別
            },
            title: {
                text: '2018 大學生就業情況調查表'  //設定主標題
            },
            series: [{
                name: '就業量佔比',  //資料名字
                data: [
                    ['研究生',   38.2],  
                    ['民營企業',      26.8],
                    ['國有企業',   12.8],
                    ['公務員',    8.5],
                    ['自主創業',     6.2],
                    ['其他',   0.7]
                ]
            }]
        });
    });
</script>
</body>
</html>