計算機輔助資料繪圖（matlab\python\js）

litecdows發表於2022-02-13
計算機繪圖MatlabPythonJS

1. matlab繪圖

官方說明：https://ww2.mathworks.cn/help/matlab/creating_plots/types-of-matlab-plots.html

基本圖形繪製

hold on
x=linspace(0, 2*pi, 100);  
y=sin(x); z=cos(x);  %基本函式
plot(x,y,'-',x,z);  %基本繪圖
legend('sin(x)','cos(x)');  %註解
title('test');  %標題
xlabel('x'); ylabel('y or z');  %座標標註
str='$$ \sin x $$';  
text(1.19,0.42,str,'Interpreter','latex','FontSize',18);  %圖表中加入latex公式
annotation('arrow','x',[0.35 0.4],'y',[0.71 0.78]);  %建立註釋
    %annotation(lineType,x,y) 建立一個在當前圖窗中的兩個點之間延伸的線條或箭頭註釋。
    %將 lineType 指定為 'line'、'arrow'、'doublearrow' 或 'textarrow'。
    %將 x 和 y 分別指定為 [x_begin x_end] 和 [y_begin y_end] 形式的二元素向量。
hold off

輸出結果為：

計算機輔助資料繪圖（matlab\python\js）
圖1. 基本圖形繪製

可以看到上面的圖形包含了最基本的繪圖，座標軸以及相應註解。注意，由於x為向量，所以在進行某些運算時需要在相應運算子前加上"."號，以進行數值計算。

基本命令：

  1. plot:我們主要使用plot(X,Y,LineSpec)的形式來設定線型、標記符號和顏色。有關LineSpec的詳細引數如下圖：
計算機輔助資料繪圖（matlab\python\js）
圖2. plot函式中LineSpec引數的說明

  1. legend:主要用於繪製圖例說明，及圖1右上角的方框。
  2. title、xlabel、ylabel:分別用於繪製標題、X座標標註、Y座標標準。
  3. text:插入LaTex公式，並固定位置。

多圖繪製和影像設定

  • 多圖在同一個figure上輸出：
x=linspace(0, 2*pi, 100); 
y=sin(x);
z=cos(x);
s=x+2;
t=x.^2;
subplot(2,2,1),plot(x,y);
subplot(2,2,2),plot(x,z);
subplot(2,2,3),plot(x,s);
subplot(2,2,4),plot(x,t);

輸出結果如下：

計算機輔助資料繪圖（matlab\python\js）
圖3. 多圖繪製樣例1

subplot的前兩個參數列示2x2的分佈，最後一個參數列示序號。然後再用逗號分隔，再加上plot命令即可完成相應序號的圖形繪製。

  • 多圖在不同figure上輸出及圖形的設定：
x=linspace(0, 2*pi, 100);  
y=sin(x); z=cos(x); 
figure('Position',[311 211 360 220]),plot(x,z);
figure, h=plot(x,y);
get(h);  %line property
get(gca);  %axes property
set(gca, 'XLim', [0 2*pi]);
set(gca, 'FontSize', 25);
set(gca,'XTick', 0:pi/2:2*pi);
set(gca,'XTickLabel', {'0','\pi/2','\pi','3\pi/2','2\pi'});
set(h, 'LineStyle', '-.', 'LineWidth', 7.0, 'color', 'g');

輸出結果為：

計算機輔助資料繪圖（matlab\python\js） 計算機輔助資料繪圖（matlab\python\js）
圖4. 多圖繪製樣例2

  • figure :使用預設屬性值建立一個新的圖窗視窗。生成的圖窗為當前圖窗。其中'Position'引數可以指定繪製圖形繪製區域的位置與大小。
  • v = get(h) :返回 h 標識的圖形物件的所有屬性和屬性值。v 是一個結構體，其欄位名稱為屬性名稱，其值為對應的屬性值。h 可以是單個物件或 m×n 物件陣列。如果 h 是單個物件且您不指定輸出引數，則 MATLAB® 會在螢幕上顯示該資訊。(可使用help命令檢視更多說明)。
  • set(H,Name,Value):為 H 標識的物件指定其 Name 屬性的值。使用時須用單引號將屬性名引起來，例如，set(H,'Color','red')。如果 H 是物件的向量，則 set 會為所有物件設定屬性。如果 H 為空（即 []），set 不執行任何操作，但不返回錯誤或警告。

影像設定:

  • 首先通過get函式獲取相關屬性，再使用set函式設定相關命令。（get並非程式設計必須的操作，即知道相關屬性可直接使用set設定）
  • gca:表示數軸的屬性，可用來設定x,y座標軸的長度與寬頻及座標標註。

三維圖形繪製

基本三維繪圖

%% 三維
[X,Y] = meshgrid(1:0.1:10,1:0.1:20);
Z = sin(X) + cos(Y);
s=surf(X,Y,Z)
colorbar

輸出影像為：

計算機輔助資料繪圖（matlab\python\js）
圖5. 三維繪圖樣例1

也可以加上s.EdgeColor = 'none';

計算機輔助資料繪圖（matlab\python\js）
圖6. 三維繪圖樣例2

2.python繪圖

官方文件：https://matplotlib.org/stable/gallery/index.html
菜鳥教程：https://www.runoob.com/w3cnote/matplotlib-tutorial.html

計算機輔助資料繪圖（matlab\python\js）
圖7. 計算機繪圖的組成

使用python繪圖時，通常會使用到numpy庫與matplotlib庫。關於matplotlib的詳細介紹在mtaplotlib的官網都有詳細介紹。

基本繪圖

import matplotlib.pyplot as plt
import numpy as np

x=np.linspace(1.0,4.0,20)
print(x)
y=x*x*x+x*x+1
plt.plot(x,y,color="blue", linewidth=2.5, linestyle="-")
plt.ylabel('some numbers')
plt.show()

輸出影像如下：

計算機輔助資料繪圖（matlab\python\js）
圖8. matplotlib基本繪圖

  • python中numpy中的linspace用法與matlab中的用法有所區別，x=np.linspace(1.0,4.0,20)表示在[1.0,4.0]區間均等分生成20個數值。
  • plot:是用來繪圖的主要命令，可以通過color等引數設定相關屬性。
  • show:用於展示最終生成的圖形。

多圖繪製與標註

import matplotlib.pyplot as plt
import numpy as np
import matplotlib.gridspec as gridspec

fig = plt.figure(tight_layout=True)
gs = gridspec.GridSpec(2, 2)

ax = fig.add_subplot(gs[0, :])
ax.plot(np.arange(0, 1e6, 1000))
ax.set_ylabel('YLabel0')
ax.set_xlabel('XLabel0')

for i in range(2):
    ax = fig.add_subplot(gs[1, i])
    ax.plot(np.arange(1., 0., -0.1) * 2000., np.arange(1., 0., -0.1))
    ax.set_ylabel('YLabel1 %d' % i)
    ax.set_xlabel('XLabel1 %d' % i)
    if i == 0:
        for tick in ax.get_xticklabels():
            tick.set_rotation(55)
fig.align_labels()  # same as fig.align_xlabels(); fig.align_ylabels()

plt.show()

影像輸出為：

計算機輔助資料繪圖（matlab\python\js）
圖9. matplotlib多圖繪製

  • tight_layout=True:程式碼中的第五行參數列示——作圖自動tight（緊湊）佈局。（參考）
  • GridSpec：指定要放置子批次的網格的幾何圖形。需要設定網格的行數和列數。或者，可以調整子批次佈局引數（例如，左、右等）。gs = gridspec.GridSpec(2, 2):表明生成2x2的子圖。可以參考這篇文章。
  • add_subplot(self, *args, **kwargs):向figure新增一個Axes作為一subplot佈局的一部分。可以參考這篇文章。

3.echarts繪圖

官方網址：https://echarts.apache.org/examples/zh/index.html
echarts為JavaScript的一個繪圖工具，是一個功能齊全的資料視覺化工具。

基本介紹

我們這裡使用一個較為簡單的示例：

image

官網為我們提供了線上編輯功能，所以對於基本的繪圖我們可以直接在官網編輯後輸出。
編輯後輸出的圖片：

計算機輔助資料繪圖（matlab\python\js）
圖10. echarts基本繪圖

當然對於使用json格式儲存引用的資料無法直接線上編輯，需要下載相應的庫。（博主對echarts使用較少，有相關建議或想法歡迎評論區指出）。

LiTecdows

相關文章