使用 plotly-js 绘制多个支持 extendTrace 的变量。

问题描述 投票：0回答：1

下面的代码可以用plotly-js绘制一个变量（比如x）的实时图。

<html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
    <div class="navbar"><span>Real-Time Chart with Plotly.js</span></div>
    <div class="wrapper">
        <div id="chart"></div>
        <script>
            function getDatax() {
                return Math.random();
            }  
            function getDatay() {
                return Math.random();
            } 
            function getDataz() {
                return Math.random();
            }
            Plotly.plot('chart',[{
                y:[getDatax()],
                type:'line'
            }]);

            var cnt = 0;
            setInterval(function(){
                Plotly.extendTraces('chart',{ y:[[getDatax()]]}, [0]);
                cnt++;
                if(cnt > 500) {
                    Plotly.relayout('chart',{
                        xaxis: {
                            range: [cnt-500,cnt]
                        }
                    });
                }
            },15);
        </script>
    </div>
    </body>
</html>

现在，我的问题是，如果我想在同一个图形中以同样的方式绘制y和z，我需要修改哪些行？

我已经修改了

 Plotly.plot('chart',[{
                y:[getDatax(),getDatay(),getDataz()],
                type:'line'
            }]);

            var cnt = 0;
            setInterval(function(){
                Plotly.extendTraces('chart',{ y:[[getDatax()],[getDatay()],[getDataz()]});

但出来的图是不正确的。我的错误在哪里？同时绘制3个变量的正确代码是什么？

javascript html plot plotly
1个回答
0
投票

如果你的意思是让你的图表有多条线，那么这个就有帮助了

function getDatax() {
  return Math.random();
}

function getDatay() {
  return Math.random();
}

function getDataz() {
  return Math.random();
}
Plotly.plot('chart', [{
  y: [getDatax(), getDatax(), getDatax(), getDatax(), getDatax(), getDatax()],
  type: 'line'
}, {
  y: [getDataz(), getDataz(), getDataz(), getDataz(), getDataz()],
  type: 'line'
}]);
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div class="navbar"><span>Real-Time Chart with Plotly.js</span></div>
  <div class="wrapper">
    <div id="chart"></div>
  </div>
</body>

</html>

使之成为实时的。

function getDatax() {
  return Math.random();
}

function getDatay() {
  return Math.random();
}

function getDataz() {
  return Math.random();
}
Plotly.plot('chart', [{
  y: [getDatax(), getDatax(), getDatax(), getDatax(), getDatax(), getDatax()],
  type: 'line'
}, {
  y: [getDataz(), getDataz(), getDataz(), getDataz(), getDataz()],
  type: 'line'
}]);
var cnt = 0;
setInterval(function() {
  Plotly.extendTraces('chart', {
    y: [
      [getDatax()]
    ]
  }, [0]);
  Plotly.extendTraces('chart', {
    y: [
      [getDataz()]
    ]
  }, [1]);
  cnt++;
  if (cnt > 500) {
    Plotly.relayout('chart', {
      xaxis: {
        range: [cnt - 500, cnt]
      }
    });
  }
}, 15);
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div class="navbar"><span>Real-Time Chart with Plotly.js</span></div>
  <div class="wrapper">
    <div id="chart"></div>
  </div>
</body>

</html>

希望对你有帮助

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.