Cuando creo el gráfico, le doy un parámetro de diseño y sé que puedo establecer un título del eje x, pero me gustaría cambiar el título del eje x en función del gráfico que estoy mostrando en función de un desencadenador de eventos.
Donde creo la trama: (Plotting.js)
<Plot data={[]} revision={this.state.revision} config = {{displayModeBar: true, modeBarButtonsToRemove: ["lasso2d", "select2d", "zoom2d", "resetScale2d"], displaylogo: false}} layout= {{ xaxis: { range: [State.values.xMin, State.values.xMax], title: { text: "The text I'm trying to change is here" } } }} />Donde quiero actualizar la trama: (StatisticField.js)
export default function StatisticsDropDown() { return ( <Select onChange={(event) => { State.values.PlotInfo.Fields = event.target.value //console.log(document.getElementById("updater").innerHTML ) let e = {target: {value: ""}} document.getElementById("min").value = 0 document.getElementById("max").value = 0 if(State.values.PlotInfo.Fields === "1"){ Plot.layout.title.text = State.values.PlotInfo.Fields + " mA" } else if(State.values.PlotInfo.Fields === "2"){ Plot.layout.title.text = State.values.PlotInfo.Fields + " dB" } else if(State.values.PlotInfo.Fields === "3"){ Plot.layout.title.text = State.values.PlotInfo.Fields + " dBm" } else if(State.values.PlotInfo.Fields === "4"){ Plot.layout.title.text = State.values.PlotInfo.Fields + " ps" } else if(State.values.PlotInfo.Fields === "5"){ Plot.layout.title.text = State.values.PlotInfo.Fields + " dBm" } else if(State.values.PlotInfo.Fields === "6"){ Plot.layout.title.text = State.values.PlotInfo.Fields + " dB" } else{ Plot.layout.title.text = "broken very sad" } window.testing.createPlot(e) }}> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </Select> ); }Debe usar un administrador de estado para que el componente se vuelva a representar cuando cambie su valor.
Capture el valor seleccionado StatisticsDropDown mediante useState.
const [type, setType] = useState();Para el componente StatisticsDropDown, actualice el valor de tipo cuando los valores cambien por:
<select onChange={(e)= setType(e.target.value)}> <option value="mA">mA</option> <option value="dB">dB</option> </select>Luego, puede establecer el título de la trama de forma dinámica leyendo el valor del tipo.
<Plot data={[]} revision={this.state.revision} config = {{displayModeBar: true, modeBarButtonsToRemove: ["lasso2d", "select2d", "zoom2d", "resetScale2d"], displaylogo: false}} layout= {{ xaxis: { range: [State.values.xMin, State.values.xMax], title: { text: type } } }} />