手繪風格的 JS 圖表庫：Chart.xkcd

HelloGitHub發表於2019-10-30
JS

本文作者：HelloGitHub-kalifun

圖表庫千萬個今天 HelloGitHub 給大家推薦個很有“特色”的圖表庫：一個手繪風格的 JS 圖表庫 —— Chart.xkcd，快收起你緊繃、嚴肅的面容讓我們一起看看用手繪風格展示資料的效果。

一、介紹

專案地址：github.com/timqian/cha…

Chart.xkcd 是一個圖表庫，可繪製“非精細”、“卡通”或“手繪”樣式的圖表。

手繪風格的 JS 圖表庫：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/chart.xkcd@1.1/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/chart.xkcd@1.1/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）

效果展示

手繪風格的 JS 圖表庫：Chart.xkcd

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）

效果展示

手繪風格的 JS 圖表庫：Chart.xkcd

如果你想將這些點連線起來，讓資料對比更加明顯的話。請修改 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）

效果展示

手繪風格的 JS 圖表庫：Chart.xkcd

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）

效果展示

手繪風格的 JS 圖表庫：Chart.xkcd

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）

效果展示

手繪風格的 JS 圖表庫：Chart.xkcd

四、最後

以上就是講解的全部內容，相信教程至此 Chart.xkcd 庫的基本用法你已經基本掌握，後面就可以用來今天學到的東西，提高自己專案的顏值了。

有了 Chart.xkcd 讓資料可愛地展示出來並不難，快動手自己實現一個吧～

五、參考資料

CHART.XKCD 官方文件

CHART.XKCD 專案地址

『講解開源專案系列』——讓對開源專案感興趣的人不再畏懼、讓開源專案的發起者不再孤單。跟著我們的文章，你會發現程式設計的樂趣、使用和發現參與開源專案如此簡單。歡迎留言聯絡我們、加入我們，讓更多人愛上開源、貢獻開源～

相關文章