No puede obtener reaccionar-chartjs para actualizar -- javascript campo con reactjs campo con chart.js campo con react-jsx camp Relacionados El problema

Cannot get react-chartjs to update


2
vote

problema

Español

Estoy tratando de seguir el código "Ejemplo de uso" de reacción-chartjs github Página < / p>

Soy nuevo en JavaScript y reaccionar y probablemente solo ser ingenuo. ¿Cómo puedo obtener el nuevo Chartdata de "_onchange" para actualizar mi POLARAREACTART? Intenté algo más directo llamando al elemento.getdocummbyid ("Polarchart"), pero eso devuelve nada y luego no puedo llamar .Update en él ... todo el "Insertar Redraw en el XML" y se llamará mágicamente la actualización parece mágica a yo: (

polarplot.jsx

  var React = require ('react'); var PolarAreaChart = require ('react-chartjs').PolarArea; var FilterStore = require ('FilterStore')  var PolarPlot = React.createClass ({   componentWillMount: function () {       FilterStore.addChangeListener  (this._onChange);   },    _onChange: function () {     console.log("time to update")      chartData = [         {             value: 300,             color:"#F7464A",             highlight: "#FF5A5E",             label: "Red"         }]   },    render: function () {     return (       <PolarAreaChart id="polarChart" data={chartData} options={chartOptions} redraw/>     );   } });  var chartData = [     {         value: 300,         color:"#F7464A",         highlight: "#FF5A5E",         label: "Red"     },     {         value: 50,         color: "#46BFBD",         highlight: "#5AD3D1",         label: "Green"     },     {         value: 100,         color: "#FDB45C",         highlight: "#FFC870",         label: "Yellow"     },     {         value: 40,         color: "#949FB1",         highlight: "#A8B3C5",         label: "Grey"     },     {         value: 120,         color: "#4D5360",         highlight: "#616774",         label: "Dark Grey"     }  ];  var chartOptions = [   {       //Boolean - Show a backdrop to the scale label       scaleShowLabelBackdrop : true,        //String - The colour of the label backdrop       scaleBackdropColor : "rgba(255,255,255,0.75)",        // Boolean - Whether the scale should begin at zero       scaleBeginAtZero : true,        //Number - The backdrop padding above & below the label in pixels       scaleBackdropPaddingY : 2,        //Number - The backdrop padding to the side of the label in pixels       scaleBackdropPaddingX : 2,        //Boolean - Show line for each value in the scale       scaleShowLine : true,        //Boolean - Stroke a line around each segment in the chart       segmentShowStroke : true,        //String - The colour of the stroke on each segement.       segmentStrokeColor : "#fff",        //Number - The width of the stroke value in pixels       segmentStrokeWidth : 2,        //Number - Amount of animation steps       animationSteps : 100,        //String - Animation easing effect.       animationEasing : "easeOutBounce",        //Boolean - Whether to animate the rotation of the chart       animateRotate : true,        //Boolean - Whether to animate scaling the chart from the centre       animateScale : false,        //String - A legend template       legendTemplate : "<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"    }  ];  module.exports = PolarPlot;   

Original en ingles

I am trying to follow the "Example usage" code from react-chartjs github page

I am new to javascript and react and probably just being naive. How can I get the new chartData from "_onChange" to update my PolarAreaChart? I tried something more direct by calling element.getDocumentById("polarChart"), but that returns nothing and then I cannot call .update on it... the whole "insert redraw in the xml" and it will magically call update seems magical to me :(

PolarPlot.jsx

var React = require ('react'); var PolarAreaChart = require ('react-chartjs').PolarArea; var FilterStore = require ('FilterStore')  var PolarPlot = React.createClass ({   componentWillMount: function () {       FilterStore.addChangeListener  (this._onChange);   },    _onChange: function () {     console.log("time to update")      chartData = [         {             value: 300,             color:"#F7464A",             highlight: "#FF5A5E",             label: "Red"         }]   },    render: function () {     return (       <PolarAreaChart id="polarChart" data={chartData} options={chartOptions} redraw/>     );   } });  var chartData = [     {         value: 300,         color:"#F7464A",         highlight: "#FF5A5E",         label: "Red"     },     {         value: 50,         color: "#46BFBD",         highlight: "#5AD3D1",         label: "Green"     },     {         value: 100,         color: "#FDB45C",         highlight: "#FFC870",         label: "Yellow"     },     {         value: 40,         color: "#949FB1",         highlight: "#A8B3C5",         label: "Grey"     },     {         value: 120,         color: "#4D5360",         highlight: "#616774",         label: "Dark Grey"     }  ];  var chartOptions = [   {       //Boolean - Show a backdrop to the scale label       scaleShowLabelBackdrop : true,        //String - The colour of the label backdrop       scaleBackdropColor : "rgba(255,255,255,0.75)",        // Boolean - Whether the scale should begin at zero       scaleBeginAtZero : true,        //Number - The backdrop padding above & below the label in pixels       scaleBackdropPaddingY : 2,        //Number - The backdrop padding to the side of the label in pixels       scaleBackdropPaddingX : 2,        //Boolean - Show line for each value in the scale       scaleShowLine : true,        //Boolean - Stroke a line around each segment in the chart       segmentShowStroke : true,        //String - The colour of the stroke on each segement.       segmentStrokeColor : "#fff",        //Number - The width of the stroke value in pixels       segmentStrokeWidth : 2,        //Number - Amount of animation steps       animationSteps : 100,        //String - Animation easing effect.       animationEasing : "easeOutBounce",        //Boolean - Whether to animate the rotation of the chart       animateRotate : true,        //Boolean - Whether to animate scaling the chart from the centre       animateScale : false,        //String - A legend template       legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"    }  ];  module.exports = PolarPlot; 
           

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

El componente PolarPlot a menos que cambie explícitamente el estado. Su chartData no es parte del estado de los componentes. Así que asignar una nueva matriz a esa variable no hace nada más que eso. Move este chartData al estado del componente. Luego, siempre que actualice esta variable de estado, va a forzar la reinversión. Algo así:

  var PolarPlot = React.createClass ({   componentWillMount: function () {       FilterStore.addChangeListener  (this._onChange);   },    getInitialState: function() {     return {chartData: chartData};   },    _onChange: function () {     console.log("time to update")     this.setState({       chartData: [{         value: 300,         color:"#F7464A",         highlight: "#FF5A5E",         label: "Red"       }]     });   },    render: function () {     return (       <PolarAreaChart id="polarChart" data={this.state.chartData} options={chartOptions} redraw/>     );   } });   

Si desea saber más sobre cómo reaccionan los componentes que reaccionan a los cambios estatales, compruebe Sección de estado reactivo del tutorial de reacción.

 

Your PolarPlot component is not rendered unless you explicitly change the state. Your chartData is not part of the component state. So assigning a new array to that variable does nothing more than that. Move this chartData to the component state. Then, whenever you update this state variable you are going to force the re-render. Something like this:

var PolarPlot = React.createClass ({   componentWillMount: function () {       FilterStore.addChangeListener  (this._onChange);   },    getInitialState: function() {     return {chartData: chartData};   },    _onChange: function () {     console.log("time to update")     this.setState({       chartData: [{         value: 300,         color:"#F7464A",         highlight: "#FF5A5E",         label: "Red"       }]     });   },    render: function () {     return (       <PolarAreaChart id="polarChart" data={this.state.chartData} options={chartOptions} redraw/>     );   } }); 

If you want to know more about how components rendering reacts to state changes check Reactive state section from the React Tutorial.

 
 

Relacionados problema

1  React-JSX Syntax Error al colocar JSX en un método de componentes de clase  ( React jsx syntax error when putting jsx into a class components method ) 
En un componente de clase de reacción, estoy escribiendo un método que construye un desplegamiento <select>3 y Babel está dando un error. El error es causad...

0  Plantillas dinámicas en reaccionar  ( Dynamic templates in react ) 
Quiero crear un componente simple $_arr619 que debe ser lo más genérico posible. Quiero inyectar 2 params de contenido corporal: get0 (con alguna lógica...

0  React.js con cafeescript - Pasando los accesorios y métodos para el componente secundario  ( React js with coffeescript passing props and methods to child component ) 
Estoy trabajando con react.js usando Coffeescript, lo que me hace imposible usar JSX (o lo hace?). Uso un espacio de nombres global _ donde almaceno todos...

1  Reaccionar no representar múltiples componentes a través de la función de fábrica  ( React not rendering multiple components through factory function ) 
El problema es lo siguiente, tengo una fábrica: import React from 'react'; export default (componentFactory) => { return Component => { cl...

0  Usando un formulario jquery con reaccionar  ( Using a jquery form with react ) 
Soy nuevo en el uso de reaccjs. Tengo un formulario que está escribiendo en jQuery y quiero hacerlo en un componente de reacción. ¿Cómo puedo hacer eso, por f...

0  Centrarse en el modal personalizado solo usando reactjs  ( Focus on custom modal only using reactjs ) 
Soy nuevo en Reactjs y mal pegado en algo. Tengo un modal personalizado que aparece en el clic de un botón. Este modal contiene 2 otros botones. El problema...

1  Nombre del objeto de salida que no sea reaccionar con la sintaxis de JSX  ( Output object name other than react with jsx syntax ) 
Con reaccion V0.12, el PRAGMA @jsx se ha ido, lo que significa que ya no es posible emitir JSX con nada que no sea la sintaxis reacct.methodname. Para mi ca...

7  ¿Cómo anidar escena y navegar con la dirección = 'vertical' en reaccionar flujo de enrutador nativo?  ( How to nest scene and navigate with direction vertical in react native router ) 
Me gustaría anidar el reaccionado-Nativo-Nativo-Flux's <Scene/> e intenté lo siguiente, pero no puedo navegar al <Scene component={Home}/> de <Scene comp...

1  Reaccionar nativo: ¿Cómo representar una serie de vistas condicionales con condiciones acopladas?  ( React native how to render a number of conditional views with coupled condition ) 
Uno de mis componentes tiene aproximadamente cuatro estados diferentes en los que podría estar, cada uno con sus propias vistas de pantalla completa (carga, e...

96  Mejores prácticas al agregar espacio en blanco en JSX  ( Best practice when adding whitespace in jsx ) 
Entiendo cómo (y > ¿Por qué ) para agregar un espacio en blanco en JSX, pero me pregunto qué es la mejor práctica o si alguna hace alguna diferencia real? ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos