aleleba/chartjs-2-react
1
0
Fork 0
mirror of https://github.com/aleleba/chartjs-2-react.git synced 2025-06-25 00:08:21 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Se Elimina la libreria de react-chartjs-2 y trabjar directamente con chart.js para solucionar el problema al momento de actualizar data.

Browse Source 
Se sube a version 1.1.1
Se sube a GitHub 1.1.1
This commit is contained in:
Alejandro Lembke Barrientos
2020-02-11 09:26:23 -06:00
parent fe3bf8702e
commit 60cae61ef1
5 changed files with 62 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/Bar.jsx
View File

@ -1,7 +1,5 @@
import React, { Component } from 'react';
import { Bar } from 'react-chartjs-2';
import ID from './Service/ID.js';
class BarComponent extends Component {
@ -34,10 +32,6 @@ class BarComponent extends Component {
display: true,
position: 'bottom'
}
},
legend = {
display: true,
position: 'bottom'
}
for(let i = 0; i < 5 ; i ++){
@ -50,35 +44,43 @@ class BarComponent extends Component {
this.state = {
id,
chart: null,
data,
width: 100,
height: 50,
options,
legend,
redraw: false
options
}
}
componentDidMount(){
var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
let config = {
type: 'bar',
data: (this.props.config !== undefined) && (this.props.config.data !== undefined) ? this.props.config.data : this.state.data,
options: (this.props.config !== undefined) && (this.props.config.options !== undefined) ? this.props.config.options : this.state.options
}
this.setState({
id: this.props.id !== undefined ? this.props.id : this.state.id,
data: this.props.data !== undefined ? this.props.data : this.state.data,
options: this.props.options !== undefined ? this.props.options : this.state.options,
width: this.props.width !== undefined ? this.props.width : this.state.width,
height: this.props.height !== undefined ? this.props.height : this.state.height,
legend: this.props.legend !== undefined ? this.props.legend : this.state.legend,
redraw: this.props.redraw !== undefined ? this.props.redraw : this.state.redraw
chart: new Chart(ctx, config)
})
}
render(){
return(
<Bar id={this.state.id} data={this.state.data} options={this.state.options} width={this.state.width} height={this.state.height} legend={this.state.legend} redraw={this.state.redraw} />
)
if (this.state.chart !== null) {
this.state.chart.update();
return <canvas id={`${this.state.id}`} />
} else {
return <canvas id={`${this.state.id}`} />
}
}
}

45
src/Line.jsx
View File

@ -1,7 +1,5 @@
import React, { Component } from 'react';
import { Line } from 'react-chartjs-2';
import ID from './Service/ID.js';
class LineComponent extends Component {
@ -35,10 +33,6 @@ class LineComponent extends Component {
display: true,
position: 'bottom'
}
},
legend = {
display: true,
position: 'bottom'
}
for(let i = 0; i < 5 ; i ++){
@ -51,35 +45,44 @@ class LineComponent extends Component {
this.state = {
id,
chart: null,
data,
width: 100,
height: 50,
options,
legend,
redraw: false
options
}
}
componentDidMount(){
var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
let config = {
type: 'line',
data: (this.props.config !== undefined) && (this.props.config.data !== undefined) ? this.props.config.data : this.state.data,
options: (this.props.config !== undefined) && (this.props.config.options !== undefined) ? this.props.config.options : this.state.options
}
this.setState({
id: this.props.id !== undefined ? this.props.id : this.state.id,
data: this.props.data !== undefined ? this.props.data : this.state.data,
options: this.props.options !== undefined ? this.props.options : this.state.options,
width: this.props.width !== undefined ? this.props.width : this.state.width,
height: this.props.height !== undefined ? this.props.height : this.state.height,
legend: this.props.legend !== undefined ? this.props.legend : this.state.legend,
redraw: this.props.redraw !== undefined ? this.props.redraw : this.state.redraw
chart: new Chart(ctx, config)
})
}
render(){
return(
<Line id={this.state.id} data={this.state.data} options={this.state.options} width={this.state.width} height={this.state.height} legend={this.state.legend} redraw={this.state.redraw} fill={false} />
)
if (this.state.chart !== null) {
this.state.chart.update();
return <canvas id={`${this.state.id}`} />
} else {
return <canvas id={`${this.state.id}`} />
}
}
}