手繪風(fēng)格的 JS 圖表庫：Chart.xkcd

文作者：HelloGitHub-kalifun

圖表庫千萬個今天 HelloGitHub 給大家推薦個很有“特色”的圖表庫：一個手繪風(fēng)格的 JS 圖表庫 —— Chart.xkcd，快收起你緊繃、嚴(yán)肅的面容讓我們一起看看用手繪風(fēng)格展示數(shù)據(jù)的效果。

一、介紹

項(xiàng)目地址：https://github.com/timqian/chart.xkcd

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

效果是不是很可愛？那下面就跟著 HelloGitHub 發(fā)起的《講解開源項(xiàng)目》^[1]的教程一起學(xué)習(xí)、上手使用起來吧！

二、快速入手

使用 Chart.xkcd 很容易，只需頁面中包含庫的引用和一個用于顯示圖表的 <svg> 節(jié)點(diǎn)即可。

2.1 代碼示例

先用一段簡短的代碼，讓大家了解下基本的參數(shù)和代碼的樣子，后面會有可運(yùn)行的代碼示例片段供大家學(xué)習(xí)和使用。

<!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>
 //關(guān)鍵代碼塊
 const svg = document.querySelector('.line-chart')
 new chartXkcd.Line(svg, {
 title: '',
 xLabel: '',
 yLabel: '',
 data: {...},
 options: {},
 });
</script>
</body>
</html>

2.2 參數(shù)說明

title：圖表的標(biāo)題
xLabel：圖表的 x 標(biāo)簽
yLabel：圖表的 y 標(biāo)簽
data：需要可視化的數(shù)據(jù)
options：自定義設(shè)置

三、圖表類型

Chart.xkcd 支持多樣的圖表類型，下面將逐一講解和實(shí)現(xiàn)：折線圖、XY 圖、條形圖、圓餅/甜甜圈圖、雷達(dá)圖，實(shí)現(xiàn)的示例代碼完整可運(yùn)行、注釋完整、包含參數(shù)說明。

tips：下文中的示例代碼均可直接運(yùn)行，保存為 html 文件便可在本機(jī)查看效果。

3.1 折線圖

折線圖以折線形式顯示一系列數(shù)據(jù)點(diǎn)，它可以用于顯示趨勢數(shù)據(jù)或不同數(shù)據(jù)集的比較。

示例代碼

<!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 創(chuàng)建一個折線圖
 const lineChart = new chartXkcd.Line(svg, {
 //圖表的標(biāo)題
 title: 'Monthly income of an indie developer',
 // 圖表的 x 標(biāo)簽
 xLabel: 'Month',
 // 圖表的 y 標(biāo)簽
 yLabel: '$ Dollors',
 // 需要可視化的數(shù)據(jù)
 data: {
 // x 軸數(shù)據(jù)
 labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
 // y 軸數(shù)據(jù)
 datasets: [{
 // 第一組數(shù)據(jù)
 label: 'Plan',
 data: [30, 70, 200, 300, 500, 800, 1500, 2900, 5000, 8000],
 }, {
 // 第二組數(shù)據(jù)
 label: 'Reality',
 data: [0, 1, 30, 70, 80, 100, 50, 80, 40, 150],
 }],
 },
 // 可選配置以自定義圖表的外觀
 options: {
 // 自定義要在 y 軸上看到的刻度號（默認(rèn)為 3）
 yTickCount: 3,
 // 指定要放置圖例的位置
 legendPosition: chartXkcd.config.positionType.upLeft
 }
 });
</script>
</body>
</html>

參數(shù)說明

yTickCount：自定義要在y軸上看到的刻度號（默認(rèn)為 3）
legendPosition：指定要放置圖例的位置（默認(rèn)為 chartXkcd.config.positionType.upLeft）。
左上位置：chartXkcd.config.positionType.upLeft
頂右上位置：chartXkcd.config.positionType.upRight
左下位置：chartXkcd.config.positionType.downLeft
右下位置：chartXkcd.config.positionType.downRight
dataColors：不同顏色的數(shù)據(jù)集數(shù)組
fontFamily：定制圖表中使用的字體系列
unxkcdify：禁用 xkcd 效果（默認(rèn)為 false）

效果展示

3.2 XY 圖

XY 圖表用于通過指定點(diǎn)的 XY 坐標(biāo)來繪制點(diǎn)，您也可以通過連接這些點(diǎn)來繪制 XY 折線圖。

示例代碼

<script>
 // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".xy-chart" 的元素。
 const svg = document.querySelector('.xy-chart');
 //chartXkcd.XY 創(chuàng)建一個XY圖
 new chartXkcd.XY(svg, {
 //圖表的標(biāo)題
 title: 'Pokemon farms',
 // 圖表的 x 標(biāo)簽
 xLabel: 'Coodinate',
 // 圖表的 y 標(biāo)簽
 yLabel: 'Count',
 // 需要可視化的數(shù)據(jù)
 data: {
 datasets: [{
 // 第一組數(shù)據(jù)
 label: 'Pikachu',
 data: [{ x: 3, y: 10 }, { x: 4, y: 122 }, { x: 10, y: 100 }, { x: 1, y: 2 }, { x: 2, y: 4 }],
 }, {
 // 第二組數(shù)據(jù)
 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 軸上看到的刻度號（默認(rèn)為 3）
 xTickCount: 5,
 // 自定義要在 y 軸上看到的刻度號（默認(rèn)為 3）
 yTickCount: 5,
 // 指定要放置圖例的位置
 legendPosition: chartXkcd.config.positionType.upRight,
 // 用線連接點(diǎn)（默認(rèn) false）
 showLine: false,
 // 指定時間格式
 timeFormat: undefined,
 // 更改點(diǎn)的大小（默認(rèn)為 1）
 dotSize: 1,
 },
 });
</script>

參數(shù)說明

xTickCount：自定義要在x軸上看到的刻度號（默認(rèn)為 3）
yTickCount：自定義要在y軸上看到的刻度號（默認(rèn)為 3）
legendPosition：指定要放置圖例的位置
showLine: 點(diǎn)連接成線。
timeFormat：指定時間格式
dotSize：更改點(diǎn)的大小（默認(rèn)為 1）
dataColors：不同顏色的數(shù)據(jù)集數(shù)組
fontFamily：定制圖表中使用的字體系列
unxkcdify：禁用 xkcd 效果（默認(rèn)為 false）

效果展示

如果你想將這些點(diǎn)連接起來，讓數(shù)據(jù)對比更加明顯的話。請修改 showLine：true 再刷新頁面你就可以看到連線的效果了。

3.3 條形圖

條形圖提供了一種顯示以豎條表示的數(shù)據(jù)值的方式。

示例代碼

<script>
 // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".bar-chart" 的元素。
 const svg = document.querySelector('.bar-chart');
 // chartXkcd.Bar 創(chuàng)建一個條形圖
 const barChart = new chartXkcd.Bar(svg, {
 // 圖表的標(biāo)題
 title: 'github stars VS patron number',
 // xLabel: '', // optional
 // yLabel: '', // optional
 // 圖表數(shù)據(jù)
 data: {
 labels: ['github stars', 'patrons'],
 datasets: [{
 data: [100, 2],
 }],
 },
 options: {
 // 自定義要在 y 軸上看到的刻度號（默認(rèn)為 3）
 yTickCount: 2,
 },
 });
</script>

參數(shù)說明

yTickCount：自定義要在y軸上看到的刻度號（默認(rèn)為 3）
dataColors：不同顏色的數(shù)據(jù)集數(shù)組
fontFamily：定制圖表中使用的字體系列
unxkcdify：禁用xkcd效果（默認(rèn)為 false）

效果展示

3.4 圓餅/甜甜圈圖

餅圖廣泛得應(yīng)用在各個領(lǐng)域，用于表示不同分類的占比情況，通過弧度大小來對比各種分類。餅圖通過將一個圓餅按照分類的占比劃分成多個區(qū)塊，整個圓餅代表數(shù)據(jù)的總量，每個區(qū)塊（圓弧）表示該分類占總體的比例大小，所有區(qū)塊（圓弧）的加和等于 100%。

示例代碼

<script>
 // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".pie-chart" 的元素。
 const svg = document.querySelector('.pie-chart');
 // chartXkcd.Pie 創(chuàng)建一個圓餅圖
 const pieChart = new chartXkcd.Pie(svg, {
 // 圖表的標(biāo)題
 title: 'What Tim made of',
 // 需要可視化的數(shù)據(jù)
 data: {
 labels: ['a', 'b', 'e', 'f', 'g'],
 datasets: [{
 data: [500, 200, 80, 90, 100],
 }],
 },
 options: {
 // 指定空的餅圖半徑
 innerRadius: 0.5,
 // 指定要放置圖例的位置
 legendPosition: chartXkcd.config.positionType.upRight,
 },
 });
</script>

參數(shù)說明

innerRadius：指定空的餅圖半徑（默認(rèn)值：0.5）
需要餅圖嗎？將 innerRadius 設(shè)置為 0
legendPosition：指定要放置圖例的位置
dataColors：不同顏色的數(shù)據(jù)集數(shù)組
fontFamily：定制圖表中使用的字體系列
unxkcdify：禁用 xkcd 效果（默認(rèn)為 false）

效果展示

3.5 雷達(dá)圖

雷達(dá)圖（Radar Chart）又被叫做蜘蛛網(wǎng)圖，適用于顯示三個或更多的維度的變量。雷達(dá)圖是以在同一點(diǎn)開始的軸上顯示的三個或更多個變量的二維圖表的形式來顯示多元數(shù)據(jù)的方法，其中軸的相對位置和角度通常是無意義的。

示例代碼

<script>
 // querySelector() 方法返回文檔中匹配指定 CSS 選擇器的一個元素。獲取文檔中 class=".radar-chart" 的元素。
 const svg = document.querySelector('.radar-chart');
 // chartXkcd.Radar 創(chuàng)建一個雷達(dá)圖
 const radarChart = new chartXkcd.Radar(svg, {
 // 圖表的標(biāo)題
 title: 'Letters in random words',
 // 需要可視化的數(shù)據(jù)
 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,
 // 點(diǎn)的大小
 dotSize: 0.8,
 // 在每行附近顯示標(biāo)簽
 showLabels: true,
 // 指定要放置圖例的位置
 legendPosition: chartXkcd.config.positionType.upRight,
 // unxkcdify: true,
 },
 });
</script>

參數(shù)說明

showLabels：在每行附近顯示標(biāo)簽（默認(rèn)為 false）
ticksCount：自定義要在主行上看到的刻度號（默認(rèn)為 3）
dotSize：更改點(diǎn)的大小（默認(rèn)為 1）
showLegend：在圖表附近顯示圖例（默認(rèn)為 false）
legendPosition：指定要放置圖例的位置
dataColors：不同顏色的數(shù)據(jù)集數(shù)組
fontFamily：定制圖表中使用的字體系列
unxkcdify：禁用 xkcd 效果（默認(rèn)為 false）

效果展示

四、最后

以上就是講解的全部內(nèi)容，相信教程至此 Chart.xkcd 庫的基本用法你已經(jīng)基本掌握，后面就可以用來今天學(xué)到的東西，提高自己項(xiàng)目的顏值了。

有了 Chart.xkcd 讓數(shù)據(jù)可愛地展示出來并不難，快動手自己實(shí)現(xiàn)一個吧～

參考資料

[1]《講解開源項(xiàng)目》: https://github.com/HelloGitHub-Team/Article

[2]CHART.XKCD 官方文檔: https://timqian.com/chart.xkcd/

[3]CHART.XKCD 項(xiàng)目地址: https://github.com/timqian/chart.xkcd

『講解開源項(xiàng)目系列』——讓對開源項(xiàng)目感興趣的人不再畏懼、讓開源項(xiàng)目的發(fā)起者不再孤單。跟著我們的文章，你會發(fā)現(xiàn)編程的樂趣、使用和發(fā)現(xiàn)參與開源項(xiàng)目如此簡單。歡迎留言聯(lián)系我們、加入我們，讓更多人愛上開源、貢獻(xiàn)開源～

ataGear數(shù)據(jù)可視化分析平臺提供了導(dǎo)入靜態(tài)HTML模板的功能，使您可以利用已有的任意HTML網(wǎng)頁資源制作數(shù)據(jù)可視化看板。

首先，您需要準(zhǔn)備一套已設(shè)置好布局的靜態(tài)HTML模板，其中包含的HTML網(wǎng)頁及相關(guān)資源，例如：

index.html
css/
  |---style.css
  |---images
       |---bg.png
       |---bg_head.png
js/
  |---index.js
  |---common.js

它的靜態(tài)效果如下圖所示：

然后，將這套靜態(tài)HTML模板壓縮到一個ZIP文件中，使用DataGear看板的[導(dǎo)入]功能，將這個ZIP文件導(dǎo)入為看板。

導(dǎo)入成功后，打開看板編輯界面，為HTML模板中的div元素添加dg-chart-widget屬性綁定圖表組件，例如：

...
<div class="panel-content"
    dg-chart-widget="圖表組件ID"></div>
...

其中，圖表組件ID 是圖表管理列表中的一個圖表?xiàng)l目ID。

設(shè)置完所有的div元素后，一個數(shù)據(jù)可視化看板就制作完成了，點(diǎn)擊[保存并展示]按鈕，即可查看展示效果。

等等，默認(rèn)的展示效果差強(qiáng)人意……，沒關(guān)系，自定義展示效果也很簡單！

首先，自定義圖表主題，打開看板編輯界面，為<body>標(biāo)簽添加dg-chart-theme自定義圖表主題，如下代碼：

...
<body dg-chart-theme="{color:'#F0F0F0',
    backgroundColor:'transparent',
    actualBackgroundColor:'#050d3c'}">
...
</body>
...

然后，自定義圖表設(shè)置項(xiàng)，為<body>標(biāo)簽添加dg-chart-options屬性，定義全局圖表設(shè)置項(xiàng)：

<body ... dg-chart-options="{title:{show:false},
    legend:{top:0},grid:{top:25}}">
<!--隱藏標(biāo)題、圖例頂部展示、坐標(biāo)系距頂部25像素，具體參考echarts設(shè)置項(xiàng)-->

大功告成！

官網(wǎng)地址：http://www.datagear.tech

源碼地址：

https://gitee.com/datagear/datagear

https://github.com/datageartech/datagear

源：AirPython

作者：星安果

1. 前言

大家好，我是安果！

使用 Django 進(jìn)行 Web 開發(fā)時，經(jīng)常有需要展示圖表的需求，以此來豐富網(wǎng)頁的數(shù)據(jù)展示

常見方案包含：Highcharts、Matplotlib、Echarts、Pyecharts，其中后 2 種方案使用頻率更高

本篇文章將聊聊 Django 結(jié)合 Echarts、Pyecharts 實(shí)現(xiàn)圖表可視化的具體流程

2. Echarts

Echarts 是百度開源的一個非常優(yōu)秀的可視化框架，它可以展示非常復(fù)雜的圖表類型

以展示簡單的柱狀圖為例，講講 Django 集成 Echarts 的流程

首先，在某個 App 的 views.py 編寫視圖函數(shù)

當(dāng)請求方法為 POST 時，定義柱狀圖中的數(shù)據(jù)值，然后使用 JsonResponse 返回數(shù)據(jù)

from django.http import JsonResponse
from django.shortcuts import render
def index_view(request):
if request.method == "POST":
# 柱狀圖的數(shù)據(jù)
datas = [5, 20, 36, 10, 10, 20]
# 返回數(shù)據(jù)
return JsonResponse({'bar_datas': datas})
else:
return render(request, 'index.html', )

在模板文件中，導(dǎo)入 Echarts 的依賴

PS：可以使用本地 JS 文件或 CDN 加速服務(wù)

{#導(dǎo)入js和echarts依賴#}
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.js"></script>

然后，重寫 window.onload 函數(shù)，發(fā)送一個 Ajax 請求給后端，利用 Echarts 將返回結(jié)果展示到圖表中去

最后，編寫路由 URL，運(yùn)行項(xiàng)目

from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('',include('index.urls')),
path('admin/', admin.site.urls),
]

發(fā)現(xiàn)，首頁展示了一個簡單的柱狀圖

3. Pyecharts

Pyecharts 是一款使用 Python 對 Echarts 進(jìn)行再次封裝后的開源框架

相比 Echarts，Django 集成 Pyecharts 更快捷、方便

Django 集成 Pyecharts 只需要 4 步

3-1.安裝依賴

# 安裝依賴
pip(3) install pyecharts

3-2.拷貝 pyecharts 的模板文件到項(xiàng)目下

將虛擬環(huán)境中 pyecharts 的模板文件拷貝到項(xiàng)目的模板文件夾下

比如本機(jī)路徑如下：

/Users/xingag/Envs/xh_log/lib/python3.7/site-packages/pyecharts/render/templates/

3-3.編寫視圖函數(shù)，渲染圖表

在視圖文件中，使用 pyecharts 庫內(nèi)置的類 Bar 創(chuàng)建一個柱狀圖

# Create your views here.
from django.http import HttpResponse
from jinja2 import Environment, FileSystemLoader
from pyecharts.globals import CurrentConfig
CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./index/templates"))
from pyecharts import options as opts
from pyecharts.charts import Bar
# http://127.0.0.1:8000/demo/
def index(request):
c = (
Bar()
.add_xaxis(["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
.add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
.set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副標(biāo)題"))
)
return HttpResponse(c.render_embed())

3-4.運(yùn)行項(xiàng)目

運(yùn)行項(xiàng)目，生成的柱狀圖如下：

這只是最簡單的使用實(shí)例，更多復(fù)雜的圖表及前后端分離、更新的例子

4. 最后

文中介紹了 Django 快速集成 Echarts 和 Pyecharts 的基本步驟

實(shí)際項(xiàng)目中，一些復(fù)雜的圖表、前后端分離數(shù)據(jù)更新可以參考官網(wǎng)去拓展

在線咨詢

上一篇：冀人版小學(xué)科學(xué)一年級上冊《認(rèn)識動物》優(yōu)質(zhì)課公開課課件、教案
下一篇：深入剖析CVE-2021-40444-Cabless利用鏈

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

手繪風(fēng)格的 JS 圖表庫：Chart.xkcd

1. 前言

2. Echarts

3. Pyecharts

4. 最后

您的項(xiàng)目需求