Problemas al usar la biblioteca bootstrap-tree-view en un proyecto

Hola

Soy muy nuevo en Power BI, mecanografiado, d3 y todo eso, así que por favor, sea fácil conmigo.

Estoy tratando de crear un árbol jerárquico que sea plegable y muestre todas sus subcategorías (niños)

Me las arreglé para insertar mis puntos de datos en matrices de matrices (formato JSON anidado) para que pueda mostrarse como una jerarquía

Sin embargo, quiero usar la biblioteca bootstrap-tree-view de Gijgo.com para mostrar mis datos. El árbol de casillas de verificación es exactamente el estilo que busco. Vea la imagen a continuación para ver la demostración de GijgoLos problemas que tengo son cómo implementar esta biblioteca en mi proyecto Pbiviz

Ya instalé bootsrap y jquery usando npm en la terminal

También descargué la biblioteca bootstrap-tree-view de npm usando «npm yo bootstrap-tree-view». La carpeta «bootstrap-tree-view» apareció en mi carpeta node_modules como debería ser. Vea la imagen de arriba.

De acuerdo con la parte «Primeros pasos» en https://www.npmjs.com/package/bootstrap-tree-view, debería poder usar jquery para obtener mi div. Quiero el árbol dentro y luego uso .tree({ fuente de datos: …)}

dataSource es el JSON anidado que estoy enviando a la función

No tengo idea de qué debo incluir en el archivo pbiviz.json y tampoco si necesito algún tipo de escritura para que esto funcione. Me acabo de dar por vencido en la búsqueda de la solución, así que decidí preguntar aquí

Cualquier ayuda o consejo con respecto a este problema me ayudará mucho.

Soy muy nuevo en todo esto con un poco de experiencia en mecanografiado y bibliotecas externas (primer año de informática, solo hice las cosas básicas absolutas)

tl; dr: ¿cómo puedo usar una biblioteca personalizada de arranque en un proyecto visual personalizado de Power Bi?

En la mayoría de los casos, lo que debe hacer para usar Bootstrap es instalar a través de npm, encontrar tipos a través de npm e incluir todos los archivos JS necesarios en la propiedad externalJS de pbiviz.json y también importar Bootstrap CSS como menos en estilos. menos si los tipos son requerido.

¿A qué problemas se ha enfrentado exactamente? Sería bueno si pudiera compartir su visual personalizado para comprobarlo desde nuestro lado.

Ignat Vilesov,

Ingeniero de software

Imágenes personalizadas de Microsoft Power BI

pbicvsupport@microsoft.com

Parece que no hay tipeos para el paquete de arranque que intenté usar ayer, así que decidí buscar una forma alternativa

yo descargué «npm-patternfly-bootstrap-treeview» y luego obtuve estos tipos npm i @types/bootstrap-treeview

En mi función de actualización está esta línea, que debería mostrar el árbol, de acuerdo con «Primeros pasos»

$('#tree').treeview({data: this.listToTree(filteredViewModel)})

Esto está en mi archivo visual.less

@import (less) "node_modules/bootstrap/dist/css/bootstrap.css";
@import (less) "node_modules/patternfly-bootstrap-treeview/dist/bootstrap-treeview.css";

tsconfig

"files": [
    ".api/v1.12.0/PowerBI-visuals.d.ts",
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts",
    "src/settings.ts",
    "src/visual.ts",
    "node_modules/@types/d3/index.d.ts",
    "node_modules/@types/bootstrap-treeview/index.d.ts"
  ]

Y este es mi externalJS

 "externalJS": [
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
    "node_modules/d3/d3.min.js",
    "node_modules/jquery/dist/jquery.js",
    "node_modules/patternfly-bootstrap-treeview/dist/bootstrap-treeview.min.js",

Pensé que esto era suficiente, pero cuando actualizo mi visual aparece este mensaje de error en la consola

Uncaught TypeError: Cannot read property 'fn' of undefined

No estoy seguro de lo que está pasando en este momento. Puedo darte más información si la necesitas, pensé que esto sería suficiente por ahora.

Gracias de antemano, realmente necesito que esto funcione.

Power BI crea una copia del objeto de ventana. Thios puede causar problemas con algunas bibliotecas.

¿Podría compartir el código fuente de su visual personalizado para investigar este problema?

Ignat Vilesov,

Ingeniero de software

Imágenes personalizadas de Microsoft Power BI

pbicvsupport@microsoft.com

Entradas relacionadas

Deja un comentario Cancelar respuesta