我正在使用 typescript、d3js 和 node Calendarjs 库开发我的第一个 power bi 自定义视觉对象,该库基于 Microsoft 提供的示例,您可以使用 power-shell 下载。
我面临的问题是,使用以下一堆代码,我总是在 power bi 在线平台中得到一个空白图表,而且我什至没有得到我正在绘制的非常基本的预期图表:< /p>
"use strict";
var Calendar = require('calendarjs');
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 IVisualHost = powerbi.extensibility.IVisualHost;
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
import { VisualSettings } from "./settings";
export class Visual implements IVisual {
private target: HTMLElement;
private updateCount: number;
private settings: VisualSettings;
private textNode: Text;
constructor(options: VisualConstructorOptions) {
console.log('Visual constructor', options);
this.target = options.element;
this.updateCount = 0;
if (document) {
var table = d3.select('body').append('table')
.attr("style", "margin-left: 250px;"),
thead = table.append("thead"),
tbody = table.append("tbody");
var cal = new Calendar(2021, 0);
var weeks = cal.monthDays();
//var weeks = cal.weeks;
weeks.forEach(function (week) {
this.table
.append('tr')
.selectAll('td')
.data(week)
.enter()
.append('td')
.text(function (d) {
return d > 0 ? d : "";
})
});
}
}
public update(options: VisualUpdateOptions) {
}
}
注意:我知道有几个可以免费使用的日历视图图表,但最后我们希望拥有我们自己的日历视图,其中包含我们需要的自定义功能。
提前致谢。