整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文作者：HelloGitHub-kalifun
圖表庫千萬個今天 HelloGitHub 給大家推薦個很有“特色”的圖表庫：一個手繪風格的 JS 圖表庫 —— Chart.xkcd，快收起你緊繃、嚴肅的面容讓我們一起看看用手繪風格展示數據的效果。
一、介紹
項目地址：https://github.com/timqian/chart.xkcd
Chart.xkcd 是一個圖表庫，可繪制“非精細”、“卡通”或“手繪”樣式的圖表。
效果是不是很可愛？那下面就跟著 HelloGitHub 發起的《講解開源項目》[1]的教程一起學習、上手使用起來吧！
二、快速入手
使用 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 參數說明
三、圖表類型
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>
參數說明
效果展示
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>
參數說明
效果展示
如果你想將這些點連接起來，讓數據對比更加明顯的話。請修改 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>
參數說明
效果展示
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>
參數說明
效果展示
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>
參數說明
效果展示
四、最后
以上就是講解的全部內容，相信教程至此 Chart.xkcd 庫的基本用法你已經基本掌握，后面就可以用來今天學到的東西，提高自己項目的顏值了。
有了 Chart.xkcd 讓數據可愛地展示出來并不難，快動手自己實現一個吧～
參考資料
[1]《講解開源項目》: https://github.com/HelloGitHub-Team/Article
[2]CHART.XKCD 官方文檔: https://timqian.com/chart.xkcd/
[3]CHART.XKCD 項目地址: https://github.com/timqian/chart.xkcd
『講解開源項目系列』——讓對開源項目感興趣的人不再畏懼、讓開源項目的發起者不再孤單。跟著我們的文章，你會發現編程的樂趣、使用和發現參與開源項目如此簡單。歡迎留言聯系我們、加入我們，讓更多人愛上開源、貢獻開源～
ataGear數據可視化分析平臺提供了導入靜態HTML模板的功能，使您可以利用已有的任意HTML網頁資源制作數據可視化看板。
首先，您需要準備一套已設置好布局的靜態HTML模板，其中包含的HTML網頁及相關資源，例如：
index.html
css/
|---style.css
|---images
|---bg.png
|---bg_head.png
js/
|---index.js
|---common.js它的靜態效果如下圖所示：
然后，將這套靜態HTML模板壓縮到一個ZIP文件中，使用DataGear看板的[導入]功能，將這個ZIP文件導入為看板。
導入成功后，打開看板編輯界面，為HTML模板中的div元素添加dg-chart-widget屬性綁定圖表組件，例如：
...
<div class="panel-content"
dg-chart-widget="圖表組件ID"></div>
...其中，圖表組件ID 是圖表管理列表中的一個圖表條目ID。
設置完所有的div元素后，一個數據可視化看板就制作完成了，點擊[保存并展示]按鈕，即可查看展示效果。
等等，默認的展示效果差強人意……，沒關系，自定義展示效果也很簡單！
首先，自定義圖表主題，打開看板編輯界面，為<body>標簽添加dg-chart-theme自定義圖表主題，如下代碼：
...
<body dg-chart-theme="{color:'#F0F0F0',
backgroundColor:'transparent',
actualBackgroundColor:'#050d3c'}">
...
</body>
...然后，自定義圖表設置項，為<body>標簽添加dg-chart-options屬性，定義全局圖表設置項：
<body ... dg-chart-options="{title:{show:false},
legend:{top:0},grid:{top:25}}">
<!--隱藏標題、圖例頂部展示、坐標系距頂部25像素，具體參考echarts設置項-->大功告成！
官網地址：http://www.datagear.tech
源碼地址：
https://gitee.com/datagear/datagear
https://github.com/datageartech/datagear
源：AirPython
作者：星安果
大家好，我是安果！
使用 Django 進行 Web 開發時，經常有需要展示圖表的需求，以此來豐富網頁的數據展示
常見方案包含：Highcharts、Matplotlib、Echarts、Pyecharts，其中后 2 種方案使用頻率更高
本篇文章將聊聊 Django 結合 Echarts、Pyecharts 實現圖表可視化的具體流程
Echarts 是百度開源的一個非常優秀的可視化框架，它可以展示非常復雜的圖表類型
以展示簡單的柱狀圖為例，講講 Django 集成 Echarts 的流程
首先，在某個 App 的 views.py 編寫視圖函數
當請求方法為 POST 時，定義柱狀圖中的數據值，然后使用 JsonResponse 返回數據
from django.http import JsonResponse
from django.shortcuts import render
def index_view(request):
if request.method == "POST":
# 柱狀圖的數據
datas = [5, 20, 36, 10, 10, 20]
# 返回數據
return JsonResponse({'bar_datas': datas})
else:
return render(request, 'index.html', )
在模板文件中，導入 Echarts 的依賴
PS：可以使用本地 JS 文件或 CDN 加速服務
{#導入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 函數，發送一個 Ajax 請求給后端，利用 Echarts 將返回結果展示到圖表中去
<script>
// 柱狀圖
function show_bar(data) {
//控件
var bar_widget = echarts.init(document.getElementById('bar_div'));
//設置option
option = {
title: {
text: '簡單的柱狀圖'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
type: 'category',
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {
type: 'value'
},
series: [{
data: data,
type: 'bar'
}]
};
bar_widget.setOption(option)
}
//顯示即加載調用
window.onload = function () {
//發送post請求，地址為index（Jquery）
$.ajax({
url: "/",
type: "POST",
data: {},
success: function (data) {
// 柱狀圖
show_bar(data['bar_datas']);
//后端返回的結果
console.log(data)
}
})
}
</script>
最后，編寫路由 URL，運行項目
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('',include('index.urls')),
path('admin/', admin.site.urls),
]
發現，首頁展示了一個簡單的柱狀圖
Pyecharts 是一款使用 Python 對 Echarts 進行再次封裝后的開源框架
相比 Echarts，Django 集成 Pyecharts 更快捷、方便
Django 集成 Pyecharts 只需要 4 步
3-1.安裝依賴
# 安裝依賴
pip(3) install pyecharts
3-2.拷貝 pyecharts 的模板文件到項目下
將虛擬環境中 pyecharts 的模板文件拷貝到項目的模板文件夾下
比如本機路徑如下：
/Users/xingag/Envs/xh_log/lib/python3.7/site-packages/pyecharts/render/templates/
3-3.編寫視圖函數，渲染圖表
在視圖文件中，使用 pyecharts 庫內置的類 Bar 創建一個柱狀圖
# 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="我是副標題"))
)
return HttpResponse(c.render_embed())
3-4.運行項目
運行項目，生成的柱狀圖如下：
這只是最簡單的使用實例，更多復雜的圖表及前后端分離、更新的例子
文中介紹了 Django 快速集成 Echarts 和 Pyecharts 的基本步驟
實際項目中，一些復雜的圖表、前后端分離數據更新可以參考官網去拓展
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
