整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
vg在線編輯器 https://editor.method.ac/
使用的是polygon標簽
該標簽能創建含有不少于三個邊的圖形。
如下
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <polygon points="0,10 5,2 5,7 10,0"/> </svg>
效果如下
其坐標為路徑
poliline 為曲線
同樣輸入的為坐標
此時為了和上一個區分，將file設置為不填充，設置描邊為black
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <polyline points="0,10 5,2 5,7 10,0" fill="none" stroke="black"/> </svg>
效果如下
其中 填充為非零繞數原則
path類似于筆的路徑
其擁有一個屬性d，該屬性d由下方的單詞的首字母組成。
Moveto
畫筆的起點
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M10,100"/> </svg>
Lineto
該執行從畫筆的起點到位置繪制一條直線
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M0 0 L0 20 L40 0 "/> </svg>
Curveto
繪制貝塞爾曲線，由三個參數組成，考慮兩個控制點
直接選擇畫板手繪吧，實在看不懂了，貌似缺少了橢圓的一些數學知識
總結
繪制一顆心，以下是在網上找的
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M1,3 A2,2 0,0,1 5,3 A2,2 0,0,1 9,3 Q9,6 5,9 Q1,6 1,3 Z "/> </svg>
沒看懂。。。
text元素
依舊當做圖片處理
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <text x="0" y="20" fill="red">Hello world</text> </svg>
此為屬性，定義任何類型的線條
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <text x="0" y="20" stroke="black">Hello world</text> </svg>
對圖片模糊
先引入圖片
<image x="0" y="0" width="100%" height="300px" xlink:/>
此時圖片顯示
接著定義可復用的組即defs
defs 標簽為可復用的組標簽
使用的是file用于存放濾鏡的地方
使用file標簽
使用feGaussianBlur濾鏡即模糊濾鏡
使用的in的參數為SourceGraphic表示圖形作為原始的輸入
此外還有背景圖，通道等
stdDeviation 表示模糊的程度
完整的如下
<defs> <filter id="f1" x="0" y="0"> <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> </filter> </defs>
接著再次使用濾鏡
<image filter="url(#f1)" x="0" y="0" width="100%" height="100px" xlink:/>
一個模糊
效果不錯
此外還有陰影漸變，等濾鏡，等就太復雜了，設計到矩陣變換等高等數學的內容，自己有心無力。
使用adobe ai 生成svg文件
創建一個畫板
選擇字符
添加字體
轉曲
獲取svg代碼
畫出圖像
代碼如下
<!DOCTYPE html> <html> <head> <title>svg頁面</title> </head> <body> <p>這是一個svg</p> <!-- svg 圖形的命名空間 --> <svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1366 768" style="enable-background:new 0 0 1366 768;" xml:space="preserve"> <g> <path d="M722.2,346.5c17.1,128.1-27.4,231.2-133.3,309.2c-36.1,26.6-79.1,43.8-123.5,49.7c-109.2,14.4-200.7-14.2-274.5-85.9 c-62.1-60.1-93.1-133.1-93.1-218.8c0-103.3,45-188.2,135.1-254.6c36.1-26.6,78.9-44.2,123.3-50.2 c128.7-17.4,232.7,23.8,312.1,123.6C697.2,255.9,716,300.4,722.2,346.5z M709.2,403.7c1.8-83.1-27.7-154-88.5-212.8 c-58.6-56.5-128-84.7-208.1-84.7l-32.3,66.3l35.2,7.1l27.5-27.5l48.5,3.2l9.7,25.9L472,210.3v17.5l18.1,3.6l8.4-13.6l32-20l-1,13.6 l12,20.7l-14.2,14.9l9,8.7l-21.3,1.3l8.7,17.5l-46.2,22l7.1,26.2h-14.5l-6.5-25.9l-33.9-0.6l-6.1,10l-13.9-6.5L387,322.1l18.1,21.7 l-0.6,23.9l19.1,14.2l111.2,12.6l35.2,24.9l-4.2,61.7l-76.6,76.6c-5,5-9.8,18.7-14.5,41.4c-4.5,21.3-6.1,36.5-4.8,45.6l-11.6,13.3 c-9-17.9-20.8-45.4-35.2-82.4c-3.4-12.7-6.5-28.9-9-48.5c-1.9-16.2-3.9-32.4-5.8-48.8l-48.5-42.7l43-50.7l-17.8-25.5 c-27.4-5.6-45.1-10.6-53.3-15c-8.2-4.4-22.3-16.8-42.3-37l16.8,32.6l-11.3,4.8l-26.2-49.1l5.2-45.9l-8.1-32.3l-25.2-24.6l-18.4-4.5 l-16.2,11.3l-17.8,4.5c-49.6,57.3-74.1,123.3-73.4,197.9c0.8,76.3,32.7,151,87.1,204.4c58.1,57,128.4,85.4,210.9,85.4 c81.9,0,151.8-28.7,209.6-86C675.7,552.8,707.5,479.1,709.2,403.7z"/> </g> </svg> </body> </html>
到此，可以發揮ai的想象啦。包括繪制圖形，使用濾鏡，畫圖圖標等等，哪怕使用圖片導入ai，繪制出矢量圖。完美的ai和html的一次結合
http://svgjs.com/ 使用該svg.js框架可以快速的操縱svg
svg-sprite-loader 是用于創建SVG精靈圖的插件，通過該插件可以將導入的SVG文件自動生成為symbol標簽并插入進html中
yarn add svg-sprite-loader -D
在 vue.config.js 中添加插件
const path=require("path")
module.exports={
chainWebpack(config) {
// 清除 svg loader
config.module.rule("svg").uses.clear();
// 添加 svg loader
config.module
// 排除 svg loader 對 node_modules 的操作
.rule("svg-sprite-loader")
.test(/.svg$/)
.exclude.add(/node_modules/)
.end()
// 添加 svg loader 對 icons/svg 下的 svg 圖標進行操作
.test(/\.svg$/)
.include.add(path.resolve(__dirname, './src/icons/svg'))
.end()
.use("svg-sprite-loader")
.loader("svg-sprite-loader")
// 定義規則 <svg class="icon-svg"> <use xlink:href="#icon-name"></use></svg>
.options({
symbolId: "icon-[name]"
});
}
}創建文件目錄和文件
src/icons
src/icons/index.js svg 文件操作
/src/icon/svg svg 文件存放
/**
* 加載 svg
*/
function loadSvg() {
const requireAll=(requireContext)=> requireContext.keys().map(requireContext);
const req=require.context("@/icons/svg/", false, /\.svg$/);
requireAll(req);
}<template>
<svg class="icon-svg" aria-hidden="true">
<use :xlink:href="iconName"></use>
</svg>
</template>
<script>
export default {
name: "icon-svg",
inheritAttrs: true,
props: {
name: {
type: String
},
},
computed: {
iconName() {
return `#icon-${this.name}`;
},
},
};
</script>
<style>
.icon-svg {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>// 基本使用
<icon-svg name="setting" />
// 通過 style 控制大小和顏色
<icon-svg name="setting" style="fontSize:18px;color:#1abc9c;"/>
// 通過 class 控制大小和顏色
<icon-svg name="setting" class="setting"/>如果修改顏色無效的話，打開文件將里面的 fill 刪除。
作背景
首先，數據分析在當前的信息時代中扮演著重要的角色。隨著數據量的增加和復雜性的提高，人們對于數據分析的需求也越來越高。
其次，筆者也確確實實曾經接到過一個這樣的開發需求，甲方是一個醫療方面的科研團隊，有相當大的一些關于癌癥治療方面的醫療數據，通過這些數據可以分析出很多東西，最重要的是將數據通過一些科學計算后轉換為可視化的數據圖，并且要根據用戶的檢索數據實時分析展示，并且可保存為pdf或svg格式的源文件，可提供后期印刷一類的二次修改使用；最終就選擇了Django和Matplotlib這兩個強大的庫來實現數據分析的顯示和下載功能。
本文將只會淺顯的探討如何使用Django和Matplotlib，并不會對數據分析方面的知識做過多的介紹！
環境搭建
這里我假設你已經會使用django，并且已經使用django搭建起了一個可運行的demo app。
Matplotlib的安裝使用和其他的Python第三方包一致，只需要通過pip命令即可快速安裝！
pip install matplotlib代碼示例
1、假如我們擁有一個如下代碼所示的django 類視圖
# demo/views.py
from django.shortcuts import render
from django.views.generic import View
class HomeView(View):
"""
HomeView類是一個繼承自View的視圖類，用于處理與主頁相關的請求。
Attributes:
template_name (str): 展示主頁所使用的模板名稱。
"""
template_name="demo/home.html"
def get(self, request, *args, **kwargs):
return render(request, self.template_name)2、url如下所示
# 項目mysite的根urls.py
from django.urls import path
from. import views
urlpatterns=[
path('', views.HomeView.as_view(), name='index'),
]3、demo/templates/demo目錄下home.html代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>這只是一個空白的html頁面，最后用來顯示分析圖！
那么，根據以上代碼，我們可以通過django的runserver命令運行項目后看到該頁面！
Matplotlib使用
1、在demo/views.py當中引入如下包
import base64
from io import BytesIO
from matplotlib.figure import Figure
from django.http import FileResponse代碼解釋：
import base64 是我們導入了Python的base64模塊，該模塊提供了對 Base64 編碼格式的支持。Base64 是一種用于編碼二進制數據的方式，它將每3個字節的數據編碼為4個字符，因此會將數據的大小增加約33%。這種編碼格式常用于在文本中進行二進制數據的表示，尤其是在需要將二進制數據通過電子郵件等文本通道進行傳輸的情況下。通過導入 base64 模塊，我們可以使用該模塊提供的函數和類來進行 Base64 編碼和解碼操作。
from io import BytesIO 這一行代碼是在 Python 中導入 BytesIO 類。BytesIO 類是 Python 標準庫 io 模塊中的一個類，用于在內存中處理二進制數據流。
BytesIO 類實現了一個緩沖區，這個緩沖區可以像文件一樣進行讀寫操作，但實際上是在內存中進行的。因此，它可以在內存中處理和操作二進制數據，而不需要將數據寫入磁盤。
通過使用 BytesIO 類，我們可以將二進制數據存儲在內存中，并像處理文件一樣對其進行讀取、寫入和其他操作。這對于處理大量數據或在內存中執行文件操作更加高效和靈活。
from matplotlib.figure import Figure 是導入matplotlib 庫中的 Figure 類，Figure 類是 matplotlib 庫中的一個核心類，用于創建一個圖形窗口（figure window）。這個窗口可以包含各種圖形元素，如坐標軸（axes）、曲線（lines）、文本（text）等。
通過導入 Figure 類，我們可以創建一個空的圖形窗口，并在其中添加各種圖形元素。這對于自定義圖形的外觀和布局非常有用。
from django.http import FileResponse是導入django為我們提供的一個響應對象，關于其作用django的官網對其有詳細說明，如下所示：
2、實現在頁面中顯示分析圖的需求
首先，我們在HomeView類中新增一個get_fig的方法，讓其生成一個分析圖對象：
class HomeView(View):
...
def get_fig(self):
"""
獲取一個圖形和軸對象
返回:
fig (matplotlib.figure.Figure): 圖形對象
ax (matplotlib.axes.Axes): 軸對象
"""
fig=Figure(figsize=(5, 5)) # 創建一個大小為 5x5 的圖形對象
ax=fig.subplots() # 在圖形對象上創建一個子圖對象
ax.plot([1, 2, 3, 4]) # 在軸對象上繪制一條線
# 標題
fig.suptitle("Hello world") # 設置圖形的標題
# 坐標軸
ax.set_ylabel("Y zhou", fontdict={"size": 16, "color": "red", "weight": "bold", "family": "serif"}) # 設置軸對象的 y 軸標簽
ax.set_xlabel("X zhou") # 設置軸對象的 x 軸標簽
return fig, ax # 返回圖形對象和軸對象有了該圖形對象之后，我們就可以用base64包將該圖形對象在內存中轉換為png格式的字節流，為此我們再在該視圖類下新增一個img_base64_to_file的方法，讓它接收一個圖形對象fig作為參數！
class HomeView(View):
...
def img_base64_to_file(self, fig):
"""
將圖像保存為base64編碼的文件
參數：
fig：要保存的圖像對象
返回值：
img：包含base64編碼圖像的HTML標簽
"""
buf=BytesIO() # 創建字節流用于保存圖像
fig.savefig(buf, format="png") # 將圖像保存為png格式的字節流
data=base64.b64encode(buf.getbuffer()).decode("ascii") # 將字節流轉換為base64編碼的字符串
img=f"<img src='data:image/png;base64,{data}'/>" # 構建包含base64編碼圖像的HTML標簽
return img # 返回HTML標簽做完以上兩步之后，其實只需要將img_base64_to_file方法的返回值傳遞到get請求的上下文當中，在django的模版中通過模版過濾器safe渲染即可！其他動態篩選邏輯以及其他操作即可通過django的相關功能去實現！代碼如下：
class HomeView(View):
...
def get(self, request, *args, **kwargs):
fig, ax=self.get_fig()
img=self.img_base64_to_file(fig)
return render(request, self.template_name, {"img": img})靜態html模版中如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{{ img|safe }}
</body>
</html>最終渲染圖
3、實現將分析圖保存為pdf或svg格式
要實現該需求其實也非常簡單，只需要在該視圖類中新增一個post的請求，使用django的FileResponse將數據流保存到本地即可，其中需要關注的只是fig圖形對象中的savefig方法的format參數的變化，也就是保存文件的格式，這個函數本身就是支持導出pdf和svg格式的！代碼如下：
class HomeView(View):
...
def download_response(self, fig, filename:str):
"""
將給定的圖形對象 fig 保存為 pdf 格式的文件并下載。
參數：
self (object): 類實例對象
fig (matplotlib.figure.Figure): 繪制好的圖形對象
filename (str): 保存的文件名，包含擴展名
返回值：
FileResponse: 用于文件下載的響應對象
"""
buf=BytesIO()
fig.savefig(buf, format="pdf")
buf.seek(0)
return FileResponse(
buf,
as_attachment=True,
filename=f"{filename}.pdf"
)
def post(self, request, *args, **kwargs):
fig,ax=self.get_fig()
return self.download_response(fig, "demo")在html模版中通過post的表單請求即可下載，代碼如下：
<body>
{{ img|safe }}
<form action="" method="post">
{% csrf_token %}
submit: <input type="submit" value="下載">
</form>
</body>最終，通過點擊下載按鈕，發起一個post請求就實現了下載到本地的功能，當然你想動態控制下載格式的話，還可以通過django的表單系統開放給用戶，讓用戶自由選擇所需要的下載格式，需要注意的是format參數要和文件后綴格式保持一致！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
