ajouter des données à graphique en utilisant c3.js

J'ai un graphique, dans lequel je voudrais ajouter plus de données sans remplacer les données que j'ai, soit avec un .push ou en ajoutant un ensemble de données sans perdre ceux que j'ai précédemment .ajouter des données à graphique en utilisant c3.js

Comment puis-je faire?

columns: [ 
     ['data1', -4,3,4,7,8,9,8,7,3], 
     ['data1_x', -5,2,3,4,5,4,3,2,1],

. . .

//I need add the new data withouth remove the previous data 

chart.load({ 
    xs: { 
     data1: 'data1_x' 
    }, 
    columns: [ 
     ["data1_x", 3,6], 
     ["data1", 5,8] 
    ] 
});

https://jsfiddle.net/aL8xhgpn/

Source

2017-09-21 yavg

Vous pouvez déplacer les données dans un tableau

var data1 = ['data1',-4,3,4,7,8,9,8,7,3]; 
    var data1_x = ['data1_x', -5,2,3,4,5,4,3,2,1];

et pousser des données en elle.

Échantillon de travail ci-dessous.

var data1 = ['data1',-4,3,4,7,8,9,8,7,3]; 
 
\t \t var data1_x = ['data1_x', -5,2,3,4,5,4,3,2,1]; 
 
\t \t var chart = c3.generate({ 
 
     data: { 
 
     xs: { 
 
      data1: "data1_x", 
 
      data2: "data2_x" 
 
     }, 
 
     xSort: false, 
 
     columns: [ 
 
      data1, 
 
      data1_x, 
 
      ['data2', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10], 
 
      ['data2_x', Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10,Math.random() * 10] 
 
     ] 
 

 
     }, 
 
     axis: { 
 
     x: { 
 
      tick: { 
 
      values: d3.range(-5,10) 
 
      } 
 
     } 
 
     } 
 
    }); 
 

 
       chart.internal.xAxis.g.attr('transform', "translate(0," + chart.internal.y(0) + ")"); 
 
       chart.internal.yAxis.g.attr('transform', "translate(" + chart.internal.x(0) + ", 0)"); 
 
data1.push(5) 
 
data1.push(8) 
 
data1_x.push(3) 
 
data1_x.push(6) 
 

 

 
setTimeout(load, 5000); 
 
function load(){ 
 
    chart.load({ 
 
     xs: { 
 
      data1: 'data1_x' 
 
     }, 
 
     columns: [ 
 
      data1_x, 
 
      data1 
 
     ] 
 
    }); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.18/c3.js"></script> 
 
<div id="chart"></div>

Source

2017-09-21 07:39:34 Cyril

Wow! Ton intelligence me surprend. Juste un détail et j'espère que vous pourrez m'aider. Comment puis-je générer une animation lorsqu'un nouveau point est ajouté (sans redémarrer tous les points du graphique). ce changement semble très abrupt. – yavg

mis à jour le code dans ma réponse utilisé timeout il mettra à jour après 5 secs., Avec animation – Cyril

merci beaucoup ami !. Cela montre que vous en savez beaucoup. J'avais fait le settimeout, mais ce que je veux dire, c'est qu'il n'y a pas d'animation quand vous ajoutez un point. Je voudrais voir une animation générée avec les points qui sont ajoutés, point à point. quelque chose comme ceci: https://jsfiddle.net/ej0wLtv6/ – yavg

ajouter des données à graphique en utilisant c3.js

Répondre

Questions connexes