# Writing a new Visualization (Experimental) ( 編寫新的可視化（實驗） ) 原文鏈接 : [http://zeppelin.apache.org/docs/0.7.2/development/writingzeppelinvisualization.html](http://zeppelin.apache.org/docs/0.7.2/development/writingzeppelinvisualization.html) 譯文鏈接 : [http://www.apache.wiki/pages/viewpage.action?pageId=10031097](http://www.apache.wiki/pages/viewpage.action?pageId=10031097) 貢獻者 : [小瑤](/display/~chenyao) [ApacheCN](/display/~apachecn) [Apache中文網](/display/~apachechina) ## 什么是 Apache zeppelin 可視化 **Apache Zeppelin** 可視化是一種可插拔的軟件包，可以在運行時通過 **Zeppelin** 中的?**Helium?**框架 加載/卸載。可視化是一個 **javascript npm** 包，用戶可以像?**notebook?**中任何其他內置的可視化一樣使用它們。 ## 它是怎么運行的？ ### 1.Load Helium package files from registry ( 從注冊表中加載 Helium 包 ) **Zeppelin** 需要知道可視化包可用。 **Zeppelin** 默認從本地注冊表（默認為 **helium/** 目錄）搜索 **Helium** 包文件。 **Helium** 包文件提供 **name** ，**artifact** 等信息。它類似于 **npm** 包中的 **package.json** 。 這是一個例子?**helium/zeppelin-example-horizontalbar.json** ``` { "type" : "VISUALIZATION", "name" : "zeppelin_horizontalbar", "description" : "Horizontal Bar chart (example)", "artifact" : "./zeppelin-examples/zeppelin-example-horizontalbar", "license" : "Apache-2.0", "icon" : "<i class='fa fa-bar-chart rotate90flipX'></i>" } ``` 查看 [創建?**helium package file**](http://zeppelin.apache.org/docs/0.7.2/development/writingzeppelinvisualization.html#3-create-helium-package-file) 部分以了解它。 ### 2.Enable packages ( 啟用包 ) 一旦 **Zeppelin** 從本地注冊表加載 **Helium** 包文件，可用的包將顯示在?**Helium menu?**中。 點擊 “**enable** ( 啟用 )” 按鈕。  ### 3.Create and load visualization bundle on the fly ( 快速創建并加載可視化包 ) 一旦啟用可視化包，**HeliumVisualizationFactory** 將創建一個 **js bundle** 。 **?js bundle** 由?**helium/visualization/load?rest api** 端點提供。 ### 4.Run visualization ( 運行可視化 ) **Zeppelin** 顯示加載的可視化的附加按鈕。用戶可以像任何其他內置可視化一樣使用。  ## Write new Visualization ( 編寫新的可視化?) ### 1.Create a npm package ( 創建一個 npm 包 ) 在新的 **Visualization** 目錄中創建一個 **[package.json](https://docs.npmjs.com/files/package.json)** 。通常，您可以在 **package.json** 中添加任何依賴項，但 **Zeppelin** 可視化包只允許兩個依賴關系：** [zeppelin-vis](https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization)** 和** [zeppelin-tabledata](https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/tabledata)** 。 下面是一個例子： ``` { "name": "zeppelin_horizontalbar", "description" : "Horizontal Bar chart", "version": "1.0.0", "main": "horizontalbar", "author": "", "license": "Apache-2.0", "dependencies": { "zeppelin-tabledata": "*", "zeppelin-vis": "*" } } ``` ### 2.Create your own visualization ( 創建你自己的可視化 ) 要創建自己的可視化，您需要創建一個 **js** 文件，并從 **[zeppelin-vis](https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization)** 包導入 **[Visualization](https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js)** 類并擴展該類。 **[zeppelin-tabledata](https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/tabledata)** 包提供了一些有用的轉換，如 **pivot** ，可以在可視化中使用。 （也可以創建自己的 **transformation**?）。 **[Visualization](https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js)**?類，有幾種方法需要 ?**override**?和 **implement**?。這是簡單的可視化，只是打印 **Hello world**。 ``` import Visualization from 'zeppelin-vis' import PassthroughTransformation from 'zeppelin-tabledata/passthrough' export default class helloworld extends Visualization { constructor(targetEl, config) { super(targetEl, config) this.passthrough = new PassthroughTransformation(config); } render(tableData) { this.targetEl.html('Hello world!') } getTransformation() { return this.passthrough } } ``` 要了解有關 **Visualization** 類的更多信息，請查看[**visualization.js**](https://github.com/apache/zeppelin/blob/master/zeppelin-web/src/app/visualization/visualization.js) 。 您可以在 [此處](https://github.com/apache/zeppelin/tree/master/zeppelin-examples/zeppelin-example-horizontalbar) 查看完整的可視化包示例。 **Zeppelin** 的內置可視化使用相同的 **API** ，因此您可以查看 **[built-in visualizations](https://github.com/apache/zeppelin/tree/master/zeppelin-web/src/app/visualization/builtins)**?作為附加示例。 ### 3.Create?**Helium package file ( 創建 Helium 包文件 )** **Helium package file**?是一個 **json** 文件，提供有關應用程序的信息。 **Json** 文件包含以下信息 ``` { "type" : "VISUALIZATION", "name" : "zeppelin_horizontalbar", "description" : "Horizontal Bar chart (example)", "license" : "Apache-2.0", "artifact" : "./zeppelin-examples/zeppelin-example-horizontalbar", "icon" : "<i class='fa fa-bar-chart rotate90flipX'></i>" } ``` #### type ( 類型 ) 創建可視化時，“**type** ( 類型 )” 應該是 “**VISUALIZATION** ( 可視化 )”。如果您對其他類型的軟件包感興趣，請查看 [**application** ( 應用程序?)](http://zeppelin.apache.org/docs/0.7.2/development/writingzeppelinapplication.html) 類型。 #### name ( 名稱 ) 可視化的名稱。應該是獨一無二的。允許?**[A-Za-z90-9_]** 。 #### description ( 描述 ) 關于可視化的簡短描述。 #### artifact 可視化 **npm** 包的位置。支持帶有版本或本地文件系統路徑的 **npm** 軟件包。 例如 當?**artifact** 存在于?**npm** 存儲庫中時 ``` artifact: "my-visualiztion@1.0.0" ``` 當?**artifact** 存在于本地文件系統中時 ``` artifact: "/path/to/my/visualization" ``` #### license ( 執照 ) 許可信息。 例如 ``` license: "Apache-2.0" ``` #### icon ( 圖標 ) 用于可視化選擇按鈕的圖標。此字段中的字符串將被呈現為 **HTML** 標記。 例如 ``` icon: "<i class='fa fa-coffee'></i>" ``` ### 4.Run in dev mode ( 以開發者模式運行 ) 將您的 **Helium** 包文件 放在本地注冊表（ **ZEPPELIN_HOME /helium**）中。運行 **Zeppelin** 。然后在可視化開發模式下運行 **zeppelin-web** 。 ``` cd zeppelin-web yarn run visdev ``` 您可以瀏覽 **localhost：9000** 。每次刷新您的瀏覽器，**Zeppelin** 將重建您的可視化并重新加載更改。