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

時間 2019-11-05

標籤風格圖表 chart.xkcd chart xkcd 欄目 JavaScript 简体版

原文原文鏈接

本文做者：HelloGitHub-kalifunjavascript

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

1、介紹

項目地址：github.com/timqian/cha…java

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

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

2、快速入手

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

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

3、圖表類型

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

tips：下文中的示例代碼都可直接運行，保存爲 html 文件即可在本機查看效果。dom

3.1 折線圖

折線圖以折線形式顯示一系列數據點，它能夠用於顯示趨勢數據或不一樣數據集的比較。svg

示例代碼

<!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>
複製代碼