在 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 中所示的代码之后)，我得到了错误找不到名称 'IVisualHost'".

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屋！