Power BI 系列 -自定義開發可視化控件 - 環境准備簡單Demo 1

參考文檔

https://docs.microsoft.com/zh-cn/power-bi/developer/visuals/custom-visual-develop-tutorial

步聚問題

 1.安裝Power  BI開發包時,

  npm i -g powerbi-visuals-tools

運行上面命令可能會網絡超時,

 

 NPM 的默認鏡像 國內訪問可能不穩定, 更換一下

npm config set registry https://registry.npm.taobao.org

執行上面命令

 

 2.安裝證書時, 

 輸入"pbiviz --install-cert" 第一次會生產證書

   

 

 

 再次輸入命名  pbiviz --install-cert 則可以導入證書.

 

Demo

 

 

 

 

  code .  可以的開 visual code

 . 

 

調試

直接在本機打開POWER BI  Service. 啟用自定義自視對像調試如下: 

 

 

 

 在本機  使用 pbiviz start 開始編譯visual code打開項目

神奇現在只有在visual code中修改 點東西,就可以在線刷新

 

數據綁定

 

 

 

 然后查看數據,點查看數據,顯示數據模型結構如下:

 

 

 

 

原來的更新方法

   public update(options: VisualUpdateOptions) {
        this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
        console.log('Visual update', options);
        if (this.textNode) {
            this.textNode.textContent = (this.updateCount++).toString();
        }
    }

　　

現在更新方法

var dataView: DataView = options.dataViews[0];
var x= dataView.categorical.values[0].values[0] as string;

    public update(options: VisualUpdateOptions) {
        this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);

         var  dataView: DataView = options.dataViews[0];          
         var x=  dataView.categorical.values[0].values[0] as  string;
        
      
        console.log('Visual update', options);
        if (this.textNode) {
            this.textNode.textContent = (x).toString();
        }
    }

 

現在重新刷新一下控件,結果就一樣了