Un usuario Pregunto ✅
vichus
He creado un gráfico circular siguiendo el tutorial. Estoy buscando darle color usando la interfaz IcolorPalette. Estoy siguiendo los mismos pasos que el tutorial, pero parece que no funciona. ¿Alguien puede ayudar?
Aquí está mi código:
módulo powerbi.extensibilidad.visual {
«uso estricto»;
interfaz Datos
{
cantidad: número;
categoría: cuerda;
color:cuerda;
}
interfaz PieChartArc {
puntos de datos:Datos[];
}
función visualTransform(opciones:VisualUpdateOptions,anfitrión:IVisualHost) : PieChartArc
{
dejar dataViews=opciones.dataViews;
dejar viewModel:PieChartArc=
{
puntos de datos:[]
};
si (!dataViews
|| !dataViews[0]
|| !dataViews[0].categórico
|| !dataViews[0].categórico.categorias
|| !dataViews[0].categórico.categorias[0].fuente
|| !dataViews[0].categórico.valores)
regreso viewModel;
dejar categórico=dataViews[0].categórico;
dejar categoría=categórico.categorias[0];
dejar valor de los datos=categórico.valores[0];
dejar pieChartData:Datos[]=[];
dejar paleta de color:IColorPaleta=anfitrión.paleta de color;
// let colorPalette: IColorPalette = createColorPalette (host.colors) .reset ();
por(dejar I=0;I<Matemáticas.max(categoría.valores.largo,valor de los datos.valores.largo);I++)
{
pieChartData.empujar({
cantidad:<número>valor de los datos.valores[i],
categoría:<cuerda>categoría.valores[i],
color: colorPalette.getColor(cuerda>categoría.valores[i]).valor
});
consola.Iniciar sesión(pieChartData[i].color);
}
regreso {
puntos de datos: pieChartData
};
}
exportar clase Gráfico circular implementos IVisual {
privado objetivo: HTMLElement;
privado ajustes: Ajustes visuales;
privado textNode: Texto;
privado pieChartContainer: d3.Selección<SVGElement>;
privado arco: alguna;
privado anfitrión: IVisualHost;
privado svg: d3.Selección<SVGElement>;
privado gramo: alguna;
privado tarta: alguna;
privado color: cuerda;
constructor(opciones: VisualConstructorOptions) {
consola.Iniciar sesión(‘Constructor visual’, opciones);
esta.objetivo = opciones.elemento;
esta.anfitrión=opciones.anfitrión;
dejar svg=esta.svg=d3.Seleccione(opciones.elemento)
.adjuntar(‘svg’)
.clasificado(«Gráfico circular»,cierto)
;
esta.pieChartContainer=svg.adjuntar(‘gramo’).clasificado(‘pieChartContainer’,cierto);//.attr(‘transform’,’translate(‘+100+ ‘,’ +100+ ‘)’);
}
público actualizar(opciones: VisualUpdateOptions) {
dejar viewModel: PieChartArc = visualTransform(opciones, esta.anfitrión);
dejar ancho=opciones.ventana gráfica.ancho;
dejar altura=opciones.ventana gráfica.altura;
dejar radio=Matemáticas.min(ancho,altura)/2;
esta.svg.attr({
ancho: ancho–20,
altura: altura–20,
});
// let colourValues = d3.scale.category20c ();
esta.arco=d3.svg.arco()
.radio interno(0)
.externalRadius(radio–20);
esta.tarta = d3.diseño.tarta<Datos> ().valor((D: Datos):número => D.cantidad);
dejar llenar = ((D: Datos):cuerda=> D.color);
dejar tf = (D: Datos) => traducirPSesta.arco.centroide(D)}) ‘;
dejar texto = D => D.datos.categoría;
esta.svg.adjuntar(‘gramo’);
// .attr (‘transformar’, ‘traducir (‘ +100 + ‘,’ + 100 + ‘)’);
dejar da=viewModel.puntos de datos;
esta.gramo=esta.svg.seleccionar todo(‘.arco’)
.datos(esta.tarta(viewModel.puntos de datos))
.ingresar()
.adjuntar(‘gramo’)
.attr(‘clase’, ‘arco’)
.datos(esta.tarta(viewModel.puntos de datos))
// .attr («llenar», llenar)
;
esta.gramo.adjuntar(‘sendero’)
.attr(‘D’, esta.arco)
.attr(‘llenar’,llenar)
//.style(«stroke»,»black «)
.attr(«anchura del trazo»,«0,8»)
/ * .on («mouseover», d =>
{
d3.seleccionar (d)
.attr (‘relleno’, ‘azul’)
.style (‘opacidad’, ‘0.6’)
.attr (‘d’, este.arc)
.style («trazo», «negro»)
.style («ancho de trazo», «3»);
this.color = d.getAttribute (‘llenar’);
})
.on («mouseout», d =>
{
d3.seleccionar (d)
.attr (‘relleno’, colourValues (este.color))
.style («opacidad», «1»)
.attr (‘d’, este.arc)
.style («ancho de trazo», «0,8»);
}) * /.adjuntar(«svg: título»);
//. html (d => ‘
Cantidad: ‘+ d => d. + ‘
‘);
esta.gramo.adjuntar(‘texto’).attr(‘transformar’, tf).texto(texto).attr(‘llenar’,«blanco»);
}
privado estático parseSettings(dataView: DataView): Ajustes visuales {
regreso Ajustes visuales.analizar gramaticalmente(dataView) como Ajustes visuales;
}
/ **
* Esta función se llama para cada uno de los objetos definidos en los archivos de capacidades y le permite seleccionar cuál de los
* objetos y propiedades que desea exponer a los usuarios en el panel de propiedades.
*
* /
público enumerateObjectInstances(opciones: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
regreso Ajustes visuales.enumerateObjectInstances(esta.ajustes || Ajustes visuales.getDefault(), opciones);
}
}
}
v-viig
Hola @vichus
Utilice esta función de relleno en su lugar:
let fill = ((d): string => {
return d.data.color;
});
Ignat Vilesov,
Ingeniero de software
Imágenes personalizadas de Microsoft Power BI
pbicvsupport@microsoft.com
v-viig
Hola @vichus
Utilice esta función de relleno en su lugar:
let fill = ((d): string => {
return d.data.color;
});
Ignat Vilesov,
Ingeniero de software
Imágenes personalizadas de Microsoft Power BI
pbicvsupport@microsoft.com
vichus
En respuesta a v-viig
Gracias hermano, funcionó.
¿Podría explicar por qué funcionó?
Gracias de nuevo.
v-viig
En respuesta a vichus
El diseño circular de D3 mantiene los datos originales en la propiedad de datos.
Por eso funciona.
Ignat Vilesov,
Ingeniero de software
Imágenes personalizadas de Microsoft Power BI
pbicvsupport@microsoft.com
