成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

如何繪制好看的動態排序圖，今天手把手教學

作者：zeroingi
開發 項目管理
學了 Java之后才知道自己是有多菜，，，以前并沒有刻意的去了解語言背后的基礎知識，例如進程、內存管理，比如程序啟動后沒報錯但長時間沒有反應、通過任務管理器發現資源一直在消耗著;是一直等著或者重新再啟動程序，還是去定位問題并解決、優化代碼，如果要定位問題從哪里下手?

[[403827]]

本文轉載自微信公眾號「小張Python」，作者zeroingi 。轉載本文請聯系小張Python公眾號。

 0. 前言

大家好啊，已經好久沒更原創文了，失蹤人口回歸 ~，近期要準備秋招了在學一些 Java 相關知識，更文什么的也就耽擱了

之前一直是在與 Python 打交道，但這不馬上要找工作了么，Python 雖然全能但目前不是企業所需的主流語言，跟C++、Java 相比還挺弱勢的，因此想借此好好學一下 Java，希望能趕上秋招的末班車

學了 Java之后才知道自己是有多菜，，，以前并沒有刻意的去了解語言背后的基礎知識，例如進程、內存管理，比如程序啟動后沒報錯但長時間沒有反應、通過任務管理器發現資源一直在消耗著;是一直等著或者重新再啟動程序，還是去定位問題并解決、優化代碼，如果要定位問題從哪里下手?

網絡TCP/IP 協議：猜測現在看這篇文章的很多小伙伴們是為了學爬蟲而學 Python，現在也有兩個問題問大家：1，Response Headers 中常見的Cookie 、Session指的是什么， 針對反爬機制帶 Cookie去訪問服務器的原理又是什么?2，當請求目標站點獲取數據時，返回的狀態碼中2xx，3xx，4xx分別代表什么?以上列舉的這兩個問題都與計算機網絡相關，了解它們之后做爬蟲的話才更能游刃有余，而類似于正則、bs4文本解析只是工具而已，學習的話上手很快

垃圾回收、緩存一致性等相關知識：有時候為了縮短任務執行周期，會用到線程，使用時 Python 中的 GIL(全局解釋器鎖)能夠保證程序運行時的數據一致性問題，但里面的原理機制是什么?

后來接觸了這些知識才發現，操作系統、語言特性、計算機網絡、數據結構與算法這些基礎知識才是計算機入門的開始(語言只能說是一種工具)，只有掌握了基礎知識，以后的學習之路才會更扎實、更順利;也就應證了一句老話 基礎不牢、地動山搖

平常的我只知道為了一些功能學習一下相關庫函數，把腳本實現出來即可俗稱 調包俠 吧。也希望大家在以后的學習路上引以為戒，重視基礎知識。

1. anichart 介紹

啰嗦了這么多，正式開始本期技術案例分享，關于動態排序圖制作之前分享過一篇文章，用的是 matplolib 的 animation 函數，感興趣的可以看下用python制作超燃動態排序圖!

基本功能是實現了，但最終效果并不那么友好，這種方法制圖的基本原理就是先把數據借助 Matplotlib 可視化為每一幀圖片，再將每一幀拼接為視頻，缺點很明顯：步驟繁瑣、代碼量多，可視化效果差

今天分享另外一種方法，制作此類狀態圖，用到的是一個 Github 項目 anichart，眾所周知目前如果想做一些絲滑流暢的可視化交互效果，javascripts 是必不可缺少的，而這個項目主要是用 typescript 實現，項目是由一個 B 站 Up主【Jannchie見齊】維護

typescript 語言是基于 js 開發的一門編程語言，為了彌補后者可維護性差、類型混亂等缺點;anichart 的主要功能是來制作動態排序圖，可視化效果要好得多，下面是我根據針對項目中提供的測試數據最終繪制的排序圖，

2. 環境介紹

先交代下本次用到的項目環境，anichart 整體算是一個前端項目，因此本次用到的工具都是一些與前端相關的，本期教程只是介紹給大家這個項目怎么用，關于具體細節不需要去考慮，所以無需擔心自己是否具備前端知識;

需要用到的軟件如下：

  • node.js;
  • ffmpeg;

測試系統為 Win10;

Node.js 在這里主要有兩個作用：1，管理下載項目所需要的一些依賴項，2，啟動 js 腳本;

ffmpeg 主要是將序列圖片轉化為視頻

關于 node.js 與 ffmpeg 在 windows下載安裝方式比較簡單，這里不多做介紹啦，這里給大家推薦兩個鏈接可以參考下：

Node.js 安裝：https://www.jianshu.com/p/2958fc051bfb

ffmpeg 安裝：https://zhuanlan.zhihu.com/p/118362010

兩個軟件安裝好之后，不要忘記配置環境變量~

3. anichart 庫使用

3.1 anichart安裝

anichart 作者已經把上傳至 npm 官網中，打開命令行，借助 npm i anichart 命令即可安裝，不需要我們再從 Github 上克隆，

npm是什么東東?npm其實是Node.js的包管理工具(package manager)，也就是說你配置好 Node.js 命令之后，npm 就可以正常使用了

3.2 新建一個 js文件

安裝完之后，接下來就能使用了，在anichart 安裝路徑下 新建一個 js 文件，文件名可任意命名，然后把下面代碼添加到剛剛建立的 js 文件

  1. const ani = require('anichart') 
  2. const stage = new ani.Stage() 
  3. stage.options.fps = 24 
  4. stage.options.sec = 30 
  5. stage.output = false 
  6.  
  7. const bgAni = new ani.RectAni() 
  8. bgAni.component.shape = { 
  9.   width: stage.canvas.width, 
  10.   height: stage.canvas.height, 
  11. } 
  12. bgAni.component.fillStyle = '#1e1e1e' 
  13.  
  14. const textLinesAni = new ani.TextLinesAni() 
  15.  
  16. textLinesAni.component.fillStyle = '#eee' 
  17. textLinesAni.component.textAlign = 'center' 
  18. textLinesAni.component.textBaseline = 'middle' 
  19. textLinesAni.component.position = { 
  20.   x: stage.canvas.width / 2, 
  21.   y: stage.canvas.height / 2, 
  22. } 
  23.  
  24. const textAnichart = new ani.TextAni() 
  25. textAnichart.component.fontSize = 48 
  26. textAnichart.component.font = 'Sarasa Mono Slab SC' 
  27. textAnichart.component.text = 'Anichart' 
  28. textAnichart.component.fontWeight = 'bolder' 
  29. textAnichart.type = 'blur' 
  30.  
  31.  
  32. textLinesAni.children.push(textAnichart) 
  33.  
  34.  
  35. ani.recourse.loadImage('H:/Data/data/ANI.png', 'logo') 
  36. ani.recourse.loadImage( 
  37.   'https://avatars3.githubusercontent.com/u/29743310?s=460&u=8e0d49b98c35738afadc04e70c7f3918d6ad8cdb&v=4', 
  38.   'jannchie' 
  39. ) 
  40.  
  41. ani.recourse.loadCSV('H:/Data/data/test.csv', 'data') 
  42.  
  43.  
  44. const rectAni = ani.createAni( 
  45.   [ 
  46.     new ani.Rect({ 
  47.       position: { x: 100, y: 0 }, 
  48.       shape: { width: 100, height: 0 }, 
  49.       fillStyle: '#d23', 
  50.     }), 
  51.     new ani.Rect({ 
  52.       shape: { width: 100, height: 200 }, 
  53.       fillStyle: '#2a3', 
  54.       alpha: 1, 
  55.     }), 
  56.     new ani.Rect({ 
  57.       shape: { width: 100, height: 0 }, 
  58.       fillStyle: '#569', 
  59.       alpha: 0, 
  60.     }), 
  61.   ], 
  62.   [0, 1, 2], 
  63.   ani.ease.easeElastic 
  64. ) 
  65.  
  66. const logoCenter = new ani.Image({ 
  67.   path: 'H:/Data/data/ANI.png', 
  68.   position: { 
  69.     x: stage.canvas.width / 2, 
  70.     y: stage.canvas.height / 2, 
  71.   }, 
  72.   alpha: 0.25, 
  73.   center: { x: 128, y: 128 }, 
  74.   shape: { width: 256, height: 256 }, 
  75. }) 
  76. const logoAni = ani.createAni( 
  77.   [ 
  78.     new ani.Image({ 
  79.       path: 'H:/Data/data/ANI.png', 
  80.       position: { 
  81.         x: 0, 
  82.         y: stage.canvas.height - 108, 
  83.       }, 
  84.       shape: { width: 128, height: 128 }, 
  85.     }), 
  86.     new ani.Image({ 
  87.       path: 'H:/Data/data/ANI.png', 
  88.       position: { 
  89.         x: stage.canvas.width - 128, 
  90.         y: stage.canvas.height - 108, 
  91.       }, 
  92.       shape: { width: 128, height: 128 }, 
  93.       alpha: 1.0, 
  94.     }), 
  95.     new ani.Image({ 
  96.       path: 'H:/Data/data/ANI.png', 
  97.       position: { 
  98.         x: stage.canvas.width - 128, 
  99.         y: stage.canvas.height - 108, 
  100.       }, 
  101.       shape: { width: 128, height: 128 }, 
  102.       alpha: 0, 
  103.     }), 
  104.   ], 
  105.   [0, 1, 2], 
  106.   ani.ease.easeBounce 
  107. ) 
  108.  
  109. const barChart = new ani.BarChart({ 
  110.   shape: { width: stage.canvas.width, height: stage.canvas.height }, 
  111.   labelFormat(id) { 
  112.     return id 
  113.     // return meta.get(id).name; 
  114.   }, 
  115.   aniTime: [0, 30], 
  116. }) 
  117.  
  118. const lineChart = new ani.LineChart({ 
  119.   aniTime: [0, 30], 
  120.   shape: { width: stage.canvas.width, height: stage.canvas.height / 2 }, 
  121.   position: { x: 0, y: stage.canvas.height / 2 }, 
  122. }) 
  123.  
  124.  
  125. stage.addChild(bgAni) 
  126. // stage.addChild(a) 
  127. stage.addChild(logoCenter) 
  128. stage.addChild(textLinesAni) 
  129. stage.addChild(rectAni) 
  130. stage.addChild(logoAni) 
  131. stage.addChild(barChart) 
  132. stage.addChild(lineChart) 
  133.  
  134.  
  135. const pie = new ani.PieChart({ 
  136.   aniTime: [0, 30], 
  137.   radius: [80, 120], 
  138.   position: { x: stage.canvas.width / 2, y: stage.canvas.height / 2 }, 
  139. }) 
  140.  
  141. stage.addChild(pie) 
  142. stage.play() 

運行之前，需要改幾個參數，第一個更改數據路徑

  1. ani.recourse.loadCSV('H:/Data/data/test.csv', 'data') 

數據形式需以下面形式存放，后面 data 代表數據源中更改的列名，比如這里是以日期作為變量進行序列化

  1. name,date,value,channel,other 
  2. Jannchie,2020-01-01,1,科技,other 
  3. Jannchie,2020-01-03,6,科技,other 
  4. Jannchie,2020-01-05,3,科技,other 
  5. Jannchie,2020-01-07,-,科技,other 
  6. Jannchie,2020-01-09,7,科技,other 
  7. Jannchie,2020-01-12,12,科技,other 
  8. Cake47,2020-01-03,10,生活,other 
  9. Cake47,2020-01-02,5,生活,other 
  10. Cake47,2020-01-06,2,生活,other 
  11. Cake47,2020-01-09,3,生活,other 
  12. Cake47,2020-01-11,4,生活,other 

第二個需要更改一下所有 png 路徑，改成你自己的，可以隨意替換為你的 圖片路徑，影響不大

  1. ani.recourse.loadImage('H:/Data/data/ANI.png', 'logo') 

3.2 運行 js 腳本

以上修改完之后，接下來就是啟動腳本，在 js 同文件目錄下打開一個命令行，輸入 node XXX.js ，回車即可，XXX.js 代表你的 js 文件，效果如下

之后會有一個out 文件夾生成，里面存放的就是 anichart 繪制好的圖片

3.3 借助ffmpeg圖片生成視頻

最后，進入out 文件夾，借助ffmpeg 命令將圖片合成視頻，

  1. ffmpeg -f image2 -framerate 12 -i output-%d.png foo.avi 

-framerate 后面參數 12 代表生成視頻的fps，可 根據自己情況設定，這里我設置的是 24;

最終一個動態排序視頻就生成了，隨后自己也可以加一些 bgm 給視頻加一些 feel

4. js中一些參數介紹

關于 anichart 的使用，原作者并沒有介紹太多，Github 主頁上只介紹了最簡單的使用方法

因此為了大家生成一些比較不錯的可視化圖，對上面 js 代碼中的部分參數做一些簡單介紹，增加一些對這個 anichart 庫的理解

4.1 fps、sec

  1. stage.options.fps = 24 
  2.  
  3. stage.options.sec = 30 

fps 顧名思義就是一秒多少幀，sec 代表生成切片持續多長時間(單位：秒);用上面參數來設定的話，會生成 24x30 = 720 張圖片;這兩個參數決定最終視頻的流暢度，后面用 ffmpeg 生成視頻時，建議 framerate 參數 fps保持 一致

4.2 ani.recourse.loadImage

  1. ani.recourse.loadImage( 
  2.   'https://avatars3.githubusercontent.com/u/29743310?s=460&u=8e0d49b98c35738afadc04e70c7f3918d6ad8cdb&v=4', 
  3.   'jannchie' 
  4. ) 

loadImage用來給柱狀圖中每個數據條上加一個 圖片 logo，方法需要加入兩個參數，前者表示圖片路徑或網頁鏈接，后者表示需要加logo 的數據條名字，例如這里選擇的數據條名字為 jannchie，可視化效果如下

4.3 BarChart、LineChart、PieChart

BarChart、LineChart、PieChart 分別表示柱狀圖、曲線圖、餅圖;anichart 除了這三類圖形外還有 ItemChart、BaseChart、MapChart 等，

anichart 在所有圖形對象中，都需要加入兩個參數，shape 和 aniTime，前者代表形狀大小、后者表示該圖形持續時間，單位 s

4.4 stage.addChild(xx)

anichart 通過 stage.addChild() 函數使得創建的對象生效 ，stage 表示全局 畫布，通過以下命令生成

  1. const ani = require('anichart') 
  2.  
  3. const stage = new ani.Stage() 

5. 源碼數據獲取

為了方便，本文中涉及到的源碼、測試數據已經被我打包在一起了，獲取方式：在公眾號 小張Python 后臺，回復關鍵字：210605 即可獲取

6. 小結

關于動態排序圖制作除了這兩種方法之外，再向大家推薦一個網站名叫 flourish，網址：https://flourish.studio/examples/

flourish 最終生成效果也非常不錯，但缺點是需要微調大量參數

好了，關于排序圖的制作就介紹到這里了，如果內容對你有幫助的話不妨點個贊來鼓勵一下我~

 

責任編輯：武曉燕 來源： 小張Python
動態排序圖可視化
相關推薦

2022-07-27 08:16:22

搜索引擎Lucene

2022-12-07 08:42:35

2021-12-06 18:22:15

數據項目技術

2011-01-10 14:41:26

2025-05-07 00:31:30

2011-05-03 15:59:00

黑盒打印機

2021-07-14 09:00:00

JavaFX開發應用

2021-01-27 21:55:13

代碼參數值ECharts

2011-04-28 09:23:36

REST

2021-11-09 06:55:03

水印圖像開發

2010-07-06 09:43:57

搭建私有云

2010-07-06 09:38:51

搭建私有云

2022-06-06 08:50:40

CIOIT轉型

2014-08-08 13:22:54

測試手機站點移動設備

2021-01-19 09:06:21

MysqlDjango數據庫

2022-02-16 16:24:05

HarmonyOS鴻蒙操作系統

2009-08-27 18:10:58

PHP繪制3D圖形

2022-05-10 10:43:35

數據源動態切換Spring

2021-09-26 16:08:23

CC++clang_forma

2021-01-21 09:10:29

ECharts柱狀圖大數據
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板： 国产一区二 | 日韩欧美三级在线 | 欧美日韩亚洲在线 | 日韩欧美电影在线 | 免费亚洲一区二区 | 日韩成人免费视频 | www.蜜桃av | 中文字幕日韩欧美 | 日韩一二区 | 久久精品成人热国产成 | 国产精品久久久久久久久久不蜜臀 | 亚洲欧美在线一区 | 999久久久免费精品国产 | 国产精品日韩 | 羞羞免费网站 | 国产98色在线| 国产高清性xxxxxxxx | 在线看无码的免费网站 | 中文字幕在线三区 | 一级黄a视频 | 欧美久久电影 | 一区二区三区视频在线观看 | 日韩欧美在线视频 | 国产韩国精品一区二区三区 | 久久综合激情 | 久久免费精品 | 国产精品久久久久久久久久久免费看 | 亚洲美女天堂网 | 中文字幕一区二区三区精彩视频 | h在线免费观看 | 色毛片 | 国产一区二区三区在线免费观看 | 精品成人佐山爱一区二区 | 日韩成人高清在线 | 久久中文字幕视频 | 久久成人国产 | 视频在线一区二区 | 国产成人精品免费视频大全最热 | 91porn成人精品 | 欧美日韩在线综合 | av国产精品|