手繪風格的 JS 圖表庫：Chart.xkcd
- 2019 年 10 月 30 日
- 筆記
本文作者：HelloGitHub-kalifun
圖表庫千萬個今天 HelloGitHub 給大家推薦個很有「特色」的圖表庫：一個手繪風格的 JS 圖表庫 —— Chart.xkcd，快收起你緊繃、嚴肅的面容讓我們一起看看用手繪風格展示數據的效果。
一、介紹
項目地址：https://github.com/timqian/chart.xkcd
Chart.xkcd 是一個圖表庫，可繪製「非精細」、「卡通」或「手繪」樣式的圖表。
效果是不是很可愛？那下面就跟著 HelloGitHub 發起的《講解開源項目》的教程一起學習、上手使用起來吧！
二、快速入手
使用 Chart.xkcd 很容易，只需頁面中包含庫的引用和一個用於顯示圖表的 <svg> 節點即可。
2.1 程式碼示例
先用一段簡短的程式碼，讓大家了解下基本的參數和程式碼的樣子，後面會有可運行的程式碼示例片段供大家學習和使用 ?。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--將 SVG 元素直接嵌入 HTML 頁面中--> <svg class="line-chart"></svg> <!--引入 JS 庫--> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.xkcd.min.js"></script> <script> //關鍵程式碼塊 const svg = document.querySelector('.line-chart') new chartXkcd.Line(svg, { title: '', xLabel: '', yLabel: '', data: {...}, options: {}, }); </script> </body> </html>2.2 參數說明
title：圖表的標題xLabel：圖表的 x 標籤yLabel：圖表的 y 標籤data：需要可視化的數據options：自定義設置
三、圖表類型
Chart.xkcd 支援多樣的圖表類型，下面將逐一講解和實現：折線圖、XY 圖、條形圖、圓餅/甜甜圈圖、雷達圖，實現的示例程式碼完整可運行、注釋完整、包含參數說明。
tips：下文中的示例程式碼均可直接運行，保存為 html 文件便可在本機查看效果。
3.1 折線圖
折線圖以折線形式顯示一系列數據點，它可以用於顯示趨勢數據或不同數據集的比較。
示例程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--將 SVG 元素直接嵌入 HTML 頁面中--> <svg class="line-chart"></svg> <!--引入 JS 庫--> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.xkcd.min.js"></script> <script> // querySelector() 方法返迴文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".line-chart" 的元素。 const svg = document.querySelector('.line-chart'); // chartXkcd.Line 創建一個折線圖 const lineChart = new chartXkcd.Line(svg, { //圖表的標題 title: 'Monthly income of an indie developer', // 圖表的 x 標籤 xLabel: 'Month', // 圖表的 y 標籤 yLabel: '$ Dollors', // 需要可視化的數據 data: { // x 軸數據 labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'], // y 軸數據 datasets: [{ // 第一組數據 label: 'Plan', data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000], }, { // 第二組數據 label: 'Reality', data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150], }], }, // 可選配置以自定義圖表的外觀 options: { // 自定義要在 y 軸上看到的刻度號（默認為 3） yTickCount: 3, // 指定要放置圖例的位置 legendPosition: chartXkcd.config.positionType.upLeft } }); </script> </body> </html>參數說明
yTickCount：自定義要在y軸上看到的刻度號（默認為 3）legendPosition：指定要放置圖例的位置（默認為chartXkcd.config.positionType.upLeft）。- 左上位置：
chartXkcd.config.positionType.upLeft - 頂右上位置：
chartXkcd.config.positionType.upRight - 左下位置：
chartXkcd.config.positionType.downLeft - 右下位置：
chartXkcd.config.positionType.downRight
- 左上位置：
dataColors：不同顏色的數據集數組fontFamily：訂製圖表中使用的字體系列unxkcdify：禁用 xkcd 效果（默認為 false）
效果展示
3.2 XY 圖
XY 圖表用於通過指定點的 XY 坐標來繪製點，您也可以通過連接這些點來繪製 XY 折線圖。
示例程式碼
<script> // querySelector() 方法返迴文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".xy-chart" 的元素。 const svg = document.querySelector('.xy-chart'); //chartXkcd.XY 創建一個XY圖 new chartXkcd.XY(svg, { //圖表的標題 title: 'Pokemon farms', // 圖表的 x 標籤 xLabel: 'Coodinate', // 圖表的 y 標籤 yLabel: 'Count', // 需要可視化的數據 data: { datasets: [{ // 第一組數據 label: 'Pikachu', data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }], }, { // 第二組數據 label: 'Squirtle', data: [{ x: 3, y: 122 }, { x: 4, y: 212 }, { x: -3, y: 100 }, { x: 1, y: 1 }, { x: 1.5, y: 12 }], }], }, options: { // 自定義要在 x 軸上看到的刻度號（默認為 3） xTickCount: 5, // 自定義要在 y 軸上看到的刻度號（默認為 3） yTickCount: 5, // 指定要放置圖例的位置 legendPosition: chartXkcd.config.positionType.upRight, // 用線連接點（默認 false） showLine: false, // 指定時間格式 timeFormat: undefined, // 更改點的大小（默認為 1） dotSize: 1, }, }); </script>參數說明
xTickCount：自定義要在x軸上看到的刻度號（默認為 3）yTickCount：自定義要在y軸上看到的刻度號（默認為 3）legendPosition：指定要放置圖例的位置showLine: 點連接成線。timeFormat：指定時間格式dotSize：更改點的大小（默認為 1）dataColors：不同顏色的數據集數組fontFamily：訂製圖表中使用的字體系列unxkcdify：禁用 xkcd 效果（默認為 false）
效果展示
如果你想將這些點連接起來，讓數據對比更加明顯的話。請修改 showLine：true 再刷新頁面你就可以看到連線的效果了。
3.3 條形圖
條形圖提供了一種顯示以豎條表示的數據值的方式。
示例程式碼
<script> // querySelector() 方法返迴文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".bar-chart" 的元素。 const svg = document.querySelector('.bar-chart'); // chartXkcd.Bar 創建一個條形圖 const barChart = new chartXkcd.Bar(svg, { // 圖表的標題 title: 'github stars VS patron number', // xLabel: '', // optional // yLabel: '', // optional // 圖表數據 data: { labels: ['github stars', 'patrons'], datasets: [{ data: [100, 2], }], }, options: { // 自定義要在 y 軸上看到的刻度號（默認為 3） yTickCount: 2, }, }); </script>參數說明
yTickCount：自定義要在y軸上看到的刻度號（默認為 3）dataColors：不同顏色的數據集數組fontFamily：訂製圖表中使用的字體系列unxkcdify：禁用xkcd效果（默認為 false）
效果展示
3.4 圓餅/甜甜圈圖
餅圖廣泛得應用在各個領域，用於表示不同分類的佔比情況，通過弧度大小來對比各種分類。餅圖通過將一個圓餅按照分類的佔比劃分成多個區塊，整個圓餅代表數據的總量，每個區塊（圓弧）表示該分類佔總體的比例大小，所有區塊（圓弧）的加和等於 100%。
示例程式碼
<script> // querySelector() 方法返迴文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".pie-chart" 的元素。 const svg = document.querySelector('.pie-chart'); // chartXkcd.Pie 創建一個圓餅圖 const pieChart = new chartXkcd.Pie(svg, { // 圖表的標題 title: 'What Tim made of', // 需要可視化的數據 data: { labels: ['a', 'b', 'e', 'f', 'g'], datasets: [{ data: [500, 200, 80, 90, 100], }], }, options: { // 指定空的餅圖半徑 innerRadius: 0.5, // 指定要放置圖例的位置 legendPosition: chartXkcd.config.positionType.upRight, }, }); </script>參數說明
innerRadius：指定空的餅圖半徑（默認值：0.5）- 需要餅圖嗎？將
innerRadius設置為 0
- 需要餅圖嗎？將
legendPosition：指定要放置圖例的位置dataColors：不同顏色的數據集數組fontFamily：訂製圖表中使用的字體系列unxkcdify：禁用 xkcd 效果（默認為 false）
效果展示
3.5 雷達圖
雷達圖（Radar Chart）又被叫做蜘蛛網圖，適用於顯示三個或更多的維度的變數。雷達圖是以在同一點開始的軸上顯示的三個或更多個變數的二維圖表的形式來顯示多元數據的方法，其中軸的相對位置和角度通常是無意義的。
示例程式碼
<script> // querySelector() 方法返迴文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".radar-chart" 的元素。 const svg = document.querySelector('.radar-chart'); // chartXkcd.Radar 創建一個雷達圖 const radarChart = new chartXkcd.Radar(svg, { // 圖表的標題 title: 'Letters in random words', // 需要可視化的數據 data: { labels: ['c', 'h', 'a', 'r', 't'], datasets: [{ label: 'ccharrrt', data: [2, 1, 1, 3, 1], }, { label: 'chhaart', data: [1, 2, 2, 1, 1], }], }, options: { // 在圖表中顯示圖例 showLegend: true, // 點的大小 dotSize: 0.8, // 在每行附近顯示標籤 showLabels: true, // 指定要放置圖例的位置 legendPosition: chartXkcd.config.positionType.upRight, // unxkcdify: true, }, }); </script>參數說明
showLabels：在每行附近顯示標籤（默認為 false）ticksCount：自定義要在主行上看到的刻度號（默認為 3）dotSize：更改點的大小（默認為 1）showLegend：在圖表附近顯示圖例（默認為 false）legendPosition：指定要放置圖例的位置dataColors：不同顏色的數據集數組fontFamily：訂製圖表中使用的字體系列unxkcdify：禁用 xkcd 效果（默認為 false）
效果展示
四、最後
以上就是講解的全部內容，相信教程至此 Chart.xkcd 庫的基本用法你已經基本掌握，後面就可以用來今天學到的東西，提高自己項目的顏值了。
有了 Chart.xkcd 讓數據可愛地展示出來並不難，快動手自己實現一個吧～
五、參考資料
『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎留言聯繫我們、加入我們，讓更多人愛上開源、貢獻開源～
