整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
近一阵时间因为公司项目快要上线，所以文章会更新的很慢，望童靴们见谅。
用宝珠打扮自己，不如用知识充实自己！
关注小白前端，持续收到文章推送。
布尔操作符一共有三个：逻辑非（！），逻辑与（&&），逻辑或（||）。在开发中，布尔操作符用的很多。像if...else就经常要用到它去测试两个值。
逻辑非用一个叹号（！）表示。逻辑与操作符会把操作数先转换为布尔值，然后在对其求反。
逻辑非遵循下面的规则：
操作数是对象，返回false；
操作数是空字符串，返回true；
操作数是非空字符串，返回false；
操作数是数值0，返回true；
操作数是任何非0数值（包括无穷Infinity），返回false；
操作数是null或者undefined或者NaN，则返回true；
我们来看几个例子：
我们在浏览器控制台看一下结果：
逻辑非也可以把一个值转换为对应的布尔值，只需要在加一个叹号表示，如下例子：
console.log(!!0) //false
console.log(!!"") //false
console.log(!!"abc") //true
逻辑与用两个和号（&&）表示，有两个操作数。如下例子：
var result=true && false
逻辑与的规则如下：
如果两个操作数都是true，则结果返回true;
如果两个操作数都是false，则结果返回false;
如果两个操作数中任意一个是false，则结果返回false;
逻辑与操作符可以用于任何操作数，不仅仅布尔值。在有一个操作数不是布尔值的情况下，逻辑与操作就不一定返回布尔值了。那么，它应该遵循以下的规则：
第一个操作数是对象，返回第二个操作数；
如果两个都是对象，则返回第一个操作数；
如果第一个操作数是null,则返回null；
如果第一个操作数是undefined，则返回undefined；
如果第一个操作数是NaN，则返回NaN；
逻辑与操作属于短路操作，如果第一个操作数能决定结果，那么就不会对第二个操作数求值了。如果第一个操作数是false，那么第二个操作数是什么值，结果都不会是true了。
如下：
var a=true;
console.log(a && b); //发生错误
如上因为a是true,所以对第二个操作数进行求值。但因为b没有声明，因此会报错。
逻辑或用两个竖线（||）表示，有两个操作数。如下例子所示：
var result=true || false；
逻辑或的规则如下：
如果两个操作数都是true,则返回true;
如果两个操作数都是false，则返回false;
如果两个操作数任意一个是true，则返回 true；
和逻辑与相似，如果有一个操作数不是布尔值，逻辑或也不一定返回布尔值。它遵循如下规则：
第一个操作数是对象，则返回第一个操作数；
第一个操作数的求值是false，则返回第二个；
如果两个操作数都是对象，则返回第一个；
如果两个操作数是null，则返回null；
如果两个操作数是NaN，则返回NaN；
如果两个操作数是undefined，则返回undefined；
如下例子：
console.log(true || false); //true
console.log(null || "123"); // 123
console.log(true || undefined); //true
console.log(0 || 2); //2
console.log(false || true); //true
今天内容有点多，但都是基础的东西。童靴们自己打开编辑器练习一下，看看不同类型的操作数都会返回什么结果。
文作者：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
『讲解开源项目系列』——让对开源项目感兴趣的人不再畏惧、让开源项目的发起者不再孤单。跟着我们的文章，你会发现编程的乐趣、使用和发现参与开源项目如此简单。欢迎留言联系我们、加入我们，让更多人爱上开源、贡献开源～
术家的作品大多有点高深，除非是写实类作品，不然你不一定能「看懂」。
而代码对大多数人来说也是艰难的。对非专业人士来说，代码可能比艺术品还要复杂。那么，如果用代码来搞艺术创作，这一切会更简单吗？
《索思沃尔德的夜晚》是一幅安静的图画。即将西下的太阳光撒在湖面上，湖上波光粼粼，泛着金光，波浪的涟漪一点点的散开。岸上的建筑物则安然有序，灯塔、围墙、小房子，组成了这幅安静的风景图。
有人觉得这幅画看上去冷清，过于安静，是一幅悲伤的画。
有人觉得这幅画阳光照耀四方，小屋整齐的立在一旁，是一幅和谐又温暖的风景画。
当然，如果这些人知道这幅画是用代码画的，可能就只会说这是一幅很漂亮的画了。毕竟代码听上去就和艺术无关，和情感表达无缘。
此画的作者本·埃文斯是一个网页设计师，是一个前端开发，也是一个插画家。《索思沃尔德的夜晚》是他用层叠样式表（CSS）画的一幅作品。除了这幅画，他还用 CSS 画过大海，画过扑克牌。
和他一样使用 CSS 画画的人也不止一个，近些年还有越来越多的趋势。
自由网络开发者克里斯·帕特尔画的辛普森一家是前些年的作品，只是近来才开始被人注意。在 GitHub 上，你可以轻易找到创作者的代码，并在它的基础上进行更改。
当你复制原作者的代码，再稍以修改后，你就可以画出属于自己的辛普森。你还可以给他变色，让他从透明变成黄色、蓝色、绿色。
在 CSS 作图这个领域，数字艺术家戴安娜·史密斯则是一个不可忽略的先驱人物，他以 CSS 的巴洛克风格作画而闻名，创作过多幅 18 世纪复古风格的作品，也画过现实向的静物海报。
史密斯的作品从来不使用绘图软件，他只用手写的 HTML / CSS 代码创建精美的图片。作为一个每天 90% 的工作都围绕着 JavaScript 工作的程序员，史密斯却更喜欢 CSS 作画，因为 CSS 有一些限制的规则。
这只是我喜欢 CSS 的众多原因之一。
有限的规则正是它的乐趣所在，你不会期望 CSS 能满足你所有的需求。这就是为什么当你在 CSS 最终找到了一种（可以满足你的）方法时，它就会变得更有价值。
在工作之余，史密斯还会不断回到 CSS 寻找艺术灵感，在限制之中创作新的艺术作品。
因为一些关于这些限制的东西一直在召唤着我。当我在说严格的限制是激发创造力的最佳催化剂时，我并不孤单。因为完全的艺术创作自由可能是一个令人麻痹的概念。
值得一提的是，有限制的 CSS 图画不是一个完全静态的艺术作品。不管是简单的辛普森一家头像画还是精致的巴洛克肖像画、风景画，他们都是会变化的。每个人可以通过改变开源的代码来创作出自己的 CSS 图画。
在此之外，选择不同的浏览器打开图像也会呈现不同的作品。作为实时呈现的图画，每个浏览器在加载页面时都会将图画的代码呈现为绘图。
而大多数的数字艺术家都是在 Chrome 浏览器上处理代码的。所以除了 Chrome 浏览器能够呈现图片本身预想的画作外，其它浏览器都会「画」出不同的图像。这也展示了不同浏览器转换工作的差别。
创作者说不考虑图画的兼容性问题，反而更有意思。
由于这个项目的艺术性原因，我并不关心跨浏览器的兼容性，所以实时预览可能在除 Chrome 之外的任何浏览器中看起来都很可笑。
适配单一浏览器也有惊喜。当我们将这些代码放进不同浏览器的时候，有的图像有了出乎意料的变化。
Chrome 浏览器在羽毛和发丝的转换上非常细致，展现了本身的细节，Safari 浏览器则在部分高光的处理上有点过火，裙子也多了一条竖线。
▲ 左为 Chrome 浏览器呈现效果，右为 Safari 浏览器呈现效果
不过随着时间往前移，我们用更多版本的浏览器配上 CSS 代码图画时，呈现效果就会更特别。
这幅画本尊是这样的：
在 Safari 浏览器中，蕾丝的花边装饰直接盖在了女人的脸上，看不出原图。
在 2014 版本的 Opera 浏览器中，画作有了一种全然不同的风格。
脖子分成了三个部分，眉毛、头发、眼睫毛的位置都出现了偏移和错位，更条码式。
而 Edge 浏览器则自动消掉了画作的棱角，使整幅图画更为平滑、阴沉。
最后在上古时期的网景浏览器中，这位女士的嘴巴、眼睛等五官都变成了不同大小的方块，有点乐高的感觉，风格独树一帜。
作为该领域的先驱人物，史密斯给这些图画的表现赋予了更多的意义：
当你在不同的浏览器上查看这张图片时，你就像是在查看互联网的历史，以及当时用户对浏览器的要求。
代码是冰冷的、理性的代表，它是没有感情的。而画作的艺术则能表达作者丰沛的情感和思想。但当理性的代码用来创作感性的画作时，这一切会改变吗？
在一部分人看来，数字艺术是不能算作真正的艺术的。
当大片空白可以在瞬息间充满五彩的色块，渲染过度也能在强大工具的帮助下变得快捷且自然时，人们认为这不再是艺术了。虽然数字化工具做的画也可以很漂亮，很有创意，但人们会觉得它没有「灵魂」。即使它能模仿油画、水墨等不同风格，但创造出的作品也称不上艺术。
这个问题甚至可以上升到「代码是不是艺术」的问题上，深入讨论一下艺术的定义和内涵。
在主流观念中来，那些使用新工具去创作艺术作品的人不算正统艺术家。即便要称为艺术家，也得在前面加上「数字」两个字。在大众的、观念中，数字艺术家和传统的艺术家泾渭分明，完全不同。即便这两种艺术家在显示生活中已经有了很多工作的交织、身份的重合。
对当下的数字时代而言，随着互联网在我们生活中的渗透程度越来越深。每个人可能都会成为数字艺术家，在创作的过程中，都需要数字工具的帮助。
而纯粹用数字工具画出的 CSS 作图在可玩性、趣味性上都强于普通的艺术作品。即使我们不把它看作一个艺术杰作，它也是一个互联网的行为艺术作品。
它让我们意识到自己生活在一个现实扭曲的文化泛滥时代，人与人之间很难获得一致的事实版本。
你看到的东西是由你的设备版本决定的，是和你选择的数字工具有关的。当我们看到的东西不一样的时候，我们创作的东西也是不一样的。
CSS 作画与其说是艺术，不如说它让我们看到了互联网的一种能力，一次进程，一段历史。
*请认真填写需求信息，我们会在24小时内与您取得联系。
