使用highcharts繪制美觀的燃盡圖
使用highcharts繪制美觀的燃盡圖
助教在博客中介紹了兩種繪制燃盡圖的方法，但是我們組在使用時發現有些任務不適合寫進issue，而且網站生成的燃盡圖不是很美觀，因此我們打算使用其他方法自己繪制燃盡圖。經過簡單調研，我們采用了highcharts來展現我們的燃盡圖。
demo與特點
我們的燃盡圖demo如下：
demo
我們的燃盡圖具有以下特點：
1 交互性圖表
利用highcharts的交互性，訪問者可以和圖表進行積極交互，獲取更多有效信息，如下所示。
查詢每日工作進度
比較任意幾天的工作情況
著重顯示某條曲線
隱藏曲線
2 配色美觀，主題豐富，可定制化程度高
相較於利用網站生成的燃盡圖，我們的圖表配色更加美觀。此外highchats還支持大量自定義模板與主題，可以自由更換背景，線型，顏色，圖表類型，定制圖表樣式，帶來更好的閱讀體驗。
3 自動化生成，維護簡單
我們通過服務器上一個定時腳本實現了燃盡圖的動態更新。該腳本會定時從本項目的石墨文檔中提取任務完成情況，加工數據並更新csv文件，而博客中的js腳本則加載這個csv文件進行畫圖。整個過程自動完成，不需要過多維護。對於使用issues管理的項目也可以自行設計腳本爬取數據更新csv。
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/[email protected]/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的功能，支持的圖表遠不止這些，完全可以用在我們的網站中，帶來更好的展示效果。
使用highcharts繪制美觀的燃盡圖