本文转载自微信公众号“小张Python”，作者zeroingi转载请联系小张Python公众号。0.前言大家好，好久没更新原文了，失踪人口又回来了~近期准备秋招。正在学习一些Java相关的知识，更新会延迟。之前一直在和Python打交道，但是这不是想快点找到工作吗？Python虽然用途广泛，但目前并不是企业需要的主流语言。与C++和Java相比，它是相当弱的。因此，我想借此机会好好学习Java，希望能赶上秋招的末班车。学了Java，才知道自己菜量很大。没有刻意去了解语言背后的基础知识，比如进程、内存管理等。它一直在消耗；是等待还是重启程序，还是定位问题解决优化代码？如果我想定位问题，应该从哪里入手呢？网络TCP/IP协议：估计很多看这篇文章的朋友现在学Python学爬虫，现在有两个问题请教大家：1、ResponseHeaders中常见的Cookies和Session有哪些？目标站点获取数据时，返回的状态码中的2xx、3xx、4xx代表什么？上面列出的两个问题都与计算机网络有关。了解了它们之后，做爬虫就比较容易了，和regular类似，bs4文本解析只是一个工具。如果你学会了，你可以很快上手。垃圾回收、缓存一致性等相关知识：有时为了缩短任务执行周期，会用到线程。在使用的时候，Python中的GIL（GlobalInterpreterLock）可以保证程序运行，但是它背后的原理和机制是什么？接触了这些知识后才发现，操作系统、语言特性、计算机网络、数据结构和算法等基础知识才是计算机入门的开始（语言只能说是一种工具），只有掌握了基础知识，以后的学习之路会更加扎实顺畅；也印证了一句古话，地基不牢，地动山摇。只知道学习一些函数相关的库函数，脚本实现的话，可以俗称packageman。也希望大家以后多多借鉴，注意基础知识。1.anichart的介绍就这么啰嗦了，本期技术案例分享正式开始。之前分享过一篇关于动态排序图制作的文章，使用matplolib的动画功能。有兴趣的可以看看用python制作超可燃动态排序图！基本功能实现了，但是最后的效果就不是那么友好了。该方法的基本原理是先用Matplotlib将数据可视化为每一帧图片，然后将每一帧拼接成视频。缺点很明显：步骤繁琐，代码量大，可视化效果差。今天我将分享另一种方法。为了制作这种状态图，我使用了一个Github项目anichart。众所周知，想要做出一些丝滑流畅的视觉交互效果，javascripts是必不可少的。是的，而且这个项目主要是用typescript实现的，项目由某B站Up主维护[Jannchie看到]typescript语言是基于js开发的编程语言，为了弥补后者性能差等缺点可维护性和混淆类型；anichart的主要功能是做动态排序图，可视化效果好很多。下面是我根据项目中提供的测试数据绘制的最终排序图。2.环境介绍首先说明一下本次使用的项目环境，anichart整体来说是一个前端项目，所以本次使用的工具都是跟前端相关的。本教程仅介绍如何使用该项目。你不需要考虑具体的细节，也就不用担心你有没有前端知识；要用到的软件如下：node.js；ffmpeg；测试系统为Win10；Node.js在这里主要有两个作用：1.管理下载项目需要的一些依赖；2.启动js脚本；ffmpeg主要是在windows上下载安装node.js和ffmpeg比较简单，这里就不多介绍了。这里推荐两个链接供大家参考：Node.js安装：https://www.jianshu.com/p/2958fc051bfbffmpeg安装：https://zhuanlan.zhihu.com/p/118362010两个软件安装完成后，别忘了配置环境变量~3。Anichart库使用3.1anichart安装anichart作者已经上传到npm官网，打开命令行，借助npmianichart命令安装，我们不需要从Github克隆，什么是npm？Npm实际上是Node.js的包管理器。也就是说，你配置好Node.js命令后，npm就可以正常使用了。3.2新建一个js文件进行安装之后，接下来就可以使用了。在anichart安装路径下新建一个js文件。文件名可以任意命名，然后在新建的js文件中加入如下代码constani=require('anichart')conststage=newani.Stage()stage.options.fps=24stage.options.sec=30stage.output=falseconstbgAni=newani.RectAni()bgAni.component.shape={width:stage.canvas.width,height:stage.canvas.height,}bgAni.component.fillStyle='#1e1e1e'consttextLinesAni=newani.TextLinesAni()textLinesAni.component.fillStyle='#eee'textLinesAni.component.textAlign='center'textLinesAni.component.textBaseline='middle'textLinesAni.component.position={x:stage.canvas.width/2,y:stage.canvas.height/2,}consttextAnichart=newani.TextAni()textAnichart.component.fontSize=48textAnichart.component.font='SarasaMonoSlabSC'textAnichart.component.text='Anichart'textAnichart.component.fontWeight='bolder'textAnichart.type='blur'textLinesAni.children.push(textAnichart)ani.recourse.loadImage('H:/Data/data/ANI.png','logo')ani.recourse.loadImage('https://avatars3.githubusercontent.com/u/29743310?s=460&u=8e0d49b98c35738afadc04e70c7f3918d6ad8cdb&v=4','jannchie')ani.recourse.loadCSV('H:/Data/data/test.csv','data')constrectAni=ani.createAni([newani.Rect({position:{x:100,y:0},shape:{width:100,height:0},fillStyle:'#d23',}),newani.Rect({shape:{width:100,height:200},fillStyle:'#2a3',alpha:1,}),newani.Rect({shape:{width:100,height:0},fillStyle:'#569',alpha:0,}),],[0,1,2],ani.ease.easeElastic)constlogoCenter=newani.Image({path:'H:/Data/data/ANI.png',position:{x:stage.canvas.width/2,y:stage.canvas.height/2,},alpha:0.25,center:{x:128,y:128},shape:{width:256,height:256},})constlogoAni=ani.createAni([newani.Image({path:'H:/Data/data/ANI.png',position:{x:0,y:stage.canvas.height-108,},shape:{width:128,height:128},}),newani.Image({path:'H:/Data/data/ANI.png',position:{x:stage.canvas.width-128,y:stage.canvas.height-108,},shape:{width:128,height:128},aalpha:1.0,}),newani.Image({path:'H:/Data/data/ANI.png',position:{x:stage.canvas.width-128,y:stage.canvas.height-108,},shape:{width:128,height:128},alpha:0,}),],[0,1,2],ani.ease.easeBounce)constbarChart=newani.BarChart({shape:{width:stage.canvas.width,height:stage.canvas.height},labelFormat(id){returnid//returnmeta.get(id).name;},aniTime:[0,30],})constlineChart=newani.LineChart({aniTime:[0,30],shape:{width:stage.canvas.width,height:stage.canvas.height/2},position:{x:0,y:stage.canvas.height/2},})stage.addChild(bgAni)//stage.addChild(a)stage.addChild(logoCenter)stage.addChild(textLinesAni)stage.addChild(rectAni)stage.addChild(logoAni)stage.addChild(barChart)stage.addChild(lineChart)复制代码constpie=newani.PieChart({aniTime:[0,30],radius:[80,120],position:{x:stage.canvas.width/2,y:stage.canvas.height/2},})stage.addChild在(pie)stage.play()运行之前，您需要更改几个参数。第一个是改变数据路径ani.recourse.loadCSV('H:/Data/data/test.csv','data')数据格式需要如下以人脸的形式存储，后面的数据表示数据源中更改的列名。比如日期作为变量进行序列化name,date,value,channel,otherJannchie,2020-01-01,1,technology,otherJannchie,2020-01-03,6,technology,otherJannchie,2020-01-05,3,technology,otherJannchie,2020-01-207,-,technology,otherJannchie,2020-01-09,7,technology,otherJannchie,2020-01-12,12,technology,otherCake47,2020-01-03,10,life,otherCake47,2020-01-02,5,life,otherCake47,2020-01-06,2,life,otherCake47,2020-01-09,3,life,otherCake47,2020-01-11,4,life,other第二个需要改所有png路径，改成你自己的，随便换成你的图片路径，影响不大，接下来就是启动脚本，在js同文件目录下打开一个命令行，输入nodeXXX.js,然后按Enter。XXX.js代表你的js文件。效果如下，会生成一个out文件夹。里面存放的是anichart画的图3.3用ffmpeg图片生成视频最后进入out文件夹，用ffmpeg命令把图片合成成视频，ffmpeg-fimage2-framerate12-ioutput-%d.pngfoo.avi-framerate的下面的参数12代表生成视频的fps，可以根据自己的情况设置。这里我设置为24；最后生成一个动态排序的视频，然后可以在视频中添加一些bgm和feel4.js中的一些参数来介绍anichart的使用。原作者没有过多介绍。Github主页只介绍了最简单的使用方法。所以，为了给大家生成一些比较好的可视化效果，我会在上面的js代码中简单介绍一些参数，补充一些关于这个anichart库的信息。理解4.1fps，secstage.options.fps=24stage.options.sec=30fps，顾名思义就是一秒多fewframes，sec代表生成的slice持续多长时间（单位：秒）；如果使用以上参数设置，将生成24x30=720张图片；这两个参数决定了最终视频的流畅度，后期使用ffmpeg生成视频建议framerate参数fps保持一致4.2ani.recourse.loadImageani.recourse.loadImage('https://avatars3.githubusercontent.com/u/29743310?s=460&u=8e0d49b98c35738afadc04e70c7f3918d6ad8cdb&v=4','jannchie')loadImage用于给直方图中的每个数据条添加图片标识。该方法需要添加两个参数。前者表示图片路径或网页链接，后者表示需要加logo的数据栏名称。例如这里选择的数据条名称为jannchie，可视化效果如下4.3BarChart、LineChart、PieChartBarChart、LineChart、PieChart分别代表条形图、曲线图、饼图；除了这三种图形之外，anichart还包括ItemChart、BaseChart、MapChart等，而anichart需要添加两个参数，shape和aniTime，前者代表图形的大小，后者代表图形的时长，单位是s4.4stage.addChild(xx)anichart通过stage.addChild()函数使创建的对象生效，stage代表全局画布，通过下面的命令生成constani=require('anichart')conststage=newani.Stage()5.源码数据获取为了方便，本文涉及的源码和测试数据我都打包在一起了，获取方式：在公众号小张的Python后台，回复关键词：210605即可搞定6.总结除了这两种制作动态排序图表的方法外，我还要推荐一个叫flourish的网站，网址：https://flourish.studio/examples/flourish的最终生成效果也很好，但缺点ge是需要微调大量的参数。排序图的制作就介绍到这里。如果内容对您有帮助，不妨点个赞快来鼓励我~
