在图中扩展多个图形的跟踪

时间:2016-08-12 18:21:05

标签: javascript plotly

var $graphs=jQuery('#graphs');
var count=2;
socket.once('temp', function(temp){
  for (var i = 0, len = temp.length; i < len; i++) {
    jQuery('<div>', {
      'class': 'myDiv2',
      'id': 'myDiv' + count,
    }).appendTo($graphs);
    var x=document.getElementById('myDiv' + count);
    Plotly.newPlot(x, data, layout);
    count++;
  };
});


 setInterval(function(){
          var currentdate = new Date();
          var time =currentdate.getHours()%12 + ":" + currentdate.getMinutes() + ":" + currentdate.getSeconds() +  ":" + currentdate.getMilliseconds();
          var final=2;
          socket.once('temp', function(temp){
            for (var i = 0, len = temp.length; i < len; i++) {
              var x=document.getElementById('myDiv' + final);
              console.log(x);
              var update = {
                x: [[time]],
                y: [[temp[i]]]
              };
              Plotly.extendTraces(x, update, [0], points);
              final++;
            }
          });
        }, seconds*1000);

我遇到了问题。我有一个名为temp的数组,其中包含我想要绘制的值。例如,如果temp = [0,1,2],我想要绘制图1中的元素0,图2中的元素1和图3中的元素2.使用上面的代码,所有元素都被绘制在所有元素中图表。有什么想法??

1 个答案:

答案 0 :(得分:0)

如果你想扩展折线图,这里就是一个例子,

var data = {
    x: [[1]],
    y: [[2]]
}
Plotly.extendTraces(plotlyDiv, data, 0, 20);
// plotlyDiv is graph container
// data is graph data
// 0 is index of graph (important if you have multiple graph/trace)
// 20 maximum number of element to show

链接到功能参考:https://plot.ly/javascript/plotlyjs-function-reference/#plotlyextendtraces