在NodeJS中为PowerBI创建自定义视觉对象-“找不到名称'IVisualHost' [英] Creating a custom visual for PowerBI in NodeJS - "Cannot find name 'IVisualHost'
问题描述
我正在尝试按照本教程为Power BI创建自定义视觉: https://docs.microsoft.com/en-us/power-bi/developer/custom-visual-develop-tutorial
I'm trying to follow this tutorial on creating a custom visual for Power BI : https://docs.microsoft.com/en-us/power-bi/developer/custom-visual-develop-tutorial
当我连接到Power BI Cloud时,使用默认代码的测试可以正常工作,如教程的测试自定义视觉效果步骤8中所示。
The test with the default code works properly when I connect to Power BI Cloud, as shown in the part"Testing the custom visual" step 8, of the tutorial.
问题是,当我尝试在visual.ts文件中添加类级别的属性时(在删除了本教程的开发视觉元素的步骤2中指示的代码之后),我得到了
The problem is when I try to add the class-level properties in the visual.ts file (after I deleted the code as indicated in the part "Developing the visual elements" step 2 of the tutorial ), I get the error "Cannot find name 'IVisualHost'".
"use strict";
import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import { VisualSettings } from "./settings";
export class Visual implements IVisual {
private host: IVisualHost; ------------ the first error is here
private svg: d3.Selection<SVGElement>;
private container: d3.Selection<SVGElement>;
private circle: d3.Selection<SVGElement>;
private textValue: d3.Selection<SVGElement>;
private textLabel: d3.Selection<SVGElement>;
constructor(options: VisualConstructorOptions) {
this.svg = d3.select(options.element) ----------- the second error is here
.append('svg')
.classed('circleCard', true);
this.container = this.svg.append("g")
.classed('container', true);
this.circle = this.container.append("circle")
.classed('circle', true);
this.textValue = this.container.append("text")
.classed("textValue", true);
this.textLabel = this.container.append("text")
.classed("textLabel", true);
}
我在同一visual.ts文件中也遇到此其他错误:'d3 '表示UMD全局,但当前文件是一个模块。考虑添加导入。我使用以下命令导入了库: npm i d3@3.5.5 --save和 npm i @ types / d3 @ 3.5
I also have this other error in the same visual.ts file : 'd3' refers to a UMD global, but the current file is a module. Consider adding an import instead. I imported the library with the commands : "npm i d3@3.5.5 --save" and "npm i @types/d3@3.5"
这是我的pbiviz .json文件:
This is my pbiviz.json file :
{
"visual": {
"name": "visual9basic",
"displayName": "visual9basic",
"guid": "visual9basic252E75AF09794C8F8CE14414674FBC3E",
"visualClassName": "Visual",
"version": "1.0.0",
"description": "",
"supportUrl": "",
"gitHubUrl": ""
},
"apiVersion": "2.6.0",
"author": {
"name": "",
"email": ""
},
"assets": {
"icon": "assets/icon.png"
},
"externalJS": [
"node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
"node_modules/d3/d3.min.js"
],
"style": "style/visual.less",
"capabilities": "capabilities.json",
"dependencies": null,
"stringResources": []
}
这是我的tsconfig.json:
Here is my tsconfig.json :
{
"compilerOptions": {
"allowJs": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"sourceMap": true,
"outDir": "./.tmp/build/",
"moduleResolution": "node",
"declaration": true,
"lib": [
"es2015",
"dom"
]
},
"files": [
"node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
"./src/visual.ts",
"./src/settings.ts",
]
}
推荐答案
在Visual.ts中,尝试添加以下导入:
In Visual.ts, try adding the following import:
import IVisualHost = powerbi.extensibility.IVisualHost;
它应该处理丢失的接口引用。
对于d3参考,您可以尝试
It should take care of the missing interface reference. For the d3 reference you can try
import * as d3 from "d3";
希望这会有所帮助。我还没有亲自完成本教程。
Hope this helps. I haven't worked through the tutorial myself yet.
这篇关于在NodeJS中为PowerBI创建自定义视觉对象-“找不到名称'IVisualHost'的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!