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

<p align="center">本文做者:HelloGitHub-<strong>kalifun</strong></p> html

圖表庫千萬個今天 HelloGitHub 給你們推薦個頗有「特點」的圖表庫:一個手繪風格的 JS 圖表庫 —— Chart.xkcd,快收起你緊繃、嚴肅的面容讓咱們一塊兒看看用手繪風格展現數據的效果。git

1、介紹

項目地址:https://github.com/timqian/chart.xkcdgithub

Chart.xkcd 是一個圖表庫,可繪製「非精細」、「卡通」或「手繪」樣式的圖表。npm

效果是否是很可愛?那下面就跟着 HelloGitHub 發起的《講解開源項目》的教程一塊兒學習、上手使用起來吧!編程

2、快速入手

使用 Chart.xkcd 很容易,只需頁面中包含庫的引用和一個用於顯示圖表的 <svg> 節點便可。數組

2.1 代碼示例

先用一段簡短的代碼,讓你們瞭解下基本的參數和代碼的樣子,後面會有可運行的代碼示例片斷供你們學習和使用 😁。dom

<!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:自定義設置

3、圖表類型

Chart.xkcd 支持多樣的圖表類型,下面將逐一講解和實現:折線圖、XY 圖、條形圖、圓餅/甜甜圈圖、雷達圖,實現的示例代碼完整可運行、註釋完整、包含參數說明。svg

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)

效果展現

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)

效果展現

4、最後

以上就是講解的所有內容,相信教程至此 Chart.xkcd 庫的基本用法你已經基本掌握,後面就能夠用來今天學到的東西,提升本身項目的顏值了。

有了 Chart.xkcd 讓數據可愛地展現出來並不難,快動手本身實現一個吧~

5、參考資料

CHART.XKCD 官方文檔

CHART.XKCD 項目地址


『講解開源項目系列』——讓對開源項目感興趣的人再也不畏懼、讓開源項目的發起者再也不孤單。跟着咱們的文章,你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎留言聯繫咱們、加入咱們,讓更多人愛上開源、貢獻開源~

原文出處:https://www.cnblogs.com/xueweihan/p/11761193.html

相關文章
相關標籤/搜索