0
149
ViewsLa barra apilada de Recharts está pintando muchas etiquetas cuando representa un valor total para todas las barras apiladas en una fila/columna. ¿Cómo hacer que renderice solo uno?
Tengo una estructura de datos de matriz que pasé al componente Recharts BarChart. Todos los valores dataX para cada name se apilarían en la misma barra y quiero mostrar la cantidad total al final de la barra.
const data = [ { name: 'nameA', data1: 30, data2: 30, total: 60, }, // ... ];La forma en que estoy renderizando las barras:
const valueAccessor = (item) => (item ? item.total : 0); const renderBars = () => { return parsedData.map(({name, dataKey, barName, color, renderShape}) => { <Bar key={`axis-${name}-${dataKey}`} dataKey={dataKey} stackId={barName} fill={color} shape={renderShape} > <LabelList valueAccessor={valueAccessor(barName)} position="right" /> </Bar> }); } Tengo diferentes formas de representarlos con colores y probablemente no necesitaría otra estructura de datos (vea que renderBars usa parsedData en lugar de data , pero eso es algo adicional en lo que necesito trabajar).
La salida es esta:
Como puede ver, los números están en negrita y, al inspeccionarlos, veo que puedo eliminar el elemento y el número sigue ahí, ya que se representan 3 números en lugar de 1 (porque tengo 3 barras apiladas ).
¿Hay alguna forma de hacer que los gráficos reproduzcan solo una etiqueta por fila, en lugar de por barra apilada?
¡Gracias!
1 answers
Answer question0
Después de jugar un poco con la biblioteca, descubrí que es inevitable representar 1 etiqueta cuando se apilan 3 barras por fila/columna. La única forma de representar una etiqueta es establecer el componente LabelList como elemento secundario de un componente Bar .
Y si tiene 2 barras, entonces renderiza una etiqueta para la primera barra apilada y luego no renderiza una etiqueta para la segunda barra apilada, en mi caso, la etiqueta terminó sin renderizarse. Entonces, mi única solución sería simplemente representar una LabelList para la última barra apilada por fila/columna .
En el caso anterior, al tener 3 barras apiladas por fila/columna:
const GROUPS = 3; const valueAccessor = (item) => (item ? item.total : 0); const renderBars = () => { return parsedData.map(({name, dataKey, barName, color, renderShape}) => { <Bar key={`axis-${name}-${dataKey}`} dataKey={dataKey} stackId={barName} fill={color} shape={renderShape} > {index % (parsedData.length / GROUPS) === (parsedData.length / GROUPS - 1) && <LabelList valueAccessor={valueAccessor(barName)} position="right" />} </Bar> }); }La misma salida solo tiene 1 número por fila (puede ver que los números no están "en negrita")
