Grafana是一個美觀好用且開源的監控展示工具，包含了豐富的插件供君使用（插件庫：https://grafana.com/grafana/plugins）
一準備
1.安裝grafana，win開發在官網上下載相對應版本包，解壓，運行bin/grafana-server.exe啓動grafana，默認訪問localhost:3000即可（也可以在/conf/default.ini中修改端口號）。參考文檔在這
2.去插件庫下載一個與你需求功能相近的插件，這裏用的是diagram。
二 改頭換面
1.先把插件代碼解壓修改文件夾名稱，放入相應的路徑（windows路徑是data/plugins，linux是/var/lib/grafana/plugins)
2.打開插件代碼文件夾，打開/dist/plugin.json, 先給插件辦個身份證。grafana通過該json文件讀取插件的信息。
plugin.json裏的三個字段必須修改，分別是
- id：相當於身份證號，具備唯一性。
- type ：類型，一般有3種，panel/datasource/app。
- name ：姓名，顯示在界面上的名稱。最好也唯一，不然同一個班兩個同名同學傻傻分不清楚誰是誰。
至此，刷新頁面可以看到一個新的插件在界面中了，可以調試了，接下來就將這個插件改造成你想要的樣子。
三 怎麼改
由於資源有限而且情況允許，我是直接在插件打包好的文件/dist裏進行修改，這樣就省去了修改後重新打包的步驟。
主要關注/dist中的幾個html，js文件：
- module.js ： 插件的入口文件，指定插件導出哪個類。
- diagramcontrol.js : 這個就是導出的類，負責整個插件的生命活動，一些基礎方法可以查看grafana插件開發入門
- module.html：這個就是該插件的面板展示頁面
- 其餘的editor.html都是在grafana上我們可以編輯插件的頁面
改造無非就是在html中加入元素（有需要的話），綁定ctrl.panel的相關值，然後在diagramcontrol.js來操作這些綁定值，進而修改渲染的方法或者數據源。