chart.js carica dati completamente nuovi

L'API perchart.js consente di modificare i punti dei set di dati caricati al suo interno, ad esempio:

.update( )

La chiamata di update () sull'istanza del grafico eseguirà nuovamente il rendering del grafico con tutti i valori aggiornati, consentendo di modificare il valore di più punti esistenti, quindi renderizzarli in un ciclo di rendering animato.

.addData( valuesArray, label )

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

.removeData( )

La chiamata a removeData () sull'istanza del grafico rimuoverà il primo valore per tutti i set di dati sul grafico.

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

Ho avuto enormi problemi con questo

Prima ho provato .clear()poi ho provato.destroy() e ho provato a impostare il mio riferimento grafico su null

Cosa ha finalmente risolto il problema per me: eliminare l' <canvas>elemento e quindi riapplicarne uno nuovo <canvas>al contenitore padre

Ci sono un milione di modi per farlo:

var resetCanvas = function () {
  $('#results-graph').remove(); // this is my <canvas> element
  $('#graph-container').append('<canvas id="results-graph"><canvas>');
  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();

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

supponiamo che i nuovi valori dell'asse x siano nell'array xe i valori dell'asse y siano nell'array y, puoi usare il codice sottostante 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();

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

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

Non esegue l'animazione che otterresti aggiungendo punti, ma i punti esistenti sul grafico verranno animati.

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 ...

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

Ho risposto qui, vedi Come cancellare un grafico da una tela in modo che gli eventi al passaggio del mouse non possano essere attivati?

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 tela. Consideralo 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. Utilizza invece metodi API removeData()e addData(). Questi aggiungeranno / rimuoveranno un singolo segmento alla / dall'istanza del grafico. Quindi, se si desidera caricare dati completamente nuovi, è sufficiente eseguire il ciclo di un array di dati del grafico e chiamare removeData(index)(gli indici degli array dovrebbero corrispondere agli indici dei segmenti correnti). Quindi, usa addData(index)per riempirlo con i nuovi dati. Suggerisco di racchiudere i due metodi per il ciclo dei dati, poiché si aspettano un indice di segmento singolo. Io uso resetCharte updateChart. Prima di continuare, assicurati di controllare la Chart.jsversione e la documentazione più recenti. Potrebbero aver aggiunto nuovi metodi per sostituire completamente i dati .

Mi sono imbattuto nello stesso problema, ho 6 grafici a torta su una pagina che possono essere aggiornati tutti allo stesso tempo. 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();

Ho provato la soluzione neaumusic , ma in seguito ho scoperto che l' unico problema con la distruzione è l'ambito .

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, ha funzionato per me.

Nessuna delle risposte precedenti ha aiutato la mia situazione particolare in modo molto pulito con un codice minimo. Avevo bisogno di rimuovere tutti i set di dati e quindi eseguire il ciclo per aggiungere dinamicamente diversi set di dati. Quindi questo frammento è per coloro che arrivano fino in fondo alla pagina senza trovare la loro risposta :)

Nota: assicurati di chiamare chart.update () dopo aver caricato tutti i tuoi nuovi dati nell'oggetto dataset. Spero che questo aiuti qualcuno

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

function addData(chart, data) {
  chart.data.datasets.push(data);
}

Devi pulire i vecchi dati. Non è necessario reinizializzare:

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

Se qualcuno sta cercando come farlo in React. Per un grafico a linee, supponendo che tu abbia un componente wrapper attorno al grafico:

(Questo presuppone che tu stia usando v2. Non è necessario che tu lo usi react-chartjs. Questo sta usando il normale chart.jspacchetto di 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 (
    <canvas ref={'chart'} height={'400'} width={'600'}></canvas>
  );
}

La componentDidUpdatefunzionalità consente di aggiornare, aggiungere o rimuovere qualsiasi dato dal file this.props.data.

Non è necessario distruggere il grafico. Prova con questo

function removeData(chart) {

        let total = chart.data.labels.length;

        while (total >= 0) {
            chart.data.labels.pop();
            chart.data.datasets[0].data.pop();
            total--;
        }

        chart.update();
    }

Per favore, scopri come funziona Chart.js (versione 2 qui) e fallo per qualsiasi attributo tu voglia:

<canvas id="your-chart-id" height="your-height" width="your-width"></canvas>

2.Si prega di supporre di avere un codice javascript che riempie il grafico per la prima volta (ad esempio quando la pagina viene caricata):

var ctx = document.getElementById('your-chart-id').getContext('2d');
var chartInstance = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: your-lables-array,
        datasets: [{
            data: your-data-array,
            /*you can create random colors dynamically by ColorHash library [https://github.com/zenozeng/color-hash]*/
            backgroundColor: your-lables-array.map(function (item) {
                return colorHash.hex(item);
            })
        }]
    },
    options: {
        maintainAspectRatio: false,
        scales: {
            yAxes: [ { ticks: {beginAtZero: true} } ]
        },
        title: {display: true, fontSize: 16, text: 'chart title'},
        legend: {display: false}
    }
});

Supponi di voler aggiornare completamente il tuo set di dati. È molto semplice. Si prega di guardare il codice sopra e vedere come è il percorso dalla variabile del grafico ai dati, quindi seguire il percorso seguente:

• seleziona chartInstancevar.
• Quindi seleziona data nodeall'interno del file chartInstance.
• Quindi seleziona datasets nodeall'interno del file data node.
  (nota: come puoi vedere, datasets nodeè un array. quindi devi specificare quale elemento di questo array desideri. qui abbiamo solo un elemento in datasets node. quindi usiamodatasets[0]
• Quindi seleziona datasets[0]
• Quindi seleziona data nodeall'interno del file datasets[0].

Questo passaggio ti dà chartInstance.data.datasets[0].datae puoi impostare nuovi dati e aggiornare il grafico:

chartInstance.data.datasets[0].data = NEW-your-data-array
//finally update chart var:
chartInstance.update();

L'unica soluzione che riesco a trovare finora per me stesso è reinizializzare il grafico da zero:

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

Tuttavia questo mi sembra un po 'sciocco. Qualcuno ha una soluzione migliore e più standard?

Ho avuto un sacco di problemi anche con questo. Ho dati ed 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

Là è un modo per farlo senza cancellare la tela o ricominciare, ma si deve gestire l'uomo la creazione del grafico in modo che i dati sono 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 elimino i dati caricati al momento della creazione, quindi riformulo con il metodo di aggiunta dei dati. Ciò significa che posso quindi accedere a tutti i punti. Ogni volta che ho provato ad accedere alla struttura dati che viene 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.

Grafico JS 2.0

Basta impostare chart.data.labels = [];

Per esempio:

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
       dataset.data.push(data);
    });
    chart.update();
}

$chart.data.labels = [];

$.each(res.grouped, function(i,o) {
   addData($chart, o.age, o.count);
});
$chart.update();

Quando si crea l'oggetto grafico è necessario salvare l'istanza in una variabile.

var currentChart = new Chart(ctx, ...);

E prima di caricare nuovi dati, devi distruggerli :

currentChart.destroy();