chart.js carica totalmente nuovi dati

L’API per chart.js consente di modificare i punti dei set di dati caricati in esso, ad esempio:

.update( )

Chiamando update () sull’istanza Chart verrà ricreato il grafico con qualsiasi valore aggiornato, consentendo di modificare il valore di più punti esistenti, quindi renderizzare quelli in un ciclo di rendering animato.

.addData( valuesArray, label )

Chiamando addData (valuesArray, label) sull’istanza Chart passando una matrice di valori per ogni set di dati, insieme a un’etichetta per quei punti.

.removeData( )

Chiamando removeData () sull’istanza Chart si rimuoverà il primo valore per tutti i set di dati sul grafico.

Tutti questi sono grandiosi, ma non riesco a capire come caricare un set di dati completamente nuovo, eliminando il vecchio. La documentazione non sembra coprire questo.

Ho avuto enormi problemi con questo

Per prima cosa ho provato .clear() quindi ho provato .destroy() e ho provato a impostare il mio riferimento grafico su null

Ciò che alla fine ha risolto il problema: eliminare l’elemento e poi riapplicare un nuovo al contenitore genitore


C’è un milione di modi per farlo:

 var resetCanvas = function () { $('#results-graph').remove(); // this is my  element $('#graph-container').append(''); canvas = document.querySelector('#results-graph'); // why use jQuery? ctx = canvas.getContext('2d'); ctx.canvas.width = $('#graph').width(); // resize to parent width ctx.canvas.height = $('#graph').height(); // resize to parent height var x = canvas.width/2; var y = canvas.height/2; ctx.font = '10pt Verdana'; ctx.textAlign = 'center'; ctx.fillText('This text is centered on the canvas', x, y); }; 

Devi distruggere:

 myLineChart.destroy(); 

Quindi reinizializza il grafico:

 var ctx = document.getElementById("myChartLine").getContext("2d"); myLineChart = new Chart(ctx).Line(data, options); 

Con Chart.js V2.0 puoi fare quanto segue:

 websiteChart.config.data = some_new_data; websiteChart.update(); 

La mia soluzione a questo è piuttosto semplice. (VERSIONE 1.X)

 getDataSet:function(valuesArr1,valuesArr2){ var dataset = []; var arr1 = { label: " (myvalues1)", fillColor: "rgba(0, 138, 212,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(0, 138, 212,0.75)", highlightStroke: "rgba(220,220,220,1)", data: valuesArr1 }; var arr2 = { label: " (myvalues2)", fillColor: "rgba(255, 174, 087,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(255, 174, 087,0.75)", highlightStroke: "rgba(220,220,220,1)", data: valuesArr2 }; /*Example conditions*/ if(condition 1) dataset.push(arr1); } if(condition 2){ dataset.push(arr1); dataset.push(arr2); } return dataset; } var data = { labels: mylabelone, datasets: getDataSet() }; if(myBarChart != null) // i initialize myBarChart var with null myBarChart.destroy(); // if not null call destroy myBarChart = new Chart(ctxmini).Bar(data, options);//render it again ... 

Nessun sfarfallio o problemi. getDataSet è una funzione per controllare quale set di dati devo presentare

È un thread vecchio, ma nella versione corrente (a partire dal 1 febbraio 2017), è facile sostituire i set di dati tracciati su chart.js:

supponiamo che i tuoi nuovi valori dell’asse x siano nell’array. I valori dell’asse x e y sono nell’array y, puoi usare sotto il codice per aggiornare il grafico.

 var x = [1,2,3]; var y = [1,1,1]; chart.data.datasets[0].data = y; chart.data.labels = x; chart.update(); 

Ho risposto a questo qui vedi Come cancellare un grafico da una canvas in modo che gli eventi al passaggio del mouse non possano essere triggersti?

Ma ecco la soluzione:

 var myPieChart=null; function drawChart(objChart,data){ if(myPieChart!=null){ myPieChart.destroy(); } // Get the context of the canvas element we want to select var ctx = objChart.getContext("2d"); myPieChart = new Chart(ctx).Pie(data, {animateScale: true}); } 

Secondo i documenti, clear() cancella la canvas. Pensalo come lo strumento Gomma in Paint. Non ha nulla a che fare con i dati attualmente caricati nell’istanza del grafico.

Distruggere l’istanza e crearne una nuova è uno spreco. Invece, utilizzare i metodi API removeData() e addData() . Questi aggiungeranno / rimuoveranno un singolo segmento da / verso l’istanza del grafico. Pertanto, se si desidera caricare dati completamente nuovi, è sufficiente eseguire il ciclo di un array di dati del grafico e chiamare removeData(index) (gli indici di array devono corrispondere agli indici di segmento correnti). Quindi, utilizzare addData(index) per riempirlo con i nuovi dati. Suggerisco di avvolgere i due metodi per il looping dei dati, in quanto prevedono un singolo indice di segmento. Io uso resetChart e updateChart . Prima di continuare, assicurati di controllare Chart.js ultima versione e la documentazione di Chart.js . Potrebbero aver aggiunto nuovi metodi per sostituire completamente i dati .

Ho incontrato lo stesso problema, ho 6 grafici a torta su una pagina che possono essere aggiornati contemporaneamente. Sto usando la seguente funzione per ripristinare i dati del grafico.

 // sets chart segment data for previously rendered charts function _resetChartData(chart, new_segments) { // remove all the segments while (chart.segments.length) { chart.removeData(); }; // add the new data fresh new_segments.forEach (function (segment, index) { chart.addData(segment, index); }); }; // when I want to reset my data I call _resetChartData(some_chart, new_data_segments); some_chart.update(); 

Hai bisogno di pulire vecchi dati. Non c’è bisogno di re inizializzare:

 for (i in myChartLine.datasets[0].points) myChartLine.removeData(); 

Ho provato la soluzione neaumusic , ma in seguito ho scoperto che l’ unico problema con destroy è lo scope .

 var chart; function renderGraph() { // Destroy old graph if (chart) { chart.destroy(); } // Render chart chart = new Chart( document.getElementById(idChartMainWrapperCanvas), chartOptions ); } 

Spostando la mia variabile del grafico al di fuori dell’ambito della funzione, ho funzionato per me.

ChartJS 2.6 supporta la sostituzione dei dati di riferimento (vedere la nota nella documentazione di aggiornamento (config)). Quindi, quando hai il tuo grafico, puoi semplicemente fare questo:

 myChart.data.labels = ['1am', '2am', '3am', '4am']; myChart.data.datasets[0].data = [0, 12, 35, 36]; myChart.update(); 

Non esegue l’animazione ottenuta dall’aggiunta di punti, ma i punti esistenti sul grafico verranno animati.

Se qualcuno sta cercando come farlo in React. Per un grafico lineare, supponendo che si disponga di un componente wrapper attorno al grafico:

(Questo presuppone che si stia utilizzando la v2. Non è necessario utilizzare react-chartjs . Si sta utilizzando il normale pacchetto chart.js da npm.)

 propTypes: { data: React.PropTypes.shape({ datasets: React.PropTypes.arrayOf( React.PropTypes.shape({ }) ), labels: React.PropTypes.array.isRequired }).isRequired }, componentDidMount () { let chartCanvas = this.refs.chart; let myChart = new Chart(chartCanvas, { type: 'line', data: this.props.data, options: { ... } }); this.setState({chart: myChart}); }, componentDidUpdate () { let chart = this.state.chart; let data = this.props.data; data.datasets.forEach((dataset, i) => chart.data.datasets[i].data = dataset.data); chart.data.labels = data.labels; chart.update(); }, render () { return (  ); } 

La funzionalità componentDidUpdate consente di aggiornare, aggiungere o rimuovere qualsiasi dato da this.props.data .

Nessuna delle risposte precedenti ha aiutato la mia particolare situazione in modo molto pulito con codice minimo. Avevo bisogno di rimuovere tutti i set di dati e quindi il ciclo per aggiungere dynamicmente più dataset. Quindi questo è tagliato per quelli che lo fanno fino in fondo alla pagina senza trovare la loro risposta 🙂

Nota: assicurarsi di chiamare chart.update () dopo aver caricato tutti i nuovi dati nell’object dataset. Spero che questo aiuti qualcuno

 function removeData(chart) { chart.data.datasets.length = 0; } function addData(chart, data) { chart.data.datasets.push(data); } 

L’unica soluzione che riesco a trovare finora è reinizializzare il grafico da zero:

 var myLineChart = new Chart(ctx).Line(data, options); 

Tuttavia, questo mi sembra un po ‘ingannevole. Qualunque soluzione migliore, più standard di qualcuno?

Ho avuto un sacco di problemi anche con questo. Ho dati e etichette in array separati, quindi reinizializzo i dati del grafico. Ho aggiunto la riga.destroy (); come suggerito sopra che ha fatto il trucco

 var ctx = document.getElementById("canvas").getContext("2d"); if(window.myLine){ window.myLine.destroy(); } window.myLine = new Chart(ctx).Line(lineChartData, { etc etc 

C’è un modo per farlo senza cancellare la canvas o ricominciare da capo, ma è necessario gestire la creazione del grafico in modo che i dati siano nello stesso formato per quando si aggiorna.

Ecco come l’ho fatto.

  var ctx = document.getElementById("myChart").getContext("2d"); if (chartExists) { for (i=0;i<10;i++){ myNewChart.scale.xLabels[i]=dbLabels[i]; myNewChart.datasets[0].bars[i].value=dbOnAir[i]; } myNewChart.update(); }else{ console.log('chart doesnt exist'); myNewChart = new Chart(ctx).Bar(dataNew); myNewChart.removeData(); for (i=0;i<10;i++){ myNewChart.addData([10],dbLabels[i]); } for (i=0;i<10;i++){ myNewChart.datasets[0].bars[i].value=dbOnAir[i]; } myNewChart.update(); chartExists=true; } 

Fondamentalmente scarto i dati caricati al momento della creazione, quindi eseguo il reform con il metodo add data. Ciò significa che posso accedere a tutti i punti. Ogni volta che ho provato ad accedere alla struttura dati creata da:

 Chart(ctx).Bar(dataNew); 

comando, non riesco ad accedere a ciò di cui ho bisogno. Ciò significa che puoi modificare tutti i punti dati, nello stesso modo in cui li hai creati, e anche chiamare update () senza animare completamente da zero.