extjs chart无法在panel中显示_手绘风格的 JS 图表库:Chart.xkcd
本文作者: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 项目地址
『讲解开源项目系列』——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。跟着我们的文章,你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎留言联系我们、加入我们,让更多人爱上开源、贡献开源~
extjs chart无法在panel中显示_手绘风格的 JS 图表库:Chart.xkcd相关推荐
- js折线图设置y轴刻度_手绘风格的 JS 图表库:Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
- 手绘风格的 JS 图表库:Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
- python图片转手绘软件_酷!一个仿漫画手绘风格的 Python 图表库
[导读]:关于数据可视化工具,如果你有点厌烦了常见风格(比如:Matplotlib 和 pyecharts),那可以试试换一种风格. 本文前哨君给大家介绍一个风格完全不一样的开源库:cutechart ...
- extjs chart无法在panel中显示_HighChart教程:Swift中的Highcharts iOS库
以下文章总结了如何在Swift中使用Highcharts iOS库. 我们将对2016/2017赛季四支顶级冠军联赛球队的统计数据进行可视化. A.如何创建Highcharts项目 入门 在Xcode ...
- 在panel中显示一个新的form
在一个panel中显示新的form 说明:控件formDemo(form),panelDemo(panel) 分析:由于from是顶级控件,而panel并不是,所以直接调用 panelDem ...
- python可视化包选哪个_给大家介绍一个很酷的 Python 手绘风格可视化神包:cutecharts...
https://github.com/chenjiandongx/cutecharts 今天,给大家介绍一个很酷的 Python 手绘风格可视化神包:cutecharts.和 Matplotlib . ...
- 【产品经理】手绘风格在网页设计中的运用
转载自:老二牛车教育 » [产品经理]手绘风格在网页设计中的运用 本文中,我们将讨论怎样在网页中应用手绘风格,以改善网站的用户体验. 识别度与真实感 手绘风格非常有利于展示人性色彩,形成独特的识别度, ...
- wacom怎么调压感_手绘板压感是什么 数位板压感怎么调【教程】
[手绘板压感]手绘板压感是什么 数位板压感怎么调 手绘板压感是什么 1 . 压感级别就是用笔轻重的感应灵敏度,捕捉画手力度变化的每个瞬间,并经过电脑计算表现出来:压感现在有三个等级,分别为 512 ( ...
- 电脑画画软件_手绘、板绘、还有用pad画画都有啥区别?
萝卜青菜,各有所爱.所以这个选择-- [手绘(指不用电子产品的一切绘画方式)] 优点:真实可感,纸张带来的轻微摩擦.晕染等触感,都是板绘无法取代. 在电子时代来临之前,大家用于创作的手法非常非常多元, ...
最新文章
- 经常玩电脑正确的坐姿_初级茶艺师工作技能培训:第一节礼仪(正确的坐姿)...
- 实战Kaggle比赛(1):树叶分类
- C++绝不在构造和析构过程中调用virtual函数
- 一个判断字符串是否是数字的正则表达式
- 男厕改女厕能多敷衍......
- POJ 1300 Door Man(欧拉回路的判定)
- 软件工程第二次作业(原型设计)
- easyui 提示框组件_15、Message 消息窗口组件
- java中list、set和map 实例
- Python~FTP文件下载
- STM32-CAN通信协议
- dcp9030cdn定影_兄弟DCP-9030CDN驱动下载
- 未明学院:都知道智商、情商、逆商,可你知道“搜商”吗?
- python生成树状图_使用python的分层聚类树状图
- 【Android取证篇】一键分析APK利器-APK Messenger
- 【html】【微信小程序】将图片压缩,文件上传的方法
- 34岁程序员月薪3万2,跳槽被国企录取,看到月收入后却犹豫了!
- 小米4调整系统分区刷入opengapps stock
- ElasticSearch排序引起的all shards failed异常
- MySQL(加强)06 -- 触发器(Trigger)