戰(zhàn)：SWT圖表選型、坐標(biāo)軸、實(shí)時(shí)刷新與導(dǎo)出優(yōu)化)
簡(jiǎn)介SWTChart 是一套基于 SWT 的 Java 圖表類庫體積輕巧、調(diào)用簡(jiǎn)單適合在 Eclipse RCP 或 SWT 桌面應(yīng)用中嵌入統(tǒng)計(jì)圖形的開發(fā)者使用也可作為學(xué)習(xí) SWT 自定義繪圖與坐標(biāo)系實(shí)現(xiàn)的參考代碼。它支持線圖、散點(diǎn)圖、堆棧圖、柱形圖、面積圖、步驟圖等常用圖形并具備對(duì)數(shù)標(biāo)度、分類軸、多軸、軸取向與系列標(biāo)簽等細(xì)節(jié)能力能覆蓋多數(shù)桌面端數(shù)據(jù)可視化需求。壓縮包共 36 個(gè)文件約 287KB其中 24 個(gè) java 源文件承載核心繪圖邏輯與示例代碼2 個(gè) jar 可直接引入工程另有 project、classpath 等 Eclipse 工程配置以及 html 說明文檔和 properties、xml 等元數(shù)據(jù)文件導(dǎo)入后可對(duì)照源碼理解渲染機(jī)制并運(yùn)行示例驗(yàn)證效果。目前已有 640 人學(xué)習(xí)下載適合需要輕量級(jí) SWT 圖表方案或希望研讀繪圖源碼的 Java 開發(fā)者。1. 從一張卡死的折線圖說起SWTChart 是什么、誰該用它幾年前接手一個(gè)桌面端監(jiān)控工具界面用 SWT 手寫圖表那塊圖省事掛了 JFreeChart結(jié)果在 Linux 上開 SWT_AWT 橋接直接變成白塊右鍵菜單和字體渲染也全走樣。后來換成 SWTChart 才消停它是純 SWT 繪制的 Java 圖表類庫折線、柱狀、餅圖、面積、散點(diǎn)、氣泡這些常見形態(tài)都覆蓋產(chǎn)出物本身就是個(gè) SWT 控件塞進(jìn) Composite 里跟著 FillLayout、GridLayout 一起走不牽扯第二套 UI 線程模型。適合三類人界面已經(jīng)是 SWT/JFace、不想為幾張圖引入 Swing 或 JavaFX 的要把圖表嵌進(jìn) RCP 視圖并支持導(dǎo)出的被“圖表卡頓”折騰過、想自己控制重繪節(jié)奏的。下面按我拆包、寫 demo、二次封裝的順序講中間那段坐標(biāo)軸和線程模型是重點(diǎn)。2. 選型與骨架SWT 項(xiàng)目里為什么是它最小可跑代碼怎么寫2.1 三條路的技術(shù)賬SWTChart、JFreeChart、JavaFX Charts在 SWT 界面里畫圖本質(zhì)是在選“誰來當(dāng)渲染基座”。JFreeChart 走的是 Java2D輸出 BufferedImage 或 ChartPanel放進(jìn) SWT 只有兩條路SWT_AWT 橋接或者把圖渲染成圖片再塞進(jìn) Label。前者在 Linux 上對(duì) GTK 與 AWT 的混用很敏感窗口嵌入、焦點(diǎn)、輸入法都容易出玄學(xué)問題后者等于放棄了所有交互鼠標(biāo)懸停、點(diǎn)擊選中、框選縮放全沒有。JavaFX Charts 能力更現(xiàn)代但意味著打包時(shí)要帶一套 JavaFX 運(yùn)行時(shí)模塊化之后還得處理 jlink 與原生庫對(duì)一個(gè)內(nèi)部工具來說偏重。SWTChart 的定位很清楚自己繼承 Canvas用 GC 直接畫坐標(biāo)軸、圖例、網(wǎng)格、系列全部是自家對(duì)象模型。好處是零橋接、零額外運(yùn)行時(shí)壞處也要認(rèn)——它沒有內(nèi)置動(dòng)畫縮放平移這類交互在核心包里要自己寫官方另有一個(gè) extensions 包提供可滾動(dòng)的圖表殼子功能才補(bǔ)齊。我一般這樣劃界靜態(tài)報(bào)表圖、實(shí)時(shí)監(jiān)控圖用核心包足夠需要鼠標(biāo)拖拽縮放、框選區(qū)間、多軸聯(lián)動(dòng)的直接上 extensions 里的可滾動(dòng)圖表別自己造輪子。維度SWTChartJFreeChartJavaFX Charts渲染基座SWT GCJava2DJavaFX 場(chǎng)景圖與 SWT 集成原生控件直接 add 到 Composite需橋接或轉(zhuǎn)圖片需獨(dú)立運(yùn)行時(shí)混用麻煩交互能力核心包較弱extensions 補(bǔ)齊縮放平移中等依賴 ChartPanel較強(qiáng)打包體積只多一個(gè) jar中等偏大上手成本低API 面窄中中高還有一條容易被忽略SWT 的 Color、Font、Image 都是需要手動(dòng)釋放的系統(tǒng)資源。SWTChart 的 API 大量接收 Color 參數(shù)如果你習(xí)慣性地new Color(display, 255, 0, 0)幾千次刷新之后就是句柄泄漏。正確姿勢(shì)是display.getSystemColor(SWT.COLOR_RED)或者自己建一個(gè)調(diào)色板單例統(tǒng)一管理退出時(shí)統(tǒng)一 dispose。這條在后面避坑章還會(huì)再提一次。2.2 最小可跑骨架四十行代碼出一張折線圖先別急著封裝把最小閉環(huán)跑通一個(gè) Shell、一個(gè) SwtChart、一條折線系列、一次 adjustRange。這段代碼我建議你直接抄進(jìn) IDE 里跑一遍后面所有參數(shù)都是在這個(gè)骨架上加。import org.eclipse.swt.SWT; import org.eclipse.swt.layout.FillLayout; import org.eclipse.swt.widgets.Display; import org.eclipse.swt.widgets.Shell; import org.eclipse.swtchart.ILineSeries; import org.eclipse.swtchart.ISeries.SeriesType; import org.eclipse.swtchart.LineStyle; import org.eclipse.swtchart.SwtChart; import org.eclipse.swtchart.ISeries; public class ChartSkeleton { public static void main(String[] args) { Display display new Display(); Shell shell new Shell(display); shell.setText(SWTChart 最小骨架); shell.setLayout(new FillLayout()); shell.setSize(880, 520); // 1. 圖表控件父容器是 shell樣式先給 NONE SwtChart chart new SwtChart(shell, SWT.NONE); // 2. 建系列類型 LINEid 一旦定下就別隨便改后面刷新要靠它找回來 ISeries raw chart.getSeriesSet().createSeries(SeriesType.LINE, cpu); ILineSeriesdouble[] series (ILineSeriesdouble[]) raw; // 3. 造數(shù)據(jù)24 個(gè)小時(shí)點(diǎn)X 必須是遞增的 double 數(shù)組 double[] x new double[24]; double[] y new double[24]; for (int i 0; i 24; i) { x[i] i; y[i] 40 25 * Math.sin(i / 3.0); } series.setXSeries(x); series.setYSeries(y); // 4. 線條樣式顏色走系統(tǒng)色板避免自建 Color 泄漏 series.setLineColor(display.getSystemColor(SWT.COLOR_DARK_CYAN)); series.setLineWidth(2); series.setLineStyle(LineStyle.SOLID); series.setSymbolType(ISeries.SymbolType.NONE); // 點(diǎn)多了必關(guān)否則畫符號(hào)畫到卡 // 5. 軸標(biāo)題與范圍 chart.getAxisSet().getXAxis(0).getTitle().setText(小時(shí)); chart.getAxisSet().getYAxis(0).getTitle().setText(負(fù)載 / %); chart.getAxisSet().adjustRange(); // 不調(diào)這句軸范圍不會(huì)跟著數(shù)據(jù)走 shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) { display.sleep(); } } display.dispose(); } }幾個(gè)關(guān)鍵點(diǎn)值得單獨(dú)說。SwtChart的構(gòu)造函數(shù)只認(rèn) Composite所以它天然能被任何布局管理器接管createSeries返回的是ISeries接口必須根據(jù)SeriesType強(qiáng)轉(zhuǎn)成ILineSeries、IBarSeries、IPieSeries轉(zhuǎn)錯(cuò)了運(yùn)行期直接 ClassCastException編譯器不會(huì)提醒你。系列 id 是字符串后續(xù)getSeriesSet().getSeries(cpu)靠它取回對(duì)象所以命名要有約束別用“series1”這種一會(huì)兒就撞車的名字。setXSeries與setYSeries分兩次調(diào)用長(zhǎng)度必須一致這是硬約束。adjustRange()是新手最容易漏的一步它按所有可見系列的數(shù)據(jù)重新算軸范圍不調(diào)用的話你會(huì)看到一條線貼著圖邊緣或者干脆在可視區(qū)外。SymbolType.NONE也建議默認(rèn)關(guān)掉符號(hào)繪制是逐點(diǎn)畫的幾千點(diǎn)以上開銷肉眼可見。注意不同發(fā)行版本的類名有差異較新版本主類是SwtChart老代碼里常見的Chart是同族兼容類常量如IMAGE_FORMAT_PNG定義在圖表主類上導(dǎo)入時(shí)以 IDE 補(bǔ)全為準(zhǔn)不要照抄網(wǎng)上的老片段。3. 坐標(biāo)軸與主題把默認(rèn)灰底圖調(diào)成能交付的樣子3.1 軸對(duì)象模型主副軸、網(wǎng)格與范圍SWTChart 的軸不是“圖表的屬性”而是一組獨(dú)立對(duì)象通過IAxisSet管理。X 軸默認(rèn)只有一條Y 軸可以創(chuàng)建多條用來做雙單位疊加——比如左軸溫度、右軸壓力。createYAxis()會(huì)返回新的IYAxis索引從 1 開始然后把這個(gè)索引塞給系列series.setYAxisId(1)。這一步順序不能反先建軸再指定否則系列還是掛在 0 號(hào)軸上。網(wǎng)格線掛在軸上而不是圖表上getGrid()拿到的對(duì)象控制該軸對(duì)應(yīng)的那組網(wǎng)格。交付級(jí)圖表里我通常把 X 軸網(wǎng)格關(guān)掉、Y 軸保留虛線視覺上干凈很多。軸的位置也有講究setPosition(AxisPosition.Secondary)能把 Y 軸挪到右側(cè)做雙軸時(shí)副軸必須挪不然兩條軸的刻度會(huì)疊在左邊糊成一團(tuán)。IAxisSet axisSet chart.getAxisSet(); // 主 X 軸范圍、標(biāo)題、刻度標(biāo)簽角度 IXAxis xAxis axisSet.getXAxis(0); xAxis.getTitle().setText(采樣時(shí)間 / s); xAxis.setRange(new Range(0, 3600)); // 固定范圍避免實(shí)時(shí)刷新時(shí)軸來回跳 xAxis.getTick().setTickLabelAngle(45); // 標(biāo)簽長(zhǎng)了必須轉(zhuǎn)否則互相壓字 xAxis.getGrid().setVisible(false); // X 向網(wǎng)格關(guān)掉 // 主 Y 軸網(wǎng)格改成虛線顏色調(diào)淺 IYAxis yAxis axisSet.getYAxis(0); yAxis.getTitle().setText(溫度 / ℃); yAxis.getGrid().setVisible(true); yAxis.getGrid().setStyle(LineStyle.DASH); yAxis.getGrid().setForeground(display.getSystemColor(SWT.COLOR_GRAY)); // 副 Y 軸右置綁定到第二個(gè)系列 IYAxis yAxis2 axisSet.createYAxis(); yAxis2.getTitle().setText(壓力 / kPa); yAxis2.setPosition(AxisPosition.Secondary); secondSeries.setYAxisId(1); axisSet.adjustRange();setRange傳的是Range對(duì)象不是兩個(gè) double這是 API 上的小門檻。實(shí)時(shí)圖里我傾向于固定范圍而不是每幀 adjustRange軸范圍一跳整張圖會(huì)“呼吸”看久了眼睛累而且刷新時(shí)重算范圍本身有開銷。固定范圍 數(shù)據(jù)裁剪是更穩(wěn)的做法超范圍的數(shù)值在系列里截掉或者畫到邊界上。刻度格式由getTick().setFormat(Format)控制參數(shù)是java.text.Format所以DecimalFormat、SimpleDateFormat都能直接塞進(jìn)去。時(shí)間軸用SimpleDateFormat(HH:mm)數(shù)值軸用DecimalFormat(#,##0.0)比默認(rèn)的科學(xué)計(jì)數(shù)法友好得多?？潭葮?biāo)簽角度 0 到 90 度之間可調(diào)超過 45 度之后標(biāo)簽會(huì)往上頂記得給底部留白。3.2 主題與配色別在業(yè)務(wù)代碼里硬編碼顏色SWTChart 內(nèi)置了主題機(jī)制setTheme(ThemeId.XXX)一次性把背景、網(wǎng)格、軸線的配色換掉枚舉里有 CLASSIC、GRAY、GRAPHITE 這幾檔風(fēng)格深色面板用 GRAPHITE淺色報(bào)表用 CLASSIC 或默認(rèn)。主題只改“骨架色”系列顏色還是得自己設(shè)所以實(shí)際項(xiàng)目里我會(huì)定義一個(gè)小調(diào)色板類把 8 到 10 個(gè)業(yè)務(wù)語義色正常、告警、嚴(yán)重、離線映射成系統(tǒng)色或一次性創(chuàng)建并復(fù)用的 Color 實(shí)例。面積圖是個(gè)例外ILineSeries打開setEnableArea(true)之后會(huì)填充曲線下方區(qū)域setAreaColor控制填充色。填充色建議帶透明度或者選很淺的色否則多條面積圖疊在一起就是災(zāi)難。柱狀圖的系列是IBarSeriessetBarColor、setBarWidth兩個(gè)參數(shù)就夠柱寬是相對(duì)值不是像素改成 0.5 會(huì)明顯變細(xì)。主題切換有個(gè)副作用它會(huì)重置部分軸與網(wǎng)格樣式。所以正確順序是先setTheme再設(shè)軸細(xì)節(jié)最后設(shè)系列樣式。我見過有人先精心調(diào)完網(wǎng)格再切主題一切回到解放前然后懷疑是 API 有 bug——其實(shí)是調(diào)用順序問題這種坑后面還會(huì)重復(fù)出現(xiàn)。// 主題先行 chart.setTheme(ThemeId.GRAPHITE); chart.setBackground(display.getSystemColor(SWT.COLOR_WHITE)); // 系列樣式后設(shè)避免被主題覆蓋 series.setLineColor(display.getSystemColor(SWT.COLOR_DARK_CYAN)); series.setLineWidth(2); series.setEnableArea(true); // 面積填充 series.setAreaColor(display.getSystemColor(SWT.COLOR_WIDGET_LIGHT_SHADOW));餅圖比較特殊它不消費(fèi)坐標(biāo)軸數(shù)據(jù)所以建完之后要把兩條軸的刻度藏掉否則圖旁邊會(huì)掛著兩條毫無意義的空軸IPieSeries pie (IPieSeries) chart.getSeriesSet().createSeries(SeriesType.PIE, share); pie.setDataVector(new double[] {35, 25, 20, 20}); pie.setVisibles(new boolean[] {true, true, true, true}); // 軸隱藏圖例保留 chart.getAxisSet().getXAxis(0).getTick().setVisible(false); chart.getAxisSet().getYAxis(0).getTick().setVisible(false); chart.getLegend().setVisible(true);setVisibles的布爾數(shù)組用來控制哪些扇區(qū)顯示配合圖例點(diǎn)擊可以實(shí)現(xiàn)“過濾某類占比”的效果這個(gè)交互自己接一下鼠標(biāo)事件就能做比重新建系列省事。餅圖的多系列疊加它支持得一般兩塊餅摞在一起會(huì)互相遮擋真要做對(duì)比就并排放兩個(gè)圖表控件。4. 實(shí)時(shí)刷新與大數(shù)據(jù)量SWT 線程模型下的三條性能紅線4.1 線程紅線只有 UI 線程能碰控件SWT 的線程模型比 Swing 更嚴(yán)格任何控件方法都必須在創(chuàng)建它的 Display 線程里調(diào)用后臺(tái)線程直接series.setYSeries(...)會(huì)拋SWTException: Invalid thread access。這條錯(cuò)誤信息很直白但真正的坑在于它有時(shí)不立刻拋——比如你只改了數(shù)據(jù)沒觸發(fā)重繪程序看著沒事等到下一次redraw()才炸堆棧還指在莫名其妙的地方。標(biāo)準(zhǔn)解法是把數(shù)據(jù)更新包進(jìn)display.asyncExec(Runnable)。asyncExec是異步投遞UI 線程空閑時(shí)執(zhí)行不會(huì)阻塞采集線程syncExec是同步等待后臺(tái)線程會(huì)一直卡到 UI 線程跑完這段代碼。兩者的選擇很清楚采集線程只負(fù)責(zé)塞數(shù)據(jù)永遠(yuǎn)用 asyncExec如果后臺(tái)線程需要等 UI 更新完才能繼續(xù)比如要讀回控件狀態(tài)才用 syncExec。反過來說如果 UI 線程里調(diào)用 syncExec而那個(gè) Runnable 又在等 UI 線程就是自己等自己直接死鎖。這種死鎖在日志里表現(xiàn)為界面整個(gè)凍住、CPU 占用為 0非常難查。// 采集線程只往緩沖里寫不碰任何控件 new Thread(() - { while (running) { double value readSensor(); // 假設(shè)這是你的數(shù)據(jù)源 synchronized (bufferLock) { ringBuffer.add(value); // 環(huán)形緩沖容量固定 } try { Thread.sleep(20); // 50Hz 采樣 } catch (InterruptedException e) { Thread.currentThread().interrupt(); return; } } }, sampler).start(); // UI 線程定時(shí)把緩沖快照刷進(jìn)圖表 display.timerExec(200, new Runnable() { Override public void run() { if (chart.isDisposed()) { return; } double[] snapshot; synchronized (bufferLock) { snapshot ringBuffer.toArray(); // 一次性拷貝縮短持鎖時(shí)間 } series.setYSeries(snapshot); chart.redraw(); display.timerExec(200, this); // 自我重排形成固定節(jié)奏 } });4.2 刷新節(jié)奏別讓每個(gè)數(shù)據(jù)點(diǎn)都觸發(fā)重繪50Hz 采樣不等于 50Hz 重繪。redraw()會(huì)走一遍完整的繪制流程清背景、畫網(wǎng)格、畫軸、畫系列、畫圖例幾萬個(gè)像素操作一秒鐘調(diào)五十次CPU 單核直接吃滿。經(jīng)驗(yàn)值是 5 到 10Hz 的界面刷新就足夠肉眼流暢也就是 100 到 200 毫秒一次timerExec正是干這個(gè)的它比Thread.sleep循環(huán)穩(wěn)也不會(huì)因?yàn)楫惓０讯〞r(shí)鏈斷掉。setYSeries每次都會(huì)拷貝一份數(shù)組所以刷新時(shí)傳的是快照而不是緩沖引用避免采集線程在繪制過程中改數(shù)據(jù)導(dǎo)致畫到一半內(nèi)容變了。這個(gè)“快照”動(dòng)作要在鎖里完成出了鎖再調(diào)控件方法把持鎖時(shí)間壓到最短。還有一個(gè)隱形開銷是adjustRange()。它要遍歷所有系列求極值數(shù)據(jù)量大時(shí)不是常數(shù)時(shí)間。實(shí)時(shí)圖里我通常固定范圍只在用戶點(diǎn)“自適應(yīng)”按鈕時(shí)調(diào)一次如果確實(shí)需要跟隨把頻率降到 1Hz 以內(nèi)別跟著每次刷新走。4.3 大數(shù)據(jù)量降采樣與繪制開關(guān)幾千點(diǎn)以內(nèi)SWTChart 基本無壓力上到幾萬點(diǎn)就能明顯感覺到窗口拖動(dòng)時(shí)的遲滯十萬點(diǎn)以上如果不做處理鼠標(biāo)劃過都會(huì)卡?？捎玫氖侄伟葱詢r(jià)比排序關(guān)掉符號(hào)繪制SymbolType.NONE、關(guān)掉系列抗鋸齒、關(guān)掉不需要的網(wǎng)格、把線寬降到 1、用降采樣把點(diǎn)數(shù)壓到可視寬度的兩倍以內(nèi)。降采樣最簡(jiǎn)單的做法是等間隔抽稀但會(huì)丟掉尖峰。監(jiān)控場(chǎng)景我更常用的是“分段極值法”把數(shù)據(jù)按像素寬度分段每段保留最大值和最小值兩個(gè)點(diǎn)這樣毛刺不會(huì)消失視覺上也不失真。數(shù)據(jù)點(diǎn)數(shù)建議處理說明 5k直接繪關(guān)閉符號(hào)大多數(shù)監(jiān)控夠用5k ~ 50k抽稀到屏幕寬度的 2 倍每像素兩三個(gè)點(diǎn)足夠 50k分段極值 關(guān)閉網(wǎng)格與抗鋸齒保留尖峰犧牲平滑需要縮放平移換 extensions 的可滾動(dòng)圖表它內(nèi)部做了視口裁剪抗鋸齒這件事有點(diǎn)看版本部分版本在圖表級(jí)提供setAntialias開關(guān)沒有的話就在主題里找對(duì)應(yīng)項(xiàng)或者接受默認(rèn)。判斷方法很簡(jiǎn)單畫一萬個(gè)點(diǎn)拖動(dòng)窗口看是否掉幀掉了就逐個(gè)關(guān)開關(guān)做對(duì)比一次只改一個(gè)變量這種排查方式比猜快得多。5. 避坑與排查五個(gè)讓我返工的細(xì)節(jié)5.1 Invalid thread access 出現(xiàn)在“看起來是 UI 線程”的地方現(xiàn)象定時(shí)器里更新圖表沒問題換成消息回調(diào)就偶發(fā)崩堆棧指向setYSeries。原因回調(diào)來自網(wǎng)絡(luò)或串口線程不是創(chuàng)建 Display 的那個(gè)線程。解決所有跨線程更新統(tǒng)一走display.asyncExec并且封裝成一個(gè)UiExec.run(Runnable)工具方法業(yè)務(wù)代碼不許直接調(diào)控件。判斷當(dāng)前線程是否 UI 線程用Display.getCurrent() ! null但別拿它當(dāng)分支邏輯直接投遞更省心。5.2 createSeries 強(qiáng)轉(zhuǎn)類型失敗現(xiàn)象ClassCastException提示LineSeries cannot be cast to BarSeries。原因SeriesType和強(qiáng)轉(zhuǎn)目標(biāo)不一致或者復(fù)用了一個(gè)已被其他類型占用的 id。解決系列 id 與類型一一對(duì)應(yīng)命名上加前綴比如line_cpu、bar_disk建系列時(shí)立刻強(qiáng)轉(zhuǎn)并保存到成員變量不要每次用的時(shí)候從 SeriesSet 里取出來再?gòu)?qiáng)轉(zhuǎn)。5.3 數(shù)據(jù)變了圖卻紋絲不動(dòng)現(xiàn)象日志打印數(shù)據(jù)是對(duì)的界面還是老曲線。原因有三層按概率排一是忘了redraw()二是沒調(diào)adjustRange()新數(shù)據(jù)落在軸范圍外看不見三是定時(shí)鏈斷了timerExec拋出異常后沒有重新排期。解決刷新方法里按setYSeries → adjustRange → redraw三件套固定順序?qū)憈imerExec外面包 try-catch 并在 finally 里重排。5.4 跑一晚上內(nèi)存漲了幾百兆現(xiàn)象長(zhǎng)時(shí)間運(yùn)行后內(nèi)存持續(xù)上漲GC 后也降不下來。原因循環(huán)里new Color(display, r, g, b)、new Font(...)、new Image(...)沒有 disposeSWT 資源不進(jìn) Java 堆只進(jìn) Native 句柄。解決顏色字體做常量或單例隨圖表控件一起在dispose時(shí)釋放用display.getSystemColor盡量替代自建 Color。血淚經(jīng)驗(yàn)是這類泄漏不看堆快照要看系統(tǒng)句柄數(shù)。5.5 導(dǎo)出的 PNG 是空白或者被裁掉一半現(xiàn)象界面上好好的save出來的圖空白、分辨率不對(duì)或者右邊緣缺一塊。原因?qū)С鰰r(shí)機(jī)太早控件還沒完成布局拿到的 bounds 是 0 或者舊尺寸也可能是把 save 放在了非 UI 線程。解決導(dǎo)出前先chart.layout()或者等paint事件走完在 UI 線程里調(diào)用需要固定尺寸就用帶 Rectangle 參數(shù)的重載顯式指定寬高別依賴控件當(dāng)前大小。提示SWT 原生庫加載失敗no swt-gtk in java.library.path跟圖表 API 無關(guān)是運(yùn)行環(huán)境缺平臺(tái)依賴先在最小空窗口上驗(yàn)證 SWT 本身能起來再排查圖表代碼能省一半時(shí)間。6. 導(dǎo)出與封裝一個(gè)能復(fù)用的圖表工廠外加兩個(gè)導(dǎo)出參數(shù)圖表代碼寫到第三個(gè)界面就開始重復(fù)了軸標(biāo)題、角度、網(wǎng)格、系列樣式每次抄一遍。我一般收口成一個(gè)工廠類把“圖表骨架”和“系列樣式”分開工廠負(fù)責(zé)建控件、設(shè)主題、設(shè)軸加系列的方法只負(fù)責(zé)顏色、線寬、符號(hào)。這樣換主題只改一處加新圖只寫兩行。public final class ChartFactory { private ChartFactory() {} /** 統(tǒng)一骨架主題、軸標(biāo)題、標(biāo)簽角度、網(wǎng)格 */ public static SwtChart lineChart(Composite parent, String xTitle, String yTitle) { SwtChart chart new SwtChart(parent, SWT.NONE); chart.setTheme(ThemeId.GRAPHITE); chart.getAxisSet().getXAxis(0).getTitle().setText(xTitle); chart.getAxisSet().getYAxis(0).getTitle().setText(yTitle); chart.getAxisSet().getXAxis(0).getTick().setTickLabelAngle(45); chart.getAxisSet().getXAxis(0).getGrid().setVisible(false); chart.getAxisSet().getYAxis(0).getGrid().setStyle(LineStyle.DASH); return chart; } /** 加一條折線顏色由調(diào)用方傳避免工廠里硬編碼業(yè)務(wù)語義 */ public static ILineSeriesdouble[] addLine(SwtChart chart, String id, Color color, int width) { ILineSeriesdouble[] s (ILineSeriesdouble[]) chart.getSeriesSet().createSeries(SeriesType.LINE, id); s.setLineColor(color); s.setLineWidth(width); s.setSymbolType(ISeries.SymbolType.NONE); return s; } }導(dǎo)出這段有兩個(gè)參數(shù)值得掰開說。第一個(gè)是格式常量IMAGE_FORMAT_PNG、IMAGE_FORMAT_JPEG、IMAGE_FORMAT_BMP三選一PNG 無損適合貼文檔JPEG 體積小但曲線邊緣會(huì)有壓縮噪點(diǎn)我不建議用。第二個(gè)是尺寸不傳尺寸就按控件當(dāng)前像素導(dǎo)出高分屏上會(huì)得到一張很大的圖插進(jìn) Word 直接超頁傳一個(gè)固定Rectangle能讓所有導(dǎo)出圖尺寸一致報(bào)告排版省事。// UI 線程中調(diào)用先布局再按固定尺寸導(dǎo)出 chart.layout(); Rectangle bounds new Rectangle(0, 0, 1600, 900); chart.save(/data/report/cpu-trend.png, SwtChart.IMAGE_FORMAT_PNG, bounds);打印走Printer思路一樣先在 UI 線程里把圖表畫到打印 GC 上再printer.print()別忘了在finally里printer.dispose()——打印機(jī)對(duì)象同樣是 SWT 資源漏掉一次就少一個(gè)句柄。封裝完之后我給自己定了個(gè)規(guī)矩任何新圖表先跑最小骨架確認(rèn)數(shù)據(jù)能出來再疊軸和主題最后才接實(shí)時(shí)刷新。跳過第一步直接寫實(shí)時(shí)邏輯出問題時(shí)你分不清是數(shù)據(jù)、軸范圍還是線程的鍋。從那以后我每次接新圖表需求都強(qiáng)制走一遍這個(gè)順序返工次數(shù)少了不止一半。這套順序和上面那幾個(gè)參數(shù)希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取 SWTChart實(shí)戰(zhàn)：SWT圖表選型、坐標(biāo)軸、實(shí)時(shí)刷新與導(dǎo)出優(yōu)化
簡(jiǎn)介SWTChart 是一套基于 SWT 的 Java 圖表類庫體積輕巧、調(diào)用簡(jiǎn)單適合在 Eclipse RCP 或 SWT 桌面應(yīng)用中嵌入統(tǒng)計(jì)圖形的開發(fā)者使用也可作為學(xué)習(xí) SWT 自定義繪圖與坐標(biāo)系實(shí)現(xiàn)的參考代碼。它支持線圖、散點(diǎn)圖、堆棧圖、柱形圖、面積圖、步驟圖等常用圖形并具備對(duì)數(shù)標(biāo)度、分類軸、多軸、軸取向與系列標(biāo)簽等細(xì)節(jié)能力能覆蓋多數(shù)桌面端數(shù)據(jù)可視化需求。壓縮包共 36 個(gè)文件約 287KB其中 24 個(gè) java 源文件承載核心繪圖邏輯與示例代碼2 個(gè) jar 可直接引入工程另有 project、classpath 等 Eclipse 工程配置以及 html 說明文檔和 properties、xml 等元數(shù)據(jù)文件導(dǎo)入后可對(duì)照源碼理解渲染機(jī)制并運(yùn)行示例驗(yàn)證效果。目前已有 640 人學(xué)習(xí)下載適合需要輕量級(jí) SWT 圖表方案或希望研讀繪圖源碼的 Java 開發(fā)者。1. 從一張卡死的折線圖說起SWTChart 是什么、誰該用它幾年前接手一個(gè)桌面端監(jiān)控工具界面用 SWT 手寫圖表那塊圖省事掛了 JFreeChart結(jié)果在 Linux 上開 SWT_AWT 橋接直接變成白塊右鍵菜單和字體渲染也全走樣。后來換成 SWTChart 才消停它是純 SWT 繪制的 Java 圖表類庫折線、柱狀、餅圖、面積、散點(diǎn)、氣泡這些常見形態(tài)都覆蓋產(chǎn)出物本身就是個(gè) SWT 控件塞進(jìn) Composite 里跟著 FillLayout、GridLayout 一起走不牽扯第二套 UI 線程模型。適合三類人界面已經(jīng)是 SWT/JFace、不想為幾張圖引入 Swing 或 JavaFX 的要把圖表嵌進(jìn) RCP 視圖并支持導(dǎo)出的被“圖表卡頓”折騰過、想自己控制重繪節(jié)奏的。下面按我拆包、寫 demo、二次封裝的順序講中間那段坐標(biāo)軸和線程模型是重點(diǎn)。2. 選型與骨架SWT 項(xiàng)目里為什么是它最小可跑代碼怎么寫2.1 三條路的技術(shù)賬SWTChart、JFreeChart、JavaFX Charts在 SWT 界面里畫圖本質(zhì)是在選“誰來當(dāng)渲染基座”。JFreeChart 走的是 Java2D輸出 BufferedImage 或 ChartPanel放進(jìn) SWT 只有兩條路SWT_AWT 橋接或者把圖渲染成圖片再塞進(jìn) Label。前者在 Linux 上對(duì) GTK 與 AWT 的混用很敏感窗口嵌入、焦點(diǎn)、輸入法都容易出玄學(xué)問題后者等于放棄了所有交互鼠標(biāo)懸停、點(diǎn)擊選中、框選縮放全沒有。JavaFX Charts 能力更現(xiàn)代但意味著打包時(shí)要帶一套 JavaFX 運(yùn)行時(shí)模塊化之后還得處理 jlink 與原生庫對(duì)一個(gè)內(nèi)部工具來說偏重。SWTChart 的定位很清楚自己繼承 Canvas用 GC 直接畫坐標(biāo)軸、圖例、網(wǎng)格、系列全部是自家對(duì)象模型。好處是零橋接、零額外運(yùn)行時(shí)壞處也要認(rèn)——它沒有內(nèi)置動(dòng)畫縮放平移這類交互在核心包里要自己寫官方另有一個(gè) extensions 包提供可滾動(dòng)的圖表殼子功能才補(bǔ)齊。我一般這樣劃界靜態(tài)報(bào)表圖、實(shí)時(shí)監(jiān)控圖用核心包足夠需要鼠標(biāo)拖拽縮放、框選區(qū)間、多軸聯(lián)動(dòng)的直接上 extensions 里的可滾動(dòng)圖表別自己造輪子。維度SWTChartJFreeChartJavaFX Charts渲染基座SWT GCJava2DJavaFX 場(chǎng)景圖與 SWT 集成原生控件直接 add 到 Composite需橋接或轉(zhuǎn)圖片需獨(dú)立運(yùn)行時(shí)混用麻煩交互能力核心包較弱extensions 補(bǔ)齊縮放平移中等依賴 ChartPanel較強(qiáng)打包體積只多一個(gè) jar中等偏大上手成本低API 面窄中中高還有一條容易被忽略SWT 的 Color、Font、Image 都是需要手動(dòng)釋放的系統(tǒng)資源。SWTChart 的 API 大量接收 Color 參數(shù)如果你習(xí)慣性地new Color(display, 255, 0, 0)幾千次刷新之后就是句柄泄漏。正確姿勢(shì)是display.getSystemColor(SWT.COLOR_RED)或者自己建一個(gè)調(diào)色板單例統(tǒng)一管理退出時(shí)統(tǒng)一 dispose。這條在后面避坑章還會(huì)再提一次。2.2 最小可跑骨架四十行代碼出一張折線圖先別急著封裝把最小閉環(huán)跑通一個(gè) Shell、一個(gè) SwtChart、一條折線系列、一次 adjustRange。這段代碼我建議你直接抄進(jìn) IDE 里跑一遍后面所有參數(shù)都是在這個(gè)骨架上加。import org.eclipse.swt.SWT; import org.eclipse.swt.layout.FillLayout; import org.eclipse.swt.widgets.Display; import org.eclipse.swt.widgets.Shell; import org.eclipse.swtchart.ILineSeries; import org.eclipse.swtchart.ISeries.SeriesType; import org.eclipse.swtchart.LineStyle; import org.eclipse.swtchart.SwtChart; import org.eclipse.swtchart.ISeries; public class ChartSkeleton { public static void main(String[] args) { Display display new Display(); Shell shell new Shell(display); shell.setText(SWTChart 最小骨架); shell.setLayout(new FillLayout()); shell.setSize(880, 520); // 1. 圖表控件父容器是 shell樣式先給 NONE SwtChart chart new SwtChart(shell, SWT.NONE); // 2. 建系列類型 LINEid 一旦定下就別隨便改后面刷新要靠它找回來 ISeries raw chart.getSeriesSet().createSeries(SeriesType.LINE, cpu); ILineSeriesdouble[] series (ILineSeriesdouble[]) raw; // 3. 造數(shù)據(jù)24 個(gè)小時(shí)點(diǎn)X 必須是遞增的 double 數(shù)組 double[] x new double[24]; double[] y new double[24]; for (int i 0; i 24; i) { x[i] i; y[i] 40 25 * Math.sin(i / 3.0); } series.setXSeries(x); series.setYSeries(y); // 4. 線條樣式顏色走系統(tǒng)色板避免自建 Color 泄漏 series.setLineColor(display.getSystemColor(SWT.COLOR_DARK_CYAN)); series.setLineWidth(2); series.setLineStyle(LineStyle.SOLID); series.setSymbolType(ISeries.SymbolType.NONE); // 點(diǎn)多了必關(guān)否則畫符號(hào)畫到卡 // 5. 軸標(biāo)題與范圍 chart.getAxisSet().getXAxis(0).getTitle().setText(小時(shí)); chart.getAxisSet().getYAxis(0).getTitle().setText(負(fù)載 / %); chart.getAxisSet().adjustRange(); // 不調(diào)這句軸范圍不會(huì)跟著數(shù)據(jù)走 shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) { display.sleep(); } } display.dispose(); } }幾個(gè)關(guān)鍵點(diǎn)值得單獨(dú)說。SwtChart的構(gòu)造函數(shù)只認(rèn) Composite所以它天然能被任何布局管理器接管createSeries返回的是ISeries接口必須根據(jù)SeriesType強(qiáng)轉(zhuǎn)成ILineSeries、IBarSeries、IPieSeries轉(zhuǎn)錯(cuò)了運(yùn)行期直接 ClassCastException編譯器不會(huì)提醒你。系列 id 是字符串后續(xù)getSeriesSet().getSeries(cpu)靠它取回對(duì)象所以命名要有約束別用“series1”這種一會(huì)兒就撞車的名字。setXSeries與setYSeries分兩次調(diào)用長(zhǎng)度必須一致這是硬約束。adjustRange()是新手最容易漏的一步它按所有可見系列的數(shù)據(jù)重新算軸范圍不調(diào)用的話你會(huì)看到一條線貼著圖邊緣或者干脆在可視區(qū)外。SymbolType.NONE也建議默認(rèn)關(guān)掉符號(hào)繪制是逐點(diǎn)畫的幾千點(diǎn)以上開銷肉眼可見。注意不同發(fā)行版本的類名有差異較新版本主類是SwtChart老代碼里常見的Chart是同族兼容類常量如IMAGE_FORMAT_PNG定義在圖表主類上導(dǎo)入時(shí)以 IDE 補(bǔ)全為準(zhǔn)不要照抄網(wǎng)上的老片段。3. 坐標(biāo)軸與主題把默認(rèn)灰底圖調(diào)成能交付的樣子3.1 軸對(duì)象模型主副軸、網(wǎng)格與范圍SWTChart 的軸不是“圖表的屬性”而是一組獨(dú)立對(duì)象通過IAxisSet管理。X 軸默認(rèn)只有一條Y 軸可以創(chuàng)建多條用來做雙單位疊加——比如左軸溫度、右軸壓力。createYAxis()會(huì)返回新的IYAxis索引從 1 開始然后把這個(gè)索引塞給系列series.setYAxisId(1)。這一步順序不能反先建軸再指定否則系列還是掛在 0 號(hào)軸上。網(wǎng)格線掛在軸上而不是圖表上getGrid()拿到的對(duì)象控制該軸對(duì)應(yīng)的那組網(wǎng)格。交付級(jí)圖表里我通常把 X 軸網(wǎng)格關(guān)掉、Y 軸保留虛線視覺上干凈很多。軸的位置也有講究setPosition(AxisPosition.Secondary)能把 Y 軸挪到右側(cè)做雙軸時(shí)副軸必須挪不然兩條軸的刻度會(huì)疊在左邊糊成一團(tuán)。IAxisSet axisSet chart.getAxisSet(); // 主 X 軸范圍、標(biāo)題、刻度標(biāo)簽角度 IXAxis xAxis axisSet.getXAxis(0); xAxis.getTitle().setText(采樣時(shí)間 / s); xAxis.setRange(new Range(0, 3600)); // 固定范圍避免實(shí)時(shí)刷新時(shí)軸來回跳 xAxis.getTick().setTickLabelAngle(45); // 標(biāo)簽長(zhǎng)了必須轉(zhuǎn)否則互相壓字 xAxis.getGrid().setVisible(false); // X 向網(wǎng)格關(guān)掉 // 主 Y 軸網(wǎng)格改成虛線顏色調(diào)淺 IYAxis yAxis axisSet.getYAxis(0); yAxis.getTitle().setText(溫度 / ℃); yAxis.getGrid().setVisible(true); yAxis.getGrid().setStyle(LineStyle.DASH); yAxis.getGrid().setForeground(display.getSystemColor(SWT.COLOR_GRAY)); // 副 Y 軸右置綁定到第二個(gè)系列 IYAxis yAxis2 axisSet.createYAxis(); yAxis2.getTitle().setText(壓力 / kPa); yAxis2.setPosition(AxisPosition.Secondary); secondSeries.setYAxisId(1); axisSet.adjustRange();setRange傳的是Range對(duì)象不是兩個(gè) double這是 API 上的小門檻。實(shí)時(shí)圖里我傾向于固定范圍而不是每幀 adjustRange軸范圍一跳整張圖會(huì)“呼吸”看久了眼睛累而且刷新時(shí)重算范圍本身有開銷。固定范圍 數(shù)據(jù)裁剪是更穩(wěn)的做法超范圍的數(shù)值在系列里截掉或者畫到邊界上。刻度格式由getTick().setFormat(Format)控制參數(shù)是java.text.Format所以DecimalFormat、SimpleDateFormat都能直接塞進(jìn)去。時(shí)間軸用SimpleDateFormat(HH:mm)數(shù)值軸用DecimalFormat(#,##0.0)比默認(rèn)的科學(xué)計(jì)數(shù)法友好得多?？潭葮?biāo)簽角度 0 到 90 度之間可調(diào)超過 45 度之后標(biāo)簽會(huì)往上頂記得給底部留白。3.2 主題與配色別在業(yè)務(wù)代碼里硬編碼顏色SWTChart 內(nèi)置了主題機(jī)制setTheme(ThemeId.XXX)一次性把背景、網(wǎng)格、軸線的配色換掉枚舉里有 CLASSIC、GRAY、GRAPHITE 這幾檔風(fēng)格深色面板用 GRAPHITE淺色報(bào)表用 CLASSIC 或默認(rèn)。主題只改“骨架色”系列顏色還是得自己設(shè)所以實(shí)際項(xiàng)目里我會(huì)定義一個(gè)小調(diào)色板類把 8 到 10 個(gè)業(yè)務(wù)語義色正常、告警、嚴(yán)重、離線映射成系統(tǒng)色或一次性創(chuàng)建并復(fù)用的 Color 實(shí)例。面積圖是個(gè)例外ILineSeries打開setEnableArea(true)之后會(huì)填充曲線下方區(qū)域setAreaColor控制填充色。填充色建議帶透明度或者選很淺的色否則多條面積圖疊在一起就是災(zāi)難。柱狀圖的系列是IBarSeriessetBarColor、setBarWidth兩個(gè)參數(shù)就夠柱寬是相對(duì)值不是像素改成 0.5 會(huì)明顯變細(xì)。主題切換有個(gè)副作用它會(huì)重置部分軸與網(wǎng)格樣式。所以正確順序是先setTheme再設(shè)軸細(xì)節(jié)最后設(shè)系列樣式。我見過有人先精心調(diào)完網(wǎng)格再切主題一切回到解放前然后懷疑是 API 有 bug——其實(shí)是調(diào)用順序問題這種坑后面還會(huì)重復(fù)出現(xiàn)。// 主題先行 chart.setTheme(ThemeId.GRAPHITE); chart.setBackground(display.getSystemColor(SWT.COLOR_WHITE)); // 系列樣式后設(shè)避免被主題覆蓋 series.setLineColor(display.getSystemColor(SWT.COLOR_DARK_CYAN)); series.setLineWidth(2); series.setEnableArea(true); // 面積填充 series.setAreaColor(display.getSystemColor(SWT.COLOR_WIDGET_LIGHT_SHADOW));餅圖比較特殊它不消費(fèi)坐標(biāo)軸數(shù)據(jù)所以建完之后要把兩條軸的刻度藏掉否則圖旁邊會(huì)掛著兩條毫無意義的空軸IPieSeries pie (IPieSeries) chart.getSeriesSet().createSeries(SeriesType.PIE, share); pie.setDataVector(new double[] {35, 25, 20, 20}); pie.setVisibles(new boolean[] {true, true, true, true}); // 軸隱藏圖例保留 chart.getAxisSet().getXAxis(0).getTick().setVisible(false); chart.getAxisSet().getYAxis(0).getTick().setVisible(false); chart.getLegend().setVisible(true);setVisibles的布爾數(shù)組用來控制哪些扇區(qū)顯示配合圖例點(diǎn)擊可以實(shí)現(xiàn)“過濾某類占比”的效果這個(gè)交互自己接一下鼠標(biāo)事件就能做比重新建系列省事。餅圖的多系列疊加它支持得一般兩塊餅摞在一起會(huì)互相遮擋真要做對(duì)比就并排放兩個(gè)圖表控件。4. 實(shí)時(shí)刷新與大數(shù)據(jù)量SWT 線程模型下的三條性能紅線4.1 線程紅線只有 UI 線程能碰控件SWT 的線程模型比 Swing 更嚴(yán)格任何控件方法都必須在創(chuàng)建它的 Display 線程里調(diào)用后臺(tái)線程直接series.setYSeries(...)會(huì)拋SWTException: Invalid thread access。這條錯(cuò)誤信息很直白但真正的坑在于它有時(shí)不立刻拋——比如你只改了數(shù)據(jù)沒觸發(fā)重繪程序看著沒事等到下一次redraw()才炸堆棧還指在莫名其妙的地方。標(biāo)準(zhǔn)解法是把數(shù)據(jù)更新包進(jìn)display.asyncExec(Runnable)。asyncExec是異步投遞UI 線程空閑時(shí)執(zhí)行不會(huì)阻塞采集線程syncExec是同步等待后臺(tái)線程會(huì)一直卡到 UI 線程跑完這段代碼。兩者的選擇很清楚采集線程只負(fù)責(zé)塞數(shù)據(jù)永遠(yuǎn)用 asyncExec如果后臺(tái)線程需要等 UI 更新完才能繼續(xù)比如要讀回控件狀態(tài)才用 syncExec。反過來說如果 UI 線程里調(diào)用 syncExec而那個(gè) Runnable 又在等 UI 線程就是自己等自己直接死鎖。這種死鎖在日志里表現(xiàn)為界面整個(gè)凍住、CPU 占用為 0非常難查。// 采集線程只往緩沖里寫不碰任何控件 new Thread(() - { while (running) { double value readSensor(); // 假設(shè)這是你的數(shù)據(jù)源 synchronized (bufferLock) { ringBuffer.add(value); // 環(huán)形緩沖容量固定 } try { Thread.sleep(20); // 50Hz 采樣 } catch (InterruptedException e) { Thread.currentThread().interrupt(); return; } } }, sampler).start(); // UI 線程定時(shí)把緩沖快照刷進(jìn)圖表 display.timerExec(200, new Runnable() { Override public void run() { if (chart.isDisposed()) { return; } double[] snapshot; synchronized (bufferLock) { snapshot ringBuffer.toArray(); // 一次性拷貝縮短持鎖時(shí)間 } series.setYSeries(snapshot); chart.redraw(); display.timerExec(200, this); // 自我重排形成固定節(jié)奏 } });4.2 刷新節(jié)奏別讓每個(gè)數(shù)據(jù)點(diǎn)都觸發(fā)重繪50Hz 采樣不等于 50Hz 重繪。redraw()會(huì)走一遍完整的繪制流程清背景、畫網(wǎng)格、畫軸、畫系列、畫圖例幾萬個(gè)像素操作一秒鐘調(diào)五十次CPU 單核直接吃滿。經(jīng)驗(yàn)值是 5 到 10Hz 的界面刷新就足夠肉眼流暢也就是 100 到 200 毫秒一次timerExec正是干這個(gè)的它比Thread.sleep循環(huán)穩(wěn)也不會(huì)因?yàn)楫惓０讯〞r(shí)鏈斷掉。setYSeries每次都會(huì)拷貝一份數(shù)組所以刷新時(shí)傳的是快照而不是緩沖引用避免采集線程在繪制過程中改數(shù)據(jù)導(dǎo)致畫到一半內(nèi)容變了。這個(gè)“快照”動(dòng)作要在鎖里完成出了鎖再調(diào)控件方法把持鎖時(shí)間壓到最短。還有一個(gè)隱形開銷是adjustRange()。它要遍歷所有系列求極值數(shù)據(jù)量大時(shí)不是常數(shù)時(shí)間。實(shí)時(shí)圖里我通常固定范圍只在用戶點(diǎn)“自適應(yīng)”按鈕時(shí)調(diào)一次如果確實(shí)需要跟隨把頻率降到 1Hz 以內(nèi)別跟著每次刷新走。4.3 大數(shù)據(jù)量降采樣與繪制開關(guān)幾千點(diǎn)以內(nèi)SWTChart 基本無壓力上到幾萬點(diǎn)就能明顯感覺到窗口拖動(dòng)時(shí)的遲滯十萬點(diǎn)以上如果不做處理鼠標(biāo)劃過都會(huì)卡?？捎玫氖侄伟葱詢r(jià)比排序關(guān)掉符號(hào)繪制SymbolType.NONE、關(guān)掉系列抗鋸齒、關(guān)掉不需要的網(wǎng)格、把線寬降到 1、用降采樣把點(diǎn)數(shù)壓到可視寬度的兩倍以內(nèi)。降采樣最簡(jiǎn)單的做法是等間隔抽稀但會(huì)丟掉尖峰。監(jiān)控場(chǎng)景我更常用的是“分段極值法”把數(shù)據(jù)按像素寬度分段每段保留最大值和最小值兩個(gè)點(diǎn)這樣毛刺不會(huì)消失視覺上也不失真。數(shù)據(jù)點(diǎn)數(shù)建議處理說明 5k直接繪關(guān)閉符號(hào)大多數(shù)監(jiān)控夠用5k ~ 50k抽稀到屏幕寬度的 2 倍每像素兩三個(gè)點(diǎn)足夠 50k分段極值 關(guān)閉網(wǎng)格與抗鋸齒保留尖峰犧牲平滑需要縮放平移換 extensions 的可滾動(dòng)圖表它內(nèi)部做了視口裁剪抗鋸齒這件事有點(diǎn)看版本部分版本在圖表級(jí)提供setAntialias開關(guān)沒有的話就在主題里找對(duì)應(yīng)項(xiàng)或者接受默認(rèn)。判斷方法很簡(jiǎn)單畫一萬個(gè)點(diǎn)拖動(dòng)窗口看是否掉幀掉了就逐個(gè)關(guān)開關(guān)做對(duì)比一次只改一個(gè)變量這種排查方式比猜快得多。5. 避坑與排查五個(gè)讓我返工的細(xì)節(jié)5.1 Invalid thread access 出現(xiàn)在“看起來是 UI 線程”的地方現(xiàn)象定時(shí)器里更新圖表沒問題換成消息回調(diào)就偶發(fā)崩堆棧指向setYSeries。原因回調(diào)來自網(wǎng)絡(luò)或串口線程不是創(chuàng)建 Display 的那個(gè)線程。解決所有跨線程更新統(tǒng)一走display.asyncExec并且封裝成一個(gè)UiExec.run(Runnable)工具方法業(yè)務(wù)代碼不許直接調(diào)控件。判斷當(dāng)前線程是否 UI 線程用Display.getCurrent() ! null但別拿它當(dāng)分支邏輯直接投遞更省心。5.2 createSeries 強(qiáng)轉(zhuǎn)類型失敗現(xiàn)象ClassCastException提示LineSeries cannot be cast to BarSeries。原因SeriesType和強(qiáng)轉(zhuǎn)目標(biāo)不一致或者復(fù)用了一個(gè)已被其他類型占用的 id。解決系列 id 與類型一一對(duì)應(yīng)命名上加前綴比如line_cpu、bar_disk建系列時(shí)立刻強(qiáng)轉(zhuǎn)并保存到成員變量不要每次用的時(shí)候從 SeriesSet 里取出來再?gòu)?qiáng)轉(zhuǎn)。5.3 數(shù)據(jù)變了圖卻紋絲不動(dòng)現(xiàn)象日志打印數(shù)據(jù)是對(duì)的界面還是老曲線。原因有三層按概率排一是忘了redraw()二是沒調(diào)adjustRange()新數(shù)據(jù)落在軸范圍外看不見三是定時(shí)鏈斷了timerExec拋出異常后沒有重新排期。解決刷新方法里按setYSeries → adjustRange → redraw三件套固定順序?qū)憈imerExec外面包 try-catch 并在 finally 里重排。5.4 跑一晚上內(nèi)存漲了幾百兆現(xiàn)象長(zhǎng)時(shí)間運(yùn)行后內(nèi)存持續(xù)上漲GC 后也降不下來。原因循環(huán)里new Color(display, r, g, b)、new Font(...)、new Image(...)沒有 disposeSWT 資源不進(jìn) Java 堆只進(jìn) Native 句柄。解決顏色字體做常量或單例隨圖表控件一起在dispose時(shí)釋放用display.getSystemColor盡量替代自建 Color。血淚經(jīng)驗(yàn)是這類泄漏不看堆快照要看系統(tǒng)句柄數(shù)。5.5 導(dǎo)出的 PNG 是空白或者被裁掉一半現(xiàn)象界面上好好的save出來的圖空白、分辨率不對(duì)或者右邊緣缺一塊。原因?qū)С鰰r(shí)機(jī)太早控件還沒完成布局拿到的 bounds 是 0 或者舊尺寸也可能是把 save 放在了非 UI 線程。解決導(dǎo)出前先chart.layout()或者等paint事件走完在 UI 線程里調(diào)用需要固定尺寸就用帶 Rectangle 參數(shù)的重載顯式指定寬高別依賴控件當(dāng)前大小。提示SWT 原生庫加載失敗no swt-gtk in java.library.path跟圖表 API 無關(guān)是運(yùn)行環(huán)境缺平臺(tái)依賴先在最小空窗口上驗(yàn)證 SWT 本身能起來再排查圖表代碼能省一半時(shí)間。6. 導(dǎo)出與封裝一個(gè)能復(fù)用的圖表工廠外加兩個(gè)導(dǎo)出參數(shù)圖表代碼寫到第三個(gè)界面就開始重復(fù)了軸標(biāo)題、角度、網(wǎng)格、系列樣式每次抄一遍。我一般收口成一個(gè)工廠類把“圖表骨架”和“系列樣式”分開工廠負(fù)責(zé)建控件、設(shè)主題、設(shè)軸加系列的方法只負(fù)責(zé)顏色、線寬、符號(hào)。這樣換主題只改一處加新圖只寫兩行。public final class ChartFactory { private ChartFactory() {} /** 統(tǒng)一骨架主題、軸標(biāo)題、標(biāo)簽角度、網(wǎng)格 */ public static SwtChart lineChart(Composite parent, String xTitle, String yTitle) { SwtChart chart new SwtChart(parent, SWT.NONE); chart.setTheme(ThemeId.GRAPHITE); chart.getAxisSet().getXAxis(0).getTitle().setText(xTitle); chart.getAxisSet().getYAxis(0).getTitle().setText(yTitle); chart.getAxisSet().getXAxis(0).getTick().setTickLabelAngle(45); chart.getAxisSet().getXAxis(0).getGrid().setVisible(false); chart.getAxisSet().getYAxis(0).getGrid().setStyle(LineStyle.DASH); return chart; } /** 加一條折線顏色由調(diào)用方傳避免工廠里硬編碼業(yè)務(wù)語義 */ public static ILineSeriesdouble[] addLine(SwtChart chart, String id, Color color, int width) { ILineSeriesdouble[] s (ILineSeriesdouble[]) chart.getSeriesSet().createSeries(SeriesType.LINE, id); s.setLineColor(color); s.setLineWidth(width); s.setSymbolType(ISeries.SymbolType.NONE); return s; } }導(dǎo)出這段有兩個(gè)參數(shù)值得掰開說。第一個(gè)是格式常量IMAGE_FORMAT_PNG、IMAGE_FORMAT_JPEG、IMAGE_FORMAT_BMP三選一PNG 無損適合貼文檔JPEG 體積小但曲線邊緣會(huì)有壓縮噪點(diǎn)我不建議用。第二個(gè)是尺寸不傳尺寸就按控件當(dāng)前像素導(dǎo)出高分屏上會(huì)得到一張很大的圖插進(jìn) Word 直接超頁傳一個(gè)固定Rectangle能讓所有導(dǎo)出圖尺寸一致報(bào)告排版省事。// UI 線程中調(diào)用先布局再按固定尺寸導(dǎo)出 chart.layout(); Rectangle bounds new Rectangle(0, 0, 1600, 900); chart.save(/data/report/cpu-trend.png, SwtChart.IMAGE_FORMAT_PNG, bounds);打印走Printer思路一樣先在 UI 線程里把圖表畫到打印 GC 上再printer.print()別忘了在finally里printer.dispose()——打印機(jī)對(duì)象同樣是 SWT 資源漏掉一次就少一個(gè)句柄。封裝完之后我給自己定了個(gè)規(guī)矩任何新圖表先跑最小骨架確認(rèn)數(shù)據(jù)能出來再疊軸和主題最后才接實(shí)時(shí)刷新。跳過第一步直接寫實(shí)時(shí)邏輯出問題時(shí)你分不清是數(shù)據(jù)、軸范圍還是線程的鍋。從那以后我每次接新圖表需求都強(qiáng)制走一遍這個(gè)順序返工次數(shù)少了不止一半。這套順序和上面那幾個(gè)參數(shù)希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取