0
247
Vistasdiagrama de dispersión de recargas, establecer el color para un valor específico?
Estoy tratando de establecer un color específico para un valor que entra en un diagrama de dispersión en los gráficos.
La forma en que estoy tratando de hacer esto es la siguiente,
<Scatter name="A school" data={data} fill="#8884d8"> {data.map((entry, index) => ( <Cell key={`cell-${index}`} fill={colorType} /> ))} </Scatter>El conjunto de datos que entra en esto se ve así,
const data = [{x:10,y:50,colourType:"#FFBB28"},..]Actualmente está tomando uno de estos tipos de color y aplicándolo a cada valor. ¿Alguna idea sobre cómo hacerlo para que se aplique solo específicamente al punto único?
Gracias.
##Actualizar
Desafortunadamente, cuando aplico el registro a continuación, los colores siguen saliendo siempre iguales.
Este es el componente en total.
<ScatterChart width={500} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20, }} > <CartesianGrid /> <XAxis type="number" domain={[0, 60]} dataKey="x" name="Speed" unit=" Seconds" reversed /> <YAxis type="number" domain={[0, 100]} dataKey="y" name="Accuracy" unit="%" /> <Tooltip cursor={{ strokeDasharray: "3 3" }} /> <Scatter name="A school" data={data}> {data.map((entry, index) => ( <Cell key={`cell-${index}`} fill={entry.colourType ?? "#8884d8"} /> ))} </Scatter> ...(removed reference lines) </ScatterChart>gracias y me encanta entender dónde me estoy equivocando aquí
1 Respuestas
Responde la pregunta0
No sé de dónde viene tu variable colorType , pero creo que puedes hacer esto:
<Scatter data={data} name="A school"> {data.map((entry, index) => ( <Cell key={`cell-${index}`} fill={entry.colourType} /> ))} </Scatter>Si colorType no es una propiedad en cada entrada, intente esto:
<Scatter data={data} name="A school"> {data.map((entry, index) => ( <Cell key={`cell-${index}`} fill={entry.colourType ?? "#8884d8"} /> ))} </Scatter>Código de trabajo completo en la aplicación de reacción fresca
nota: esto no incluye más cambios. Solo quería demostrar el conjunto de datos de manera más explícita.
import { ScatterChart, CartesianGrid, XAxis, YAxis, Tooltip, Scatter, Cell, } from "recharts"; const data = [ { x: 10, y: 50, colourType: "#FFBB28" }, { x: 20, y: 50 }, { x: 30, y: 40 }, ]; function App() { return ( <ScatterChart width={500} height={400} margin={{ top: 20, right: 20, bottom: 20, left: 20, }} > <CartesianGrid /> <XAxis type="number" domain={[0, 60]} dataKey="x" name="Speed" unit=" Seconds" reversed /> <YAxis type="number" domain={[0, 100]} dataKey="y" name="Accuracy" unit="%" /> <Tooltip cursor={{ strokeDasharray: "3 3" }} /> <Scatter name="A school" data={data}> {data.map((entry, index) => ( <Cell key={`cell-${index}`} fill={entry.colourType ?? "#8884d8"} /> ))} </Scatter> </ScatterChart> ); } export default App;Producción:
