:量級懸殊數(shù)據(jù)可視化的一圖雙坐標解法)
做數(shù)據(jù)可視化做過幾年的人幾乎都撞上過同一個畫面一堆數(shù)據(jù)大部分集中在0到1之間個別幾個點直接沖上50甚至更高用matplotlib一畫小值部分全被壓成一條貼著橫軸的線條什么波動都看不出來。我第一次被這問題卡住是給某次運行監(jiān)測項目畫時間序列絕大多數(shù)采樣點都在0附近小幅震蕩偶發(fā)幾個尖峰跳到幾十。線性坐標下那段時間的細節(jié)完全糊成一片根本沒法向別人解釋雖然看起來是平的其實里面很有故事。當時第一反應(yīng)就是上對數(shù)軸但業(yè)務(wù)方明確說不接受log刻度他們想看到真實量級差。于是我去翻了matplotlib的資料發(fā)現(xiàn)官方文檔里有一張經(jīng)典的斷軸示例圖專門干這件事把坐標軸切掉中間的一段讓上下兩部分數(shù)據(jù)各自擁有合適的顯示范圍同時保持x軸連續(xù)。這就是今天要說的matplotlib斷軸實現(xiàn)。這篇文章不講空洞概念直接從原理到底層實現(xiàn)再到可變現(xiàn)的完整代碼和實戰(zhàn)中容易踩的坑希望給同樣被量級懸殊數(shù)據(jù)折磨的人一點參考。1. 什么時候必須用斷軸一條貼地線的自救現(xiàn)場1.1 線性坐標的天然局限你看到的不是數(shù)據(jù)是最大值的身影matplotlib默認的線性坐標軸做的事情非常簡單把所有數(shù)據(jù)點的最小值和最大值映射到坐標軸的前后兩端中間按照等差間隔畫刻度。問題就出在等差這兩個字上。假設(shè)繪圖區(qū)域的高度是500像素數(shù)據(jù)范圍是0到50那么0到1這個區(qū)間只占500的1/50也就是10像素勉強還能看出一點輪廓。但如果數(shù)據(jù)范圍是0到50000到1的區(qū)間就只能占到0.1像素比一個像素還細。這個時候所有的小值點都被壓縮在同一條水平線上嚴格來說它們確實畫出來了但肉眼根本無法分辨。這不是繪圖代碼的問題是線性映射的數(shù)學(xué)特性決定的它給每個數(shù)值分配相同的單位像素而不關(guān)心這個數(shù)值在你的業(yè)務(wù)場景里是否重要。當最大值和最小值的數(shù)量級差別超過兩個量級時小值區(qū)域的細節(jié)就不可避免地被大值吞噬。1.2 先試過的那些替代方案為什么最后都繞回斷軸遇到量級懸殊的數(shù)據(jù)大多數(shù)人會按順序嘗試下面幾種方案對數(shù)坐標log軸網(wǎng)上呼聲最高把指數(shù)級的增長變成線性。但log軸在業(yè)務(wù)匯報里經(jīng)常被挑戰(zhàn)因為非技術(shù)背景的觀眾對刻度之間差了10倍這件事沒有直覺更麻煩的是數(shù)據(jù)里一旦有0或負值log軸直接報錯或丟點需要額外平移和裁剪。截斷大值窗口只把坐標范圍定在0到1讓超出的部分跑到圖上沿外面。這個操作簡單但也把那些尖峰到底有多高這個核心問題抹掉了觀眾只會看到幾根線沖出畫布并不知道是50還是5000。雙Y軸或分組子圖適合兩類數(shù)據(jù)但這里只有一條曲線硬拆成兩組又破壞同一序列的連續(xù)性。歸一化處理后畫把數(shù)據(jù)變換到0到1區(qū)間再去畫圖問題是你得在坐標軸標注上做反向換算而且換算后的刻度間隔其實和log一樣扭曲了原始量的感受。繞了一圈你會發(fā)現(xiàn)真正想要的效果是全局信息保留局部細節(jié)放大兩者在同一張圖里共存。這就是斷軸的用武之地。它把坐標軸切成兩段各自使用不同范圍中間用一個斷裂標記告訴觀眾這段被我裁掉了不表示沒有數(shù)據(jù)只是我不想浪費繪圖空間顯示它。1.3 什么樣的數(shù)據(jù)適合斷軸三個先決條件不是所有貼地線都適合用斷軸。根據(jù)我踩坑的經(jīng)驗判斷標準可以歸納成三條數(shù)據(jù)呈現(xiàn)明顯的分段聚集。比如絕大多數(shù)點落在[a, b]少部分落在[c, d]且b遠小于c中間是空白區(qū)。斷軸的本質(zhì)是讓你跳過這段空白如果數(shù)據(jù)點在整個區(qū)間連續(xù)分布斷軸會把中間一大段有意義的信息隱藏掉。你確認真空區(qū)間確實是空白。這是最關(guān)鍵的一條。很多時間序列看似有一段時間沒有值實際上只是采樣稀疏或者被零值填充直接跳過會丟失這段時間發(fā)生了什么。受眾能看懂斷裂標記。學(xué)術(shù)論文、正式報告對斷軸容忍度低業(yè)務(wù)看板則相對寬容。你得先確認你的觀眾不會因為兩根斜線就產(chǎn)生誤解。滿足這三條斷軸才是合理的方案否則還是乖乖回log軸。2. 斷軸的底層原理兩個坐標系拼接成一個連續(xù)坐標軸2.1 matplotlib的坐標體系數(shù)據(jù)坐標、Axes坐標與Figure坐標很多人第一次接觸斷軸會覺得它是在同一個坐標軸上做點手腳把中間刻度藏起來。其實不是。matplotlib里根本沒有刪除坐標軸中間一段的原生API。斷軸實際做的事是創(chuàng)建兩個獨立的Axes對象把數(shù)據(jù)分別畫進去然后通過隱藏脊線、調(diào)整布局讓兩個Axes在視覺上看起來像一個連續(xù)坐標軸。理解這一點必須弄清楚matplotlib的三層坐標系統(tǒng)數(shù)據(jù)坐標transData每個Axes用自己的xlim/ylim把數(shù)據(jù)值映射到繪圖框內(nèi)的位置。不同Axes有不同映射。Axes坐標transAxes以每個Axes繪圖區(qū)為參照范圍是0到1不隨數(shù)據(jù)范圍變化。斷口的斜線標記就畫在這個坐標里。Figure坐標transFigure以整張圖頁面為參照范圍也是0到1用來定位不同Axes之間的相對位置。想象一下斷軸的過程你拍了一張非常長的卷軸照片中間一大段是空曠的馬路你要給別人展示兩頭的熱鬧場景。你不會直接把整張卷軸原樣塞進屏幕而是把卷軸從中間剪開把兩段有用的部分上下摞在一起中間留一道空隙再在切口處畫上鋸齒線表示此處剪斷。斷軸的圖就是這張剪開的卷軸。2.2 實現(xiàn)斷軸的三個核心步驟第一步創(chuàng)建兩個Axes。它們共享同一個數(shù)據(jù)序列但各自的xlim/ylim不同。第二步隱藏兩個Axes相鄰一側(cè)的脊線。比如上下斷軸時上面的Axes底部脊線和下面的Axes頂部脊線都要隱藏否則兩條黑線疊在一起等于告訴觀眾這是兩個獨立的圖。第三步調(diào)整兩個Axes的間距。間距不能太大太大會讓觀眾覺得這是兩幅圖太小的又割裂感太強。通常用subplots_adjust(hspace0.05)這種很小的值。還有一個容易被忽略的細節(jié)坐標刻度。斷裂側(cè)的刻度線要不要顯示顯示還是隱藏方向是朝內(nèi)還是朝外都會極大影響觀感。官方示例的做法是上面子圖的x軸刻度標簽完全隱藏x軸信息統(tǒng)一由下面子圖展示下面子圖的頂部刻度也一并抹掉避免斷裂處出現(xiàn)多余的視覺元素。2.3 坐標變換的拼接本質(zhì)兩個Axes能拼出一個連續(xù)的視覺坐標軸依賴的是人眼的格式塔認知——當兩個矩形區(qū)域上下對齊、邊線平直、數(shù)據(jù)線顏色連續(xù)時大腦會自動把它們理解為同一坐標系中被截斷的兩段。但這里有一個深層的坑兩個Axes的數(shù)據(jù)坐標映射是完全獨立的兩套比例尺。比如上面的Axes把[4, 6]映射到200像素高度下面的Axes把[0, 1]映射到200像素高度。同樣1個單位的數(shù)值變化在上面的Axes里占100像素在下面的Axes里只占50像素。體現(xiàn)在圖上就是斷裂處兩側(cè)的折線斜率斷崖式變化視覺上被扭曲了。這不是bug而是斷軸的固有性質(zhì)。你選擇斷軸就等于接受了局部區(qū)間被放大這件事。但如果你連兩個子圖的顯示尺寸都不做調(diào)整這個扭曲會變得更加不可控。這一點后面在橫向斷軸的width_ratios部分會再展開。3. 縱向斷軸手寫實現(xiàn)從數(shù)據(jù)掩碼到坐標軸拼接3.1 先準備一份量級懸殊的示例數(shù)據(jù)為了把過程講清楚我用一份模擬數(shù)據(jù)來做演示一條時間序列橫軸0到10縱軸絕大多數(shù)時刻在0到1之間小幅震蕩但200到260位置附近突然有一段值落在4到6之間。這正好符合斷軸的第一條判斷標準——數(shù)據(jù)明顯分兩堆中間是空白區(qū)。import numpy as np import matplotlib.pyplot as plt rng np.random.default_rng(42) x np.linspace(0, 10, 500) y 0.5 * np.sin(x * 1.2) 0.5 rng.normal(0, 0.08, sizex.size) # 人為制造一段高值區(qū)域 y[200:260] 5 0.5 * np.sin(x[200:260] * 5) rng.normal(0, 0.1, size60)注意我故意讓高值區(qū)域在5附近波動低值區(qū)域在0到1附近。這樣斷口可以設(shè)置在1到4之間中間確實沒有數(shù)據(jù)點非常適合用斷軸展示。3.2 創(chuàng)建兩個子圖并劃分顯示范圍縱向斷軸的核心是把一個縱坐標軸分成兩段。我用plt.subplots(2, 1)創(chuàng)建上下兩個子圖因為兩張圖要共享橫軸的時間信息我把sharexTrue打開。fig, (ax_top, ax_bottom) plt.subplots( 2, 1, figsize(7, 5), sharexTrue, gridspec_kw{height_ratios: [1, 1]} ) # 上子圖顯示高值區(qū) 4 ~ 6下子圖顯示低值區(qū) 0 ~ 1 ax_top.set_ylim(4, 6) ax_bottom.set_ylim(0, 1)height_ratios在這里控制兩個子圖的高度比例。理想狀態(tài)下應(yīng)該按照數(shù)據(jù)范圍的跨度來設(shè)置即上子圖負責(zé)[4,6]跨度2下子圖負責(zé)[0,1]跨度1所以height_ratios[2, 1]更接近真實比例。這里為了講解方便先用1:1后續(xù)可以自行調(diào)整。3.3 數(shù)據(jù)掩碼最容易忽略但非做不可的一步如果你現(xiàn)在直接把ax_top.plot(x, y)和ax_bottom.plot(x, y)都畫一遍會得到一個怪異的結(jié)果下面子圖里y值在5附近的線段會從坐標區(qū)底部直升到頂部再被裁掉形成一條穿過整個子圖的陰影線上面子圖里y值在0到1的線段同樣會從坐標區(qū)頂部沖下去。matplotlib對超出坐標范圍的線段默認做裁剪clip_onTrue但裁剪只能保證線不超出坐標區(qū)邊框無法阻止從可見區(qū)域內(nèi)的一點連到區(qū)域外的一點時在區(qū)域邊緣留下斜向入/出的痕跡。如果你不想讓這些幽靈線段出現(xiàn)必須手動掩碼。masked_top np.ma.masked_outside(y, 4, 6) masked_bottom np.ma.masked_outside(y, 0, 1) ax_top.plot(x, masked_top, color#1f77b4, lw1.6) ax_bottom.plot(x, masked_bottom, color#1f77b4, lw1.6)masked_outside會把范圍外的所有點標記為無效matplotlib繪制時會自動跳過這些點線段不會跨越掩碼區(qū)域。這是斷軸里最重要的一步很多人廢了半天勁拼圖最后發(fā)現(xiàn)連接處有怪線基本都是漏了掩碼。3.4 隱藏脊線與刻度標簽完成數(shù)據(jù)繪制后開始處理拼接。# 隱藏斷裂處的脊線 ax_top.spines[bottom].set_visible(False) ax_bottom.spines[top].set_visible(False) # 上子圖的底部刻度全部隱藏x軸刻度信息由下子圖統(tǒng)一展示 ax_top.tick_params(bottomFalse, labelbottomFalse) # 下子圖的頂部刻度也隱藏避免斷裂處出現(xiàn)多余刻度 ax_bottom.tick_params(topFalse) # 統(tǒng)一橫軸范圍 ax_top.set_xlim(x.min(), x.max()) ax_bottom.set_xlim(x.min(), x.max())sharexTrue其實已經(jīng)讓兩個子圖的x軸范圍一致了但手動set_xlim有助于代碼可讀性也方便后續(xù)調(diào)整。記著ax_top.tick_params(bottomFalse, labelbottomFalse)這行它同時隱藏了刻度線和刻度標簽。3.5 布局微調(diào)讓兩個子圖貼得足夠近兩個子圖默認間隙很大一眼看就是兩張圖。用subplots_adjust把垂直間距壓到最低fig.subplots_adjust(hspace0.04)hspace的單位是子圖平均高度的比例不是絕對像素。所以圖越扁實際間隙越小。我一般從0.02開始調(diào)感覺擠了就加感覺散了就減。這一步?jīng)]有標準答案取決于你的figure尺寸和斷軸比例。到這里一個基本的斷軸框架已經(jīng)成型。但還缺最關(guān)鍵的一環(huán)——斷口處的斜線標記。4. 橫向斷軸與通用函數(shù)封裝方向一換坑也換了4.1 橫向斷軸的完整代碼從縱向翻轉(zhuǎn)到橫向橫向斷軸適用于橫軸量級懸殊、縱軸共享的場景。典型例子是某段時間序列中前后兩段事件密集中間時空窗期很長或者橫軸的兩個區(qū)間跨度相差幾十倍。原理完全一致只是把上下?lián)Q成左右把sharex換成sharey。fig, (ax_left, ax_right) plt.subplots( 1, 2, figsize(8, 4), shareyTrue, gridspec_kw{width_ratios: [3, 1]} ) # 左子圖展示 x 在 0 ~ 3 的數(shù)據(jù)右子圖展示 x 在 9 ~ 11 的數(shù)據(jù) mask_left (x 0) (x 3) mask_right (x 9) (x 11) ax_left.set_xlim(0, 3) ax_right.set_xlim(9, 11) # 繪制 ax_left.plot(x[mask_left], y[mask_left], color#1f77b4, lw1.6) ax_right.plot(x[mask_right], y[mask_right], color#1f77b4, lw1.6) # 隱藏斷裂處脊線 ax_left.spines[right].set_visible(False) ax_right.spines[left].set_visible(False) # 隱藏斷裂側(cè)刻度 ax_left.tick_params(rightFalse) ax_right.tick_params(leftFalse, labelleftFalse) fig.subplots_adjust(wspace0.04)這個代碼和縱向斷軸幾乎一一對應(yīng)但換方向之后有兩個全新的坑第一width_ratios如果不按數(shù)據(jù)范圍的實際跨度設(shè)置視覺扭曲非常明顯。我上面給的示例是[3, 1]因為左邊跨度是30到3右邊跨度是29到11其實更準確的是[3, 2]。如果右子圖數(shù)據(jù)跨度只有0.5你卻給了它和左子圖一樣的寬度等于把右子圖的1個單位拉長了6倍折線斜率被嚴重拉伸。第二shareyTrue時左右子圖共享縱軸范圍整條曲線的縱向波動比例在兩張圖里是一致的所以橫向斷軸在斜率保真上比縱向斷軸更容易做好——只要width_ratios按橫軸跨度分配。4.2 數(shù)據(jù)范圍與繪圖比例的換算邏輯這里值得單獨說一下width_ratios和height_ratios到底該怎么設(shè)。原則非常簡單比例應(yīng)當?shù)扔趦蓚€子圖各自負責(zé)的數(shù)據(jù)范圍跨度之比。縱向斷軸上子圖顯示[4,6]跨度2下子圖顯示[0,1]跨度1那么height_ratios[2,1]。橫向斷軸左子圖顯示0到3跨度3右子圖顯示9到11跨度2那么width_ratios[3,2]。為什么要糾結(jié)這個比例因為斷軸已經(jīng)人為改變了數(shù)據(jù)到屏幕的映射如果子圖尺寸比例還不按數(shù)據(jù)跨度走那么曲線的形狀就被二次扭曲了。比如同樣拉伸了0.1的數(shù)值斷口兩邊本來應(yīng)該看起來是相同傾斜角度結(jié)果因為寬度比例失調(diào)一側(cè)陡一側(cè)緩觀眾會誤判數(shù)據(jù)變化的劇烈程度。當然現(xiàn)實項目里為了讓斷口部分更容易看清偶爾會故意放大某一側(cè)比如右側(cè)數(shù)據(jù)量少但波動幅度重要就給它額外加寬。這屬于有意識的視覺強調(diào)不算錯誤但要在圖上用文字標注清楚否則就是誤導(dǎo)。4.3 封裝成可復(fù)用函數(shù)斷軸不該每次都從頭寫斷軸的代碼本身不復(fù)雜但每次都從頭拼一遍容易忘掩碼、忘隱藏脊線。我后來把它收攏成一個函數(shù)邏輯是你傳進兩個區(qū)間的數(shù)據(jù)和坐標范圍我?guī)湍惆褕D拼好。def draw_broken_axis( x_upper, y_upper, x_lower, y_lower, ylim_upper, ylim_lower, figsize(7, 5), ratios(2, 1), color#1f77b4, ): fig, (ax_top, ax_bottom) plt.subplots( 2, 1, figsizefigsize, sharexTrue, gridspec_kw{height_ratios: list(ratios)} ) ax_top.set_ylim(*ylim_upper) ax_bottom.set_ylim(*ylim_lower) ax_top.plot(x_upper, y_upper, colorcolor, lw1.6) ax_bottom.plot(x_lower, y_lower, colorcolor, lw1.6) ax_top.spines[bottom].set_visible(False) ax_bottom.spines[top].set_visible(False) ax_top.tick_params(bottomFalse, labelbottomFalse) ax_bottom.tick_params(topFalse) fig.subplots_adjust(hspace0.04) return fig, (ax_top, ax_bottom)封裝函數(shù)唯一的風(fēng)險是太黑盒。把x_upper/y_upper/x_lower/y_lower作為參數(shù)傳進去意味著掩碼在調(diào)用處就已經(jīng)完成函數(shù)內(nèi)部不關(guān)心數(shù)據(jù)來源這樣反而靈活。如果你想更省事可以讓函數(shù)內(nèi)部自動掩碼但我覺得斷口范圍這種東西還是顯式傳進來更可控。5. 讓斷口更好看斜線標記、脊線隱藏與視覺欺騙的細節(jié)5.1 官方Demo的斜線畫法四條短線解決一切斷口斜線是這個圖最重要的視覺提示。matplotlib官方示例里用plot畫了四條非常短的斜線分別放在上子圖下邊緣兩端和下子圖上邊緣兩端。# 斜線長度基于Axes坐標的比例 d 0.015 kwargs dict(transformax_top.transAxes, colork, clip_onFalse, lw0.8) # 上子圖下邊緣左下斜線 右下斜線 ax_top.plot([-d, d], [-d, d], **kwargs) ax_top.plot([1 - d, 1 d], [-d, d], **kwargs) kwargs.update(transformax_bottom.transAxes) # 下子圖上邊緣左上斜線 右上斜線 ax_bottom.plot([-d, d], [1 - d, 1 d], **kwargs) ax_bottom.plot([1 - d, 1 d], [1 - d, 1 d], **kwargs)逐行解釋一下。transformax_top.transAxes表示傳入的坐標點是相對于該子圖繪圖區(qū)歸一化后的位置(0,0)是坐標區(qū)左下角(1,1)是右上角。第一條ax_top.plot([-d, d], [-d, d])畫的是一條從(-d,-d)到(d,d)的線段方向是左上到右下長度大約是0.02 * axes寬度。同理[1-d, 1d]表示x以1為中心向兩側(cè)各伸d畫的是右上角附近的斜線。這四條斜線組合起來就像一個被掰斷的裂口。clip_onFalse至關(guān)重要。如果不加斜線一旦碰到坐標區(qū)邊界就會被裁剪掉。因為我們想讓它橫跨在坐標區(qū)邊緣外側(cè)一點點必須關(guān)閉裁剪。lw0.8是我個人覺得比較克制的線寬太粗會喧賓奪主。5.2 刻度方向與斷口留白的微調(diào)經(jīng)驗斜線畫好后斷軸圖的主體完整了。但還有幾個細節(jié)決定這張圖是能用還是好看。第一個是刻度方向。matplotlib的刻度默認朝外在斷口處的短刻度線如果朝向斷裂內(nèi)部會和斜線打架。我習(xí)慣把非斷裂側(cè)的刻度保持默認斷裂側(cè)完全隱藏??v向斷軸里上子圖底部刻度已經(jīng)bottomFalse敢干凈了下子圖頂部刻度也做了topFalse。這樣斷裂處只有斜線沒有別的干擾元素。第二個是斷口留白寬度。hspace太小上下兩塊的坐標區(qū)邊緣會幾乎貼在一起斜線看不清楚hspace太大割裂感明顯。按我的經(jīng)驗hspace0.04到0.08是安全區(qū)。如果你發(fā)現(xiàn)斜線被hspace擠到下一張圖的區(qū)域說明間距確實太小了。第三個是脊線顏色。很多示例圖把斷口處的脊線隱藏后其他三條脊線還是默認的黑色。但如果你調(diào)整了hspace兩塊圖中間其實有一條很細的白色間隔黑線-白縫-黑線會形成三條線視覺上有點雜??梢栽陔[藏斷裂脊線后把相鄰另一側(cè)脊線也保留只是靠hspace讓觀眾感知成斷口。我見過有人把子圖背景色改成淺灰讓圖面更一體化但那樣斜線顏色就要相應(yīng)調(diào)整不太推薦新手搞。5.3 網(wǎng)格、圖例和坐標標簽的特殊處理斷軸里用網(wǎng)格要非常謹慎。兩個子圖各自畫網(wǎng)格斷口處的網(wǎng)格線必然錯位觀眾一眼就能看出這是兩張圖破壞視覺連續(xù)性。如果數(shù)據(jù)本身需要網(wǎng)格輔助讀值我建議只在下面的主子圖里ax_bottom.grid(True, ls--, alpha0.3)上面子圖不放網(wǎng)格。圖例是個更麻煩的事。默認ax.legend()會讓圖例落在當前子圖的坐標區(qū)內(nèi)。斷軸圖通常兩個子圖都需要顯示圖例但放兩份圖例很累贅。我的辦法是只在一個子圖上放圖例然后指定bbox_to_anchor把它放到圖外的公共區(qū)域ax_top.legend(locupper left, bbox_to_anchor(0, 1.05))或者干脆不用matplotlib的legend改用fig.text()手動添加一個文本標注配合斷軸這個非常規(guī)圖表反而更干凈。6. 實戰(zhàn)排查跨越斷口連線、坐標聯(lián)動與對數(shù)軸斷軸6.1 跨越斷口的幽靈連線問題第一個坑也是最常出現(xiàn)的坑斷軸圖最常見的翻車現(xiàn)場是明明設(shè)置了兩個子圖的坐標范圍數(shù)據(jù)線卻像是被什么東西從斷口處強行連了一段過去。這個問題的根源我在前面已經(jīng)反復(fù)強調(diào)過——沒有做掩碼。但還有一種更隱蔽的變體掩碼做了但掩碼的邊界值和坐標范圍沒有對齊。比如上子圖ylim是(4, 6)你用masked_outside(y, 4.1, 5.9)那么4到4.1之間的點雖然在顯示范圍內(nèi)卻被掩碼過濾掉了上面子圖這一段會出現(xiàn)空白而下子圖ylim是(0, 1)你卻用masked_outside(y, 0, 1.2)1到1.2之間的點會多畫出來在斷口邊緣形成一小段越過邊界的線。排查辦法很簡單刪掉掩碼觀察哪些線段異常出現(xiàn)再把坐標范圍打印出來和掩碼范圍對齊。兩個范圍必須完全一致連邊界的浮點誤差都可能造成1像素寬度的異常線段。6.2 兩個Axes的坐標聯(lián)動縮放交互時的錯位靜態(tài)圖片不存在這個問題但如果你要交付的是可交互的notebook圖表就會碰到上子圖和下子圖雖然是sharexTrue創(chuàng)建的但當你用鼠標滾輪在一個子圖上縮放后另一個子圖的x軸范圍不一定會同步更新——具體表現(xiàn)取決于matplotlib版本和交互后端。斷軸圖最怕的就是兩個子圖各滾各的因為觀眾必須一直對比兩條x軸有沒有對齊。解決辦法是在創(chuàng)建子圖后手動綁定x軸變化事件讓上下兩個子圖的set_xlim始終保持一致。def sync_xlim(ax_src, ax_dst): def on_xlim_changed(event_ax): if event_ax is ax_src: ax_dst.set_xlim(ax_src.get_xlim()) return on_xlim_changed ax_top.callbacks.connect(xlim_changed, sync_xlim(ax_top, ax_bottom)) ax_bottom.callbacks.connect(xlim_changed, sync_xlim(ax_bottom, ax_top))注意sharexTrue在初始狀態(tài)下已經(jīng)共享軸范圍這個回調(diào)主要用來處理后續(xù)交互態(tài)的變動。如果你的場景不需要交互那直接忽略即可??v向斷軸的y軸互不相關(guān)但橫向斷軸的shareyTrue對應(yīng)的是y軸共享同樣的問題會發(fā)生在兩個子圖的y方向縮放上處理方法一模一樣只是把事件從xlim_changed換成ylim_changed。6.3 對數(shù)坐標下斷軸比例計算要用對數(shù)后的跨度有些特殊情況斷軸和對數(shù)坐標要一起用。比如低值區(qū)域從0.01到1高值區(qū)域從100到500中間差了好幾個量級但業(yè)務(wù)方既要看真實的指數(shù)形態(tài)又想跳過中間的空白區(qū)間。操作上以縱向斷軸為例做法是在兩個子圖上都加一行ax_top.set_yscale(log) ax_bottom.set_yscale(log)然后其他邏輯不變。但有兩個細節(jié)第一數(shù)據(jù)范圍內(nèi)的0和負值會被log軸丟棄掩碼時要先把非正值過濾掉否則matplotlib會警告甚至繪制異常。第二height_ratios的計算不能再按原始數(shù)值跨度而要按照對數(shù)變換后的跨度。比如上子圖顯示100到500log10之后是2到2.7跨度0.7下子圖顯示0.01到1log10之后是-2到0跨度2那么height_ratios應(yīng)該大概是[0.7, 2]而不是[400, 0.99]。否則圖上子圖的物理高度和它負責(zé)的坐標距離不成比例。另外log軸在斷口附近的刻度標簽可能自動生成非常奇怪的間隔比如上子圖有刻度100、200、300下子圖卻是0.01、0.1、1兩者之間毫無關(guān)系這是正?,F(xiàn)象你只需要確保每個子圖的刻度都在它自己顯示的范圍內(nèi)。6.4 多段斷裂是否可行理論上三段、四段斷裂的做法完全一樣創(chuàng)建N個子圖依次隱藏相鄰脊線畫對應(yīng)位置的斜線。實際項目里我做得比較少因為超過兩段之后觀眾的認知負擔(dān)會急劇上升——他們需要記住這是個不連續(xù)坐標軸而且斷口還不止一個。如果確實需要多段建議用循環(huán)生成子圖而不是手動復(fù)制代碼。核心邏輯是n_segments 3 fig, axes plt.subplots(n_segments, 1, sharexTrue, gridspec_kw{height_ratios: ratios}) for i, ax in enumerate(axes): ax.set_ylim(ylim_list[i]) # 隱藏除最外側(cè)以外的脊線上子圖隱藏bottom下子圖隱藏top中間子圖兩個都隱藏中間子圖的上下脊線都隱藏斜線也要畫兩套。圖例、網(wǎng)格、標簽的復(fù)雜度成倍增加所以我個人建議非必要不推薦。7. 別濫用斷軸畫得出來也要講得清楚7.1 斷軸在可視化誠信上的爭議斷軸圖在數(shù)據(jù)可視化圈子里一直有爭議。反對者認為它天然帶有誤導(dǎo)性坐標軸縮放的突變會讓觀眾無法正確感知數(shù)據(jù)變化的幅度。同一組數(shù)據(jù)兩個區(qū)間從10漲到12在斷軸圖里可能看起來翻了不止一倍因為你的縮放把這一小段放大了。這個批評是成立的。斷軸本質(zhì)上是在告訴觀眾我要用兩套比例尺來畫同一張圖而多數(shù)人對圖形的第一直覺仍然是坐標是等距連續(xù)的。所以使用斷軸的前提是你必須在圖上明確標注斷裂區(qū)間最好加一行文字說明中間數(shù)據(jù)已省略坐標刻度不連續(xù)。我在項目里會習(xí)慣在斷口附近加一行小字格式通常是ax_top.text(0.5, 1.02, 區(qū)間 (1, 4) 已省略, transformfig.transFigure, hacenter)。雖然不能完全消除誤導(dǎo)但至少做到了可視化上的誠實。7.2 哪些場景我建議果斷放棄斷軸下面這些情況我更傾向勸你別用斷軸學(xué)術(shù)論文或正式研究報告。審稿人普遍不認可斷軸要么分面展示要么用其他變換。除非期刊明確接受這種形式否則只會增加被challenge的風(fēng)險。數(shù)據(jù)在斷口區(qū)間內(nèi)有重要信息。你為了視覺清爽把中間一段剪掉可這段里恰恰包含一次業(yè)務(wù)關(guān)鍵事件那就得不償失。數(shù)據(jù)分布是連續(xù)的。比如正態(tài)分布樣的鐘形曲線你把中間區(qū)域砍掉等于砍掉了數(shù)據(jù)最主要的形態(tài)特征整張圖已經(jīng)沒有意義。觀眾缺乏基礎(chǔ)預(yù)期管理。如果投放的是一張無人講解的靜態(tài)圖很多第一次見到斷軸的人根本不知道那個鋸齒線是什么意思也不會反應(yīng)到縱軸不連續(xù)他們只會覺得這個圖很奇怪。7.3 替代方案再審視分面、稀釋采樣、注釋標注在放棄斷軸之后還有三條退路值得考慮一個是分面圖facet。上下兩個子圖各自用完整坐標范圍但x軸共享中間不加斜線而是用大標題清楚區(qū)分。這種做法的優(yōu)點是完全誠實缺點是視覺連貫性弱。另一個是局部放大圖zoom-in inset。畫一張全量圖再畫一個局部放大圖作為插入圖。matplotlib的inset_axes就能做比斷軸更不容易引起誤解唯一的問題是全局和局部被分開呈現(xiàn)無法在同一個斷裂坐標系里對比位置關(guān)系。還有一種是保持線性軸但用顏色或注釋強調(diào)關(guān)鍵區(qū)間。有時候你真正想展示的并不是小值和大值的對比而是某一段時間的操作造成了什么影響那直接把那個區(qū)間用色塊高亮標注就足夠了根本不需要動坐標軸。最后說一句我自己的體會。斷軸是一個很有用的工具但它不是一個默認方案。我現(xiàn)在的選擇標準很簡單先用log軸不行就分面分面還不行再考慮斷軸。而且一旦決定用斷軸我一定會把斷口范圍和坐標刻度不連續(xù)這兩件事在圖上寫得清清楚楚。圖表是給人看的信息準確永遠比視覺效果優(yōu)先。這才是斷軸正確的打開方式。