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();
        }
    }

 

现在重新刷新一下控件,结果就一样了