整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

手绘风格的 JS 图表库：Chart.xkcd

文作者：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 参数说明

  • 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）

效果展示



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）

效果展示



四、最后

以上就是讲解的全部内容，相信教程至此 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

作者：星安果

1. 前言

大家好，我是安果！

使用 Django 进行 Web 开发时，经常有需要展示图表的需求，以此来丰富网页的数据展示

常见方案包含：Highcharts、Matplotlib、Echarts、Pyecharts，其中后 2 种方案使用频率更高

本篇文章将聊聊 Django 结合 Echarts、Pyecharts 实现图表可视化的具体流程

2. Echarts

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),
]

发现，首页展示了一个简单的柱状图

3. Pyecharts

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.运行项目

运行项目，生成的柱状图如下：

这只是最简单的使用实例，更多复杂的图表及前后端分离、更新的例子

4. 最后

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

实际项目中，一些复杂的图表、前后端分离数据更新可以参考官网去拓展


在线咨询
上一篇：冀人版小学科学一年级上册《认识动物》优质课公开课课件、教案
下一篇：深入剖析CVE-2021-40444-Cabless利用链

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 宏伟区 剑河县 巴楚县 吉利区 昭觉县 东乌珠穆沁旗 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服