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

最新推荐文章于 2024-08-28 09:47:53 发布
最新推荐文章于 2024-08-28 09:47:53 发布
阅读量972 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songfei_dream/article/details/102816797
版权

本文作者：HelloGitHub-kalifun

图表库千万个今天 HelloGitHub 给大家推荐个很有“特色”的图表库：一个手绘风格的 JS 图表库 —— Chart.xkcd，快收起你紧绷、严肃的面容让我们一起 看看用手绘风格展示数据的效果。

一、介绍

项目地址：https://github.com/timqian/chart.xkcd

Chart.xkcd 是一个图表库，可绘制“非精细”、“卡通”或“手绘”样式的图表。

效果是不是很可爱？那下面就跟着 HelloGitHub 发起的《讲解开源项目》的教程一起学习、上手使用起来吧！

二、快速入手

使用 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 让数据可爱地展示出来并不难，快动手自己实现一个吧～

五、参考资料

CHART.XKCD 官方文档

CHART.XKCD 项目地址

『讲解开源项目系列』——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。跟着我们的文章，你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎留言联系我们、加入我们，让更多人爱上开源、贡献开源～

雨落无影
关注
python图片转手绘软件_酷！一个仿漫画手绘风格的 Python 图表库
weixin_26766559的博客
03-02 336
【导读】：关于数据可视化工具，如果你有点厌烦了常见风格(比如：Matplotlib 和 pyecharts)，那可以试试换一种风格。本文前哨君给大家介绍一个风格完全不一样的开源库：cutecharts，其 UI 效仿 XKCD 漫画风格，在部分场景(比如：个人作品展示)的效果或许会更好。补充：XKCD 是一个 IT 漫画网站，在国外非常有名气。为什么会有 cutecharts？据 cutechar...
chart.xkcd：xkcd样式的图表库
02-25
Chart.xkcd是一个图表库，可绘制“概略”，“卡通”或“手绘”样式的图表。 查看以获取更多说明和链接，或试用，或在与我们聊天 赞助商 | 快速开始 从chart.xkcd开始很容易。 所需要的只是页面中包含的脚本以及一...
Chart.xkcd图表库
钱辉
09-20 306
Chart.xkcd图表库
探索手绘风格的图表库：chart.xkcd
gitblog_00013的博客
05-11 327
探索手绘风格的图表库：chart.xkcd chart.xkcdxkcd styled chart lib项目地址:https://gitcode.com/gh_mirrors/ch/chart.xkcd 在数据可视化的世界里，我们常常寻求新颖且富有表现力的方式来展示信息。这就是chart.xkcd横空出世的原因。它是一个独特的图表库，将xkcd风格的“草图”、“卡通”或“手绘”风格融入到你的数...
chart.xkcd 开源项目教程
gitblog_00754的博客
08-21 485
chart.xkcd 开源项目教程 chart.xkcdxkcd styled chart lib项目地址:https://gitcode.com/gh_mirrors/ch/chart.xkcd 项目介绍 chart.xkcd 是一个开源的、手绘风格的图表库，旨在为网页提供简单、有趣的图表绘制功能。这个库的特点是图表呈现出的手绘效果，使得数据可视化更加生动和有趣。chart.xkcd 支持多种...
探索cutecharts.py：手绘风格的Python图表库
gitblog_00250的博客
08-28 325
探索cutecharts.py：手绘风格的Python图表库 cutecharts.py项目地址:https://gitcode.com/gh_mirrors/cu/cutecharts.py 在数据可视化的世界中，图表的样式和功能同样重要。今天，我们要介绍的是一个独特且充满魅力的Python图表库——cutecharts.py。这个库以其手绘风格的图表和简洁的API，吸引了众多开发者和数据科学...
Python 手绘样式图表库：cutecharts
Python中文社区
10-17 321
♚作者：陈键冬，Python中文社区专栏作者，开源项目pyecharts核心开发者。pyecharts项目曾上榜 Github Trending in Open Sour...
css风格图表,基于svg的手绘风格图表插件
weixin_39845461的博客
08-03 265
chart.xkcd是一款基于SVG的手绘风格图表插件。目前该插件支持折线图、饼状图、柱状图和散点图，支持npm安装。NPMnpm i chart.xkcd使用方法在HTML文件中引入下面的文件。HTML结构javascriptimport chartXkcd from 'chart.xkcd';const myChart = new chartXkcd.Line(svg, {...});柱状图：...
chart.xkcd-react:围绕chart.xkcd的React包装器
04-25
必须安装chart.xkcd@^1.1.12才能使用此库 快速开始 yarn add chart.xkcd-react import React from 'react' ; import chartXkcd from 'chart.xkcd' ; import { Line , Bar , Pie , XY } from "chart.xkcd-react" ...
xkcd1930:xkcd.com/1930-matlab开发
05-29
xkcd1930 是日历事实的生成器，基于 Randall Monroe 的 xkcd 漫画： https ://xkcd.com/1930 用途： s = xkcd1930； % 生成一个随机事实并保存为长字符串 s s = xkcd1930('titletext'); ％与上述相同，但包括标题...
xkcd-Generator:TensorFlow.js GAN用于生成新的xkcd漫画
05-02
xkcd-Generator是一种机器学习算法，旨在生成风格的新漫画。 它使用一个生成对抗神经网络，或GAN，如由Ian J. Goodfellow等人在剖成对抗性篮网说明。 该神经网络接受了来自xkcd的15幅漫画（1000-1014）的训练，这些...
基于svg的手绘风格图表插件
12-12
4. **自定义样式**：chart.xkcd的特色在于手绘风格，你可以通过调整选项来改变线条的粗细、颜色、曲线程度等，以达到你想要的效果。 5. **更新和交互**：插件也支持动态更新图表数据以及处理用户交互，例如点击图表...
基于Java的微信小程序html2wxml转换接口设计源码
09-24
该项目是基于Java的微信小程序html2wxml转换接口设计源码，共包含50个文件，其中包括10个属性配置文件、9个XML配置文件、6个首选项文件、6个Java源文件、3个Shell脚本、2个项目配置文件、2个HTML模板文件、1个类路径配置文件、1个Git忽略配置文件和1个JS类型定义文件。该解决方案利用JFinal、Jsoup和FastJson技术，为微信小程序提供高效的富文本渲染能力。
精品推荐新零售引爆新的品牌增长点完整版）图文.p
09-24
【精品推荐】新零售引爆新的品牌增长点完整版）图文.p
基于java的图书管理系统的开题报告.docx
09-24
基于java的图书管理系统的开题报告.docx
基于安卓开发的打砖块游戏+控制一个挡板（paddle）来反弹一个小球，以击碎屏幕上方的砖块+入门学习
09-24
创建一个简单的安卓小游戏示例，我们可以选择制作一个经典的“打砖块”（Breakout）游戏。这个游戏涉及玩家控制一个挡板（paddle）来反弹一个小球，以击碎屏幕上方的砖块。下面我将概述如何创建这个游戏，包括游戏使用简介、使用方法，以及游戏文件的基本格式。 游戏使用简介【核心代码】 游戏名称：简易打砖块 游戏目标：使用底部的挡板控制小球，使其不断向上弹跳并击碎上方的砖块。每击碎一个砖块，玩家都会获得分数。当所有砖块被击碎或小球落到屏幕底部时，游戏结束。 特色功能： 多级难度，随着游戏进行，砖块排列更加复杂。 音效和动画效果增强游戏体验。 排行榜记录高分，挑战自我。 游戏使用方法 下载与安装：首先，从提供的链接下载APK文件（安卓安装包）。在安卓设备上打开文件管理器，找到下载的APK文件并点击安装。根据设备设置，可能需要允许从未知来源安装应用。 启动游戏：安装完成后，在设备的应用列表中找到“简易打砖块”图标，点击启动游戏。 游戏控制： 移动挡板：使用屏幕底部的左右滑动来控制挡板的左右移动。 发射小球：游戏开始时，小球会自动从屏幕底部中间位置发出。若小球掉落到底部，游戏会短暂暂停。
geopandas安装包(pip install)_geopandas-0.14.1-py3-none-any.zip
09-24
在使用Python来安装geopandas包时，由于geopandas依赖于几个其他的Python库（如GDAL, Fiona, Pyproj, Shapely等），因此安装过程可能需要一些额外的步骤。以下是一个基本的安装指南，适用于大多数用户： 使用pip安装 确保Python和pip已安装： 首先，确保你的计算机上已安装了Python和pip。pip是Python的包管理工具，用于安装和管理Python包。 安装依赖库： 由于geopandas依赖于GDAL, Fiona, Pyproj, Shapely等库，你可能需要先安装这些库。通常，你可以通过pip直接安装这些库，但有时候可能需要从其他源下载预编译的二进制包（wheel文件），特别是GDAL和Fiona，因为它们可能包含一些系统级的依赖。 bash pip install GDAL Fiona Pyproj Shapely 注意：在某些系统上，直接使用pip安装GDAL和Fiona可能会遇到问题，因为它们需要编译一些C/C++代码。如果遇到问题，你可以考虑使用conda（一个Python包、依赖和环境管理器）来安装这些库，或者从Unofficial Windows Binaries for Python Extension Packages这样的网站下载预编译的wheel文件。 安装geopandas： 在安装了所有依赖库之后，你可以使用pip来安装geopandas。 bash pip install geopandas 使用conda安装 如果你正在使用conda作为你的Python包管理器，那么安装geopandas和它的依赖可能会更简单一些。 创建一个新的conda环境（可选，但推荐）： bash conda create -n geoenv python=3.x anaconda conda activate geoenv 其中3.x是你希望使用的Python版本。 安装geopandas： 使用conda-forge频道来安装geopandas，因为它提供了许多地理空间相关的包。 bash conda install -c conda-forge geopandas 这条命令会自动安装geopandas及其所有依赖。 注意事项 如果你在安装过程中遇到任何问题，比如编译错误或依赖问题，请检查你的Python版本和pip/conda的版本是否是最新的，或者尝试在不同的环境中安装。 某些库（如GDAL）可能需要额外的系统级依赖，如地理空间库（如PROJ和GEOS）。这些依赖可能需要单独安装，具体取决于你的操作系统。 如果你在Windows上遇到问题，并且pip安装失败，尝试从Unofficial Windows Binaries for Python Extension Packages网站下载相应的wheel文件，并使用pip进行安装。 脚本示例 虽然你的问题主要是关于如何安装geopandas，但如果你想要一个Python脚本来重命名文件夹下的文件，在原始名字前面加上字符串"geopandas"，以下是一个简单的示例： python import os # 指定文件夹路径 folder_path = 'path/to/your/folder' # 遍历文件夹中的文件 for filename in os.listdir(folder_path): # 构造原始文件路径 old_file_path = os.path.join(folder_path, filename) # 构造新文件名 new_filename = 'geopandas_' + filename # 构造新文件路径 new_file_path = os.path.join(folder_path, new_filename) # 重命名文件 os.rename(old_file_path, new_file_path) print(f'Renamed "{filename}" to "{new_filename}"') 请确保将'path/to/your/folder'替换为你想要重命名文件的实际文件夹路径。
基于HTML5和JavaScript的全平台录音与语音识别设计源码
最新发布
09-24
该项目是一个基于HTML5和JavaScript的全平台录音与语音识别系统设计源码，采用JavaScript、HTML、Vue、Java、Swift、微信小程序和TypeScript等多种语言开发。项目文件总计295个，包括133个JavaScript文件、37个PNG图片文件、19个JSON配置文件、17个HTML页面、16个Vue组件、15个Markdown文档、6个MP3音频文件、4个XML配置文件、4个Java源文件、4个WXSS样式文件。它支持多种音频格式如MP3、WAV、OGG、WEBM、AMR等，并兼容PC端和移动端的Android、iOS部分浏览器以及Hybrid App。同时，该项目还提供了Android和iOS App的源码，以及微信小程序版本。此外，它还集成了ASR语音识别技术，能够实现语音转文字的功能，并提供了H5版语音通话聊天示例以及DTMF编码解码功能。
matplotlib.pyplot教程：基础到高级图表绘制
- **颜色与风格**：matplotlib提供了丰富的颜色选择和自定义颜色选项，并支持xkcd模式（一种模拟手绘风格）。 此matplotlib.pyplot笔记详尽地介绍了如何使用该库进行各种类型的图形绘制，以及如何灵活地定制和控制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值