使用highcharts繪製美觀的燃盡圖

時間 2019-11-09

標籤使用 highcharts 繪製美觀简体版

原文原文鏈接

使用highcharts繪製美觀的燃盡圖

助教在博客中介紹了兩種繪製燃盡圖的方法，可是咱們組在使用時發現有些任務不適合寫進issue，並且網站生成的燃盡圖不是很美觀，所以咱們打算使用其餘方法本身繪製燃盡圖。通過簡單調研，咱們採用了highcharts來展示咱們的燃盡圖。javascript

demo與特色

咱們的燃盡圖demo以下：
demo
css

咱們的燃盡圖具備如下特色：html

1 交互性圖表

利用highcharts的交互性，訪問者能夠和圖表進行積極交互，獲取更多有效信息，以下所示。java

查詢每日工做進度
jquery
比較任意幾天的工做狀況
ajax
着重顯示某條曲線
api
隱藏曲線
服務器

2 配色美觀，主題豐富，可定製化程度高

相較於利用網站生成的燃盡圖，咱們的圖表配色更加美觀。此外highchats還支持大量自定義模板與主題，能夠自由更換背景，線型，顏色，圖表類型，定製圖表樣式，帶來更好的閱讀體驗。ssh

3 自動化生成，維護簡單

咱們經過服務器上一個定時腳本實現了燃盡圖的動態更新。該腳本會定時從本項目的石墨文檔中提取任務完成狀況，加工數據並更新csv文件，而博客中的js腳本則加載這個csv文件進行畫圖。整個過程自動完成，不須要過多維護。對於使用issues管理的項目也能夠自行設計腳本爬取數據更新csv。ide

4 純js實現，依賴較少

Based on native browser technologies, no plugins needed
官網介紹

經過加載幾個js,咱們就可使用highcharts完整的功能。

highcharts介紹

Highcharts 是一個用純 JavaScript 編寫的一個圖表庫，可以很簡單便捷的在 Web 網站或是 Web 應用程序添加有交互性的圖表，而且免費提供給我的學習、我的網站和非商業用途使用。
Highcharts 支持的圖表類型有直線圖、曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖、儀表圖、氣泡圖、瀑布流圖等多達 20 種圖表，其中不少圖表能夠集成在同一個圖形中造成混合圖。
其主要優點（功能特色）有：
兼容性、非商業使用免費、開源、純 JavaScript、豐富的圖表類型、簡單的配置語法、動態交互性、支持多座標軸、數據提示框、方便加載外部數據等等

燃盡圖的具體實現方式

網頁js需求

首先咱們要開通博客園的js功能，在開通以後，爲了使highcharts能正常工做，咱們通常須要加載如下幾個腳本與樣式：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />

highcharts也支持靜態導出圖片（以下圖），插入這些圖片不須要額外的js文件，可是這樣的圖片就失去了交互性。

highcharts燃盡圖具體js腳本

本部分主要介紹咱們的燃盡圖使用的具體的js腳本與功能，有條件的讀者也能夠自行閱讀官網demo與說明文檔，瞭解更多內容。

所有js腳本與對應功能介紹以下：

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
    Highcharts.chart('container', {
        chart: {
            scrollablePlotArea: {
                minWidth: 700
            }
        },
        data: {
            csvURL: 'http://example.com/example.csv',
            beforeParse: function (csv) {
                return csv.replace(/\n\n/g, '\n');
            }
        },
        title: {
            text: '燃盡圖'
        },
        subtitle: {
            text: '預期完成任務 實際完成任務 每日完成任務'
        },
        xAxis: {
            tickInterval: 1 * 24 * 3600 * 1000, 
            tickWidth: 0,
            gridLineWidth: 1,
            labels: {
                align: 'left',
                x: -10,
                y: 35
            }
        },
        yAxis: [{ // left y axis
            title: {
                text: null
            },
            labels: {
                align: 'left',
                x: 3,
                y: 16,
                format: '{value:.,0f}'
            },
            showFirstLabel: false
        }, { // right y axis
            linkedTo: 0,
            gridLineWidth: 0,
            opposite: true,
            title: {
                text: null
            },
            labels: {
                align: 'right',
                x: -3,
                y: 16,
                format: '{value:.,0f}'
            },
            showFirstLabel: false
        }],
        legend: {
            align: 'left',
            verticalAlign: 'top',
            borderWidth: 0
        },
        tooltip: {
            shared: true,
            crosshairs: true
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function (e) {
                            hs.htmlExpand(null, {
                                pageOrigin: {
                                    x: e.pageX || e.clientX,
                                    y: e.pageY || e.clientY
                                },
                                headingText: this.series.name,
                                maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + this.y + ' tasks',
                                width: 200
                            });
                        }
                    }
                },
                marker: {
                    lineWidth: 1
                }
            }
        },
        series: [{
            name: 'All tasks',
            lineWidth: 4,
            marker: {
                radius: 4
            }
        }, {
            name: 'New users'
        }]
    });
</script>

設置圖表位置

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
    Highcharts.chart('container', {
        chart: {
            scrollablePlotArea: {
                minWidth: 700
            }
        },

首先，咱們要設置圖表的目標位置，通常經過一個div實現。在這以後咱們就能夠用highcharts修改div內容，進行畫圖了。

加載數據

highcharts同時支持Ajax加載數據和js硬寫數據兩種方式，具體方法以下：

data: { // ajax加載數據
        csvURL: 'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/analytics.csv',
        beforeParse: function (csv) {
            return csv.replace(/\n\n/g, '\n');
        }
    },
//------------------------------------------------------------------------
    series: [{ // 加載硬寫進js的數據
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

咱們使用的是第一種方法，主要緣由有：

第一種方法代碼較短，更加清晰
使用csv能更好的配合自動化腳本

修改曲線的顏色也能夠在series中進行。

設置標題，次標題，圖例

title: {
        text: '燃盡圖'
    },
    subtitle: {
        text: '預期完成任務 實際完成任務 每日完成任務'
    },
    legend: {
        align: 'left',
        verticalAlign: 'top',
        borderWidth: 0
    },

highcharts支持自定義標題，次標題，圖例的文字，內容，樣式，位置等，具體參數能夠參考api文檔。通常經常使用的是經過text修改內容，align，verticalAlign設置位置等。

設置x，y軸座標與刻度

xAxis:{
        tickInterval: 1 * 24 * 3600 * 1000,
        tickWidth: 0,
        gridLineWidth: 1,
        labels: {
            align: 'left',
            x: -10,
            y: 35
        }
    },
    yAxis: [{ // left y axis
        title: {
            text: null
        },
        labels: {
            align: 'left',
            x: 3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }, { // right y axis
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        title: {
            text: null
        },
        labels: {
            align: 'right',
            x: -3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }],

highcharts能夠分別設置x，y軸座標與內容，同時支持次座標軸，而且對於刻度爲時間的座標軸支持較好。

經過title能夠設置座標內容，經過labels能夠設置刻度顯示的內容，對齊位置與偏移量，tickInterval則支持以時間爲單位的座標。

用戶交互設計

plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function (e) {
                        hs.htmlExpand(null, {
                            pageOrigin: {
                                x: e.pageX || e.clientX,
                                y: e.pageY || e.clientY
                            },
                            headingText: this.series.name,
                            maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + this.y + ' tasks',
                            width: 200
                        });
                    }
                }
            },
            marker: {
                lineWidth: 1
            }
        }
    },

經過這部分代碼能夠控制用戶鼠標焦點在圖片中移動時顯示的輔助性內容。例如上面的例子能夠用來顯示鼠標焦點所在的位置的任務數，並進行了格式化輸出。

寫在後面

以上基本就是咱們使用highcharts實現咱們的燃盡圖的方式了。固然做爲一個強大的圖表工具，highcharts的功能，支持的圖表遠不止這些，徹底能夠用在咱們的網站中，帶來更好的展現效果。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。