內(nèi)容來源于@什么值得買APP，觀點僅代表作者本人 ｜作者：nnkn
2022-08-01 11:22:33 25點贊 161收藏 34評論
炎炎夏日，白天出不去運動，干嘛呢？當然是設(shè)計表盤啦！
之前介紹有用M2表盤自定義表盤的辦法
好處是簡單方便，別人設(shè)計的表盤可以直接拿來用，不管是不是相同機型，但是存在以下問題：
為此，我專門問了作者，后續(xù)升級有沒有可能增加這些支持，作者說他也沒辦法
總的說來M2是真的強，但是作為強迫癥的我，對身體電量又相當?shù)挠信d趣，所以找到另一個直接可以在線制作表盤的工具。
他不但支持我想要的天氣、身體電量和壓力等新特性，天氣還支持OWM源，能自定義字體，以及各種動畫，功能強大。
但是由于分辨率原因，不同機型的表盤不一定通用，有時候看到好的表盤，只能自己畫一個。
非常非常非常多，同機型可以直接用。
網(wǎng)站地址：https://garmin.watchfacebuilder.com/
主頁上有論壇地址，作者很熱情，基本有問必答
首先必須注冊，不注冊也能設(shè)計表盤，但是好像保存不了，我是直接就注冊了的，但在論壇看到有人沒注冊直接設(shè)計了，結(jié)果保存不了，導(dǎo)致心血白費。
1. 選擇機型
我是FR255SM，就選了圖上這個，下方Watchface template是選擇初始模板，隨意吧，選了反正可以刪的
2. 設(shè)計界面
最上面time那排就是添加各種元素了
3. 添加時間
添加后
不懂的可以點擊后面的綠色問號顯示幫助
有選擇框的（Color，X position，Y position）可以勾上以動態(tài)顯示數(shù)據(jù)，比如不同數(shù)值顯示不同顏色。
4. 添加數(shù)據(jù)項
能有的都有了，看右邊的進度條，那是相當?shù)亩喟。?/span>
搜索添加身體電量
5. 根據(jù)數(shù)據(jù)項動態(tài)調(diào)整的圖像
6. 添加圖片、線條、弧線、蒙版、動態(tài)圖片
7. 左上角ALL/HIGH/LOW/DND的釋義
對應(yīng)表盤元素設(shè)置里的Hide widget in：
High power mode
Low power/AOD mode
DND mode
其中，
High power mode指抬腕亮屏那幾秒，
Low power/AOD mode是指息屏或者手動亮屏的時候，就是AOD階段，非活動期間大部分都處于這個階段，
DND開勿擾的時候（作者開發(fā)中）。
基于此，可以將秒數(shù)這類時刻變化的元素設(shè)置成High power mode隱藏，可以節(jié)省時間，狠一點的可以直接設(shè)計出來息屏一個表盤，亮屏一個表盤。
8. 配置進度條隨數(shù)據(jù)數(shù)值變化而改變顏色實例
目標：身體電量條的顏色，隨身體電量的變小，逐漸變色：綠色→黃色→橙色→紅色。
如圖，Goal里添加一個line shape，調(diào)整出想要的形狀（2），左側(cè)屬性面板里的Value找到Body Battery，選中后自動變成代碼（ds330），下面Completed segment Color前的勾打上，填入以下代碼：
(ds330)<=25?0xff0000:(ds330)<=50?0xff5555:(ds330)<=75?0xffff00:0x00ff00
簡單解釋：
格式為：表達式?A:B
意思是表達式成立，則為A，不成立，則執(zhí)行B
(ds330)<=75?0xffff00:0x00ff00
表示身體電量小于等于75，則顏色為0xffff00，否則為0x00ff00
預(yù)覽不顯示顏色，需要生成表盤后到手表上看。但他會檢查你的代碼是否正確
有兩個辦法生成字體，一是他提供在線工具自動生成，另一個就是自己安裝工具生成
在線生成字體文件地址：https://garmin.watchfacebuilder.com/bitmap-font-online-generator/
在線生成字體有一定的BUG，折騰了我好幾天才搞定他的奇怪算法，如果有字體行家在的話，應(yīng)該是一看就懂的，我是外行，請不吝賜教。
功能預(yù)覽
一、導(dǎo)入自定義字體
兩個辦法
Other Font--Load Font ,選擇字體文件或者輸入字體鏈接
直接把字體拖進去
PS.部分字體識別但不顯示
二、計算字體大小
而Line height直接關(guān)系到字體成敗，需要不停嘗試才可以，具體看后面的編輯位圖
三、生成位圖
點Generate
四、編輯位圖
生成如下圖，點擊EDIT編輯
下面這圖是Line height太大了（25 * 160%=40），字體上面留太大黑邊
合理調(diào)整后的結(jié)果
此時Line height為120%，后續(xù)調(diào)整字體大小一般都不會變了。
盡量讓字符上下居中，記錄Y軸偏移值（-12）
正常的時候，其它字符的偏移量不用一一去改了，一般都是一樣的，但也會出現(xiàn)個別情況，得每個字符都改
五、生成文件
點擊Build
適當調(diào)整，保存文件
六、編輯FNT文件
用VSCode打開FNT文件，中鍵多選，修改yoffset為-12
保存關(guān)閉，修改完成
下載地址
http://www.angelcode.com/products/bmfont/
設(shè)置字體
導(dǎo)出設(shè)置
導(dǎo)入指定字符串
注意：文件編碼為UTF-8-BOM
生成的字體導(dǎo)入后預(yù)覽
簡直就是一模一樣opposans18pxopposans40px
直接把兩個文件（fnt,png）同時選中，拖到編輯器的字體界面上就可以了
點擊右上角的Build，就會自動編譯上傳生成表盤文件
作者有寫個工具，其實就是把下面手動安裝的過程簡單化了，但是我使用他的工具未安裝成功過，后來全用的手動安裝，主頁上有工具地址，這里不能發(fā)。
PS.發(fā)現(xiàn)作者更新了，不知道現(xiàn)在能不能用
月份不顯示中文
作者是說把本地化那里找到對應(yīng)的語言，填寫完了就可以了
但是我一直沒摸索出正確的方向，填了也沒用，不顯示中文，包括字體里把這些字都做出來也沒用，后來用了笨辦法，直接改英文的釋義，一次成功。同理，其它想顯示中文的也可以使用這個辦法。
目前有個bug，object里添加線條時，如果選了上方的line，當線條寬度設(shè)置成1px時，表盤上實際并不會顯示，或者顯示出問題，暫時可以用下面的line代替。
這個工具比較繁瑣，適合那些愿意折騰的人。
最后，希望大家都能用到自己滿意的表盤。
作者聲明本文無利益相關(guān)，歡迎值友理性交流，和諧討論～
們經(jīng)常需要制作各種報表，如果想要讓自己的報表顯得更加的高大上，現(xiàn)在可以借助很多免費在線工具直接進行制作。
儀表盤圖表——圖表秀
為了更好地反映預(yù)算完成率、收入增長率等指標, 高手們經(jīng)常用一些儀表盤式圖表來簡單直觀進行表達。不過Excel并沒有內(nèi)置儀表盤圖表，手動制作非常麻煩，現(xiàn)在我們借助圖表秀即可輕松制作。
打開https://www.tubiaoxiu.com，按提示注冊一個用戶，登錄后點擊“立即體驗”，進入“我的資源”頁面后點擊“新建圖表”，在右側(cè)窗格選擇“儀表盤”。接著點擊“屬性”，將儀表盤名稱更改為“A產(chǎn)品完成率”，返回儀表盤主界面點擊“編輯數(shù)據(jù)”，然后按照自己的實際數(shù)據(jù)輸入即可快速生成儀表盤圖表了（圖1）。
圖1 生成儀表盤
完成圖表的生成后在圖片上右擊選擇“圖片另存為”，將其保存到本地。如果有多個數(shù)據(jù)需要生成，重復(fù)上述操作，然后將下載的圖片依次插入到Excel中即可完成儀表盤圖表的制作了（圖2）。
圖2 完成圖表
當然還可以選擇其他在線圖表，對于類似餅圖、折線圖這些常規(guī)圖表，我們還可以將自己數(shù)據(jù)上傳到網(wǎng)站，并且網(wǎng)站會使用使用數(shù)據(jù)匹配功能自動生成圖表，同樣更改數(shù)據(jù)后可以快速獲得相應(yīng)的圖表圖片。
象形柱圖——Ehartsjs
在Excel中為了更直觀地表示比例的不同，一些專業(yè)的圖表經(jīng)常使用水量這些象形圖標來表示，當然這些圖表在Excel中手動制作起來太復(fù)雜，現(xiàn)在通過Ehartsjs提供的免費服務(wù)可以輕松實現(xiàn)。
打開https://echarts.apache.org/examples/zh/index.html#chart-type-pictorialBar，這里可以看到網(wǎng)站已經(jīng)內(nèi)置很多圖表示例，在左側(cè)列表切換到“象形柱圖”，根據(jù)自己的實際需要選擇合適的象形圖。比如現(xiàn)在我們需要制作一份某健身館女性會員的情況統(tǒng)計表（圖3）。
圖3 示例數(shù)據(jù)
對于這類數(shù)據(jù)的比較，現(xiàn)在可以選擇其中的“Water Content”圖表模板進行表示，按提示點擊即可選取（圖4）。
圖4 選擇模板
在打開的頁面中可以看到一個美女圖標結(jié)合水量圖標表示的象形柱圖，這里根據(jù)實際數(shù)據(jù)修改代碼生成需要的圖片即可。為了方便圖表顯示，這里將最大刻度顯示為100，在左側(cè)代碼窗格找到“var bodyMax=150;”，將其中的“150”更改為“100”。繼續(xù)找到“data: ['a', 'b', 'c', 'd'，'e'],”，將其中的“e”去除（代碼表示顯示的數(shù)據(jù)有5個，我們這里只需4個數(shù)據(jù)）。找到“value: 34,symbol: symbols[4]”代碼（對應(yīng)數(shù)據(jù)e）將其刪除，然后根據(jù)自己的實際百分比數(shù)據(jù)，對其中0→3的數(shù)據(jù)代碼中的“value:”值進行更改。最后點擊頁面的“運行”，這樣就可以獲得我們需要的象形柱圖了。Ehartsjs實際上就是一個HTML5圖片庫，它是借助JS代碼實現(xiàn)圖片生成，熟悉代碼的朋友可以按自己的需要進行更多的修改（圖5）。
圖5 生成象形柱圖
圖表預(yù)覽滿意后在圖片上右擊選擇“圖片另存為”，可以將其保存為透明背景的圖片。這些圖片可以插入PPT中，結(jié)合自己的數(shù)據(jù)生成個性的象形柱圖（圖6）。
圖6 象形柱圖使用
小提示：
https://github.com/d3/d3/wiki/Gallery也提供類似的服務(wù)，熟悉JS代碼朋友可以到這個網(wǎng)站使用類似模板制作在線圖表。
圖表+數(shù)據(jù)分析——BDP個人版
如果你在日常工作中除了圖表制作還要涉及到數(shù)據(jù)分析，那么我們就可以使用BDP個人版，它不僅可以在線生成各種圖表，而且還可以對數(shù)據(jù)進行分析和統(tǒng)計。比如有如下一張數(shù)據(jù)統(tǒng)計表，現(xiàn)在將其導(dǎo)入BDP個人版就可以快速生成各種匯總報表（圖7）。
圖7 示例數(shù)據(jù)
打開https://me.bdp.cn/index.html注冊并登錄后，點擊“上傳數(shù)據(jù)”，按提示將上述文件上傳。點擊“新建圖表”，現(xiàn)在就可以按自己的需要生成各種圖表。比如現(xiàn)在需要查看用戶注冊來源和新增訂單量的關(guān)系，并且使用雷達圖表進行分析。在左側(cè)字段列表將“用戶注冊數(shù)據(jù)”字段移動到“維度”，將“新增訂單量”字段拖到“數(shù)值”，在右側(cè)面板選擇“雷達圖”即可（圖8）。
圖8 生成圖表
可以看到不僅快速生成圖表，而且網(wǎng)站還提供各種統(tǒng)計功能，如極值、平均值等。利用上述方法還可以生成各種自己需要的報表，并且網(wǎng)站會給出數(shù)據(jù)的詳細分析，非常適合需要借助數(shù)據(jù)運營的公司進行參考（圖9）。
圖9生成各種圖表和分析
作工作匯報類PPT時，如果涉及產(chǎn)品的市場占有率、任務(wù)完成率等指標，大家經(jīng)常會使用餅圖來表述。不過PowerPoint內(nèi)置的餅圖比較“呆板”，既沒有明顯的百分比指示，也無動態(tài)效果。如果你覺得創(chuàng)意不足，那么可以借助PowerPoint 2019制作一個表盤圖表，在實際演示時指針會按順時針方向旋轉(zhuǎn)，同時表盤區(qū)域會隨著指針旋轉(zhuǎn)自動填充指定的顏色（圖1）。
（圖1）
文| 平淡
○ 1. 制作表盤
圖1中的表盤部分是一個半圓圖表，可以通過插入圓環(huán)圖來實現(xiàn)。新建幻燈片1，依次點擊“插入→圖表→餅圖→圓環(huán)圖”，插入一個圓環(huán)圖。接著右擊該圓環(huán)圖并選擇“編輯數(shù)據(jù)”，在出現(xiàn)的數(shù)據(jù)源編輯窗口中只保留A、B兩列數(shù)據(jù)，其余均刪除。一個表盤為360°，為了便于使用圓環(huán)表示占比，在A2?A21單元格中分別輸入數(shù)字1?20（即將圓環(huán)20等分），B2?B21單元格中均輸入數(shù)字10（保證每個圓環(huán)的大小一致），這樣每個圓環(huán)可以表示10%占比（因為是半圓圖表）（圖2）。如果需要其他占比，那就修改A列中的數(shù)字，如修改為1?40，這樣每個圓環(huán)可以表示5%占比，以此類推。
（圖2）
○ 2. 編輯表盤
依次點擊“插入→形狀→直線”，在表盤的水平直徑區(qū)域插入一條直線，作為水平分割的參考線。接著右擊圓環(huán)圖并選擇“設(shè)置圖表格式”，在右側(cè)的窗格中切換到“系列選項”，將“第一扇區(qū)起始角度”設(shè)置為90°、“圓環(huán)圖分離程度”設(shè)置為5%，使得插入的直線正好均分圓環(huán)圖的上下部分（圖3）。
（圖3）
○ 3. 提取表盤素材
復(fù)制整個圖表，接著新建幻燈片2，依次點擊“開始→粘貼→選擇性粘貼→圖片（SVG）”，將圖表粘貼為SVG圖片。然后右擊該圖片并選擇“轉(zhuǎn)換為形狀”，再點擊“組合→取消組合”，僅保留上半部分的白色圓環(huán)區(qū)域形狀，其他均刪除（圖4）。
（圖4）
○ 4. 制作指針
插入一個圓形和三角形，調(diào)整三角形的形狀和大小，將其和圓形組合在一起作為指針1使用。復(fù)制指針1一份為指針2，旋轉(zhuǎn)指針2的角度和位置，使得指針1和指針2的圓形部分重合在一起，并左右對稱擺放，然后將它們組合為指針組合1。選中指針組合1，依次點擊“動畫→添加動畫→更多強調(diào)效果→陀螺旋”，為其添加陀螺旋動畫。選中該陀螺旋動畫，點擊“動畫窗格”，在右側(cè)的窗格中展開“效果”選項卡，點擊“數(shù)量”的下拉箭頭并選擇“自定義”，然后在輸入框中設(shè)置旋轉(zhuǎn)角度。比如本例的占比是70%，在半圓中180°對應(yīng)100% ，70%對應(yīng)的角度就是“180/100*70=126°”，方向選擇“順時針”（圖5）。
（圖5）
○ 5. 為第一個圓環(huán)設(shè)置顏色填充動畫
選中圖5左側(cè)的第1個白色圓環(huán)，依次點擊“動畫→添加動畫→強調(diào)→顏色填充→填充橙色”，添加一個填充橙色的動畫。接著選中指針組合1的陀螺旋動畫，將“持續(xù)時間”設(shè)置為7秒（這樣指針在每個圓環(huán)停留的時間大約為1秒），再選中填充橙色的動畫，將“開始時間”設(shè)置為“與上一動畫同時”、“持續(xù)時間”設(shè)置為1秒，這樣指針旋轉(zhuǎn)時，圓環(huán)顏色會同步填充為橙色（圖6）。
（圖6）
○ 6. 為其他圓環(huán)設(shè)置顏色填充動畫
再次選中填充橙色的動畫，點擊“動畫刷”，將此動畫效果分別應(yīng)用到第2?第7個圓環(huán)。然后選中第2個圓環(huán)的填充動畫，將“延遲”設(shè)置為1秒。同上，將第3個圓環(huán)的“延遲”設(shè)置為2秒，第4個圓環(huán)的“延遲”設(shè)置為3秒，以此類推（圖7）。
（圖7）
這樣在播放幻燈片時隨著指針組合1的旋轉(zhuǎn)，每個圓環(huán)會被依次填充上橙色，指針最終停止在70%的位置。
○ 7. 美化操作
選中指針組合1右半部分的黃色指針，將填充顏色設(shè)置為“無”，再根據(jù)幻燈片主題添加文案等素材即可。
○ 8. 更多百分比數(shù)值的設(shè)置
假如占比發(fā)生了變化，比如是75%。這時可以先復(fù)制第8個圓環(huán)一份為圓環(huán)11，將它的顏色填充為幻燈片背景，再將圓環(huán)11復(fù)制為圖片1并裁剪為1/2大小，將其覆蓋在第8個圓環(huán)的后1/2區(qū)域。然后參照前文的方法設(shè)置組合指針1的旋轉(zhuǎn)角度，并為第8個圓環(huán)添加橙色填充動畫。這樣在播放幻燈片的時候，指針停止在第8個圓環(huán)的1/2位置，同時由于圖片1的遮擋，它的后1/2區(qū)域橙色填充動畫觀眾是看不到的，實現(xiàn)了展示75%占比的效果（圖8）。其他占比的操作類似，大家可以根據(jù)實際需要自行嘗試。CF
（圖8）
原文刊登于2022 年 10 月 1 日出版《電腦愛好者》第 19 期