import IVisual = powerbi.extensibility.IVisual;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
//
import * as $ from "../assets/jquery.min.js";
//
import "../assets/jquery-ui.min.js";
//
(window as any).$ = $;
(window as any).jQuery = $;
import "../assets/pivot.min.js";
import "../assets/pivot.min.css";
//
import "../assets/plotly.min.js";
import "../assets/d3.js";
import "datamaps";
import "c3";
// Log Exceptions Decorator
export function logExceptions(): MethodDecorator {
return function (target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor): TypedPropertyDescriptor {
return {
value: function () {
try {
return descriptor.value.apply(this, arguments);
} catch (e) {
const debugArea = this.target.querySelector('#debugLog');
debugArea.innerHTML += `
Error: ${e}
`;
console.error(e);
throw e;
}
}
}
}
}
export class Visual implements IVisual {
private target: HTMLElement;
private inputElement: HTMLInputElement;
private dataView: powerbi.DataView;
// private chart: echarts.ECharts | null = null;
constructor(options: VisualConstructorOptions) {
this.target = options.element;
this.createUI();
}
// Applying the logExceptions decorator to the createUI method
@logExceptions()
private createUI(): void {
// Debug Log where Pivot Table will be inserted
this.target.innerHTML = `
Pivot Table.
Loading Pivot Table...
`;
// Pivot utilities
const derivers = $.pivotUtilities.derivers;
const renderers = $.extend(
$.pivotUtilities.renderers,
$.pivotUtilities.plotly_renderers,
$.pivotUtilities.d3_renderers,
$.pivotUtilities.export_renderers
);
const data = [
{ color: "blue", shape: "circle" },
{ color: "red", shape: "triangle" },
{ color: "blue", shape: "triangle" },
{ color: "red", shape: "circle" }
];
// Initialize Pivot Table
$("#debugLog").pivotUI(data, {
renderers: renderers, // Include custom renderers like Plotly, D3
cols: ["shape"], // Columns by shape
rows: ["color"], // Rows by color
rendererName: "Bar Chart", // Set the default renderer to "Bar Chart"
rendererOptions: {
// Additional options for the chart can be added here
chartType: "bar" // Set default chart type to 'bar'
}
});
}
}
< /code>
Обновление
Я помогу вам устранить эту проблему с загрузкой внешнего файла JS в мою пользовательскую визуализацию мощности.>
Подробнее здесь: https://stackoverflow.com/questions/794 ... ndefined-r