javascript - color - chart.js carga datos totalmente nuevos

line color chart js

Question

La API para chart.js permite editar puntos de los conjuntos de datos cargados en ella, por ejemplo:

.update( )

Al llamar a update () en su instancia de Chart, se volverá a renderizar el gráfico con los valores actualizados, lo que le permitirá editar el valor de múltiples puntos existentes y luego los mostrará en un bucle de renderizado animado.

.addData( valuesArray, label )

Al llamar a addData (valuesArray, label) en su instancia de Chart, se pasa una matriz de valores para cada conjunto de datos, junto con una etiqueta para esos puntos.

.removeData( )

Al llamar a removeData () en su instancia de Chart, se eliminará el primer valor de todos los conjuntos de datos en la gráfica.

Todos estos son geniales, pero no puedo averiguar cómo cargar un conjunto de datos completamente nuevo, eliminando el antiguo. La documentación no parece cubrir esto.

Answer 1

ChartJS 2.6 admite el reemplazo de referencia de datos (consulte la Note en la documentación de actualización (configuración)). Así que cuando tengas tu gráfico, básicamente podrías hacer esto:

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

No hace la animación que obtendrías al agregar puntos, pero los puntos existentes en el gráfico serán animados.

Answer 2

Con Chart.js V2.0 puedes hacer lo siguiente:

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

Answer 3

Es un hilo antiguo, pero en la versión actual (desde 1-feb-2017), es fácil reemplazar los conjuntos de datos trazados en chart.js:

Supongamos que sus nuevos valores del eje x están en la matriz x y los valores del eje y están en la matriz y, puede usar el siguiente código para actualizar el gráfico.

var x = [1,2,3];
var y = [1,1,1];

chart.data.datasets[0].data = y;
chart.data.labels = x;

chart.update();

Answer 4

Hay una manera de hacer esto sin borrar el lienzo o comenzar de nuevo, pero debe manejar la creación del gráfico para que los datos estén en el mismo formato para cuando actualice.

Así es como lo hice.

    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;
        }

Básicamente, desecho los datos cargados en la creación, y luego reformo con el método de agregar datos. Esto significa que puedo acceder a todos los puntos. Cada vez que he intentado acceder a la estructura de datos creada por:

Chart(ctx).Bar(dataNew);

comando, no puedo acceder a lo que necesito. Esto significa que puede cambiar todos los puntos de datos, de la misma manera que los creó, y también llamar a update () sin animar completamente desde cero.

Answer 5

Intenté neaumusic solución neaumusic , pero más tarde descubrí que el único problema con la destrucción es el alcance .

var chart;

function renderGraph() {
    // Destroy old graph
    if (chart) {
        chart.destroy();
    }

    // Render chart
    chart = new Chart(
        document.getElementById(idChartMainWrapperCanvas),
        chartOptions
    );
}

Mover mi variable de gráfico fuera del alcance de la función, lo tengo funcionando para mí.

Answer 6

La única solución que puedo encontrar hasta ahora para mí es reinicializar el gráfico desde cero:

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

Sin embargo, esto me parece un poco raro. ¿Alguna solución mejor, más estándar que nadie?

Answer 7

Me encontré con el mismo problema, tengo 6 gráficos circulares en una página que se pueden actualizar al mismo tiempo. Estoy usando la siguiente función para restablecer los datos del gráfico.

// 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();

Answer 8

Mi solución a esto es bastante simple. (VERSIÓN 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 ...

Sin parpadeo o problemas. getDataSet es una función para controlar qué conjunto de datos debo presentar

Answer 9

Necesitas destruir:

myLineChart.destroy();

Luego reinicie el gráfico:

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

Answer 10

Necesitas limpiar datos antiguos. No es necesario reinicializar:

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

Answer 11

Ninguna de las respuestas anteriores ayudó a mi situación particular de una manera muy limpia con un código mínimo. Necesitaba eliminar todos los conjuntos de datos y luego hacer un bucle para agregar dinámicamente varios conjuntos de datos. Así que este recorte es para aquellos que llegan hasta el final de la página sin encontrar su respuesta :)

Nota: asegúrese de llamar chart.update () una vez que haya cargado todos sus nuevos datos en el objeto de conjunto de datos. Espero que esto ayude a alguien

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

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

Answer 12

Respondí esto aquí. ¿Cómo borrar un gráfico de un lienzo para que los eventos de desplazamiento no puedan activarse?

Pero aquí está la solución:

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});
}

Answer 13

Según docs, clear() borra el lienzo. Piense en ello como la herramienta Borrador en Paint. No tiene nada que ver con los datos cargados actualmente en la instancia del gráfico.

Destruir la instancia y crear una nueva es un desperdicio. En su lugar, utilice los métodos API removeData() y addData() . Estos agregarán / eliminarán un solo segmento a / desde la instancia del gráfico. Entonces, si desea cargar datos completamente nuevos, simplemente removeData(index) un bucle en una matriz de datos de gráficos y llame a removeData(index) (los índices de matriz deben corresponder a los índices de segmentos actuales). Luego, use addData(index) para rellenar con los nuevos datos. Sugiero ajustar los dos métodos para hacer un bucle de los datos, ya que esperan un índice de segmento único. Yo uso resetChart y updateChart . Antes de continuar, asegúrese de verificar la última versión y documentación de Chart.js . Es posible que hayan agregado nuevos métodos para reemplazar los datos completamente .

Answer 14

Si alguien está buscando cómo hacer esto en React. Para un gráfico de línea, suponiendo que tiene un componente de envoltura alrededor del gráfico:

(Esto supone que está usando v2. No necesita usar react-chartjs . Esto es usar el paquete chart.js normal de 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 funcionalidad componentDidUpdate permite actualizar, agregar o eliminar cualquier información de this.props.data .

Answer 15

Tuve enormes problemas con esto

Primero probé .clear() luego probé .destroy() e intenté establecer mi referencia de gráfico en nulo

Lo que finalmente solucionó el problema para mí: eliminar el elemento <canvas> y luego volver a solicitar un nuevo <canvas> en el contenedor principal

Hay un millón de maneras de hacer esto:

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);
};

Answer 16

Tuve un montón de problemas con esto también. Tengo datos y etiquetas en matrices separadas y luego reinicializo los datos del gráfico. Agregué el line.destroy (); como se sugirió anteriormente que ha hecho el truco

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