javascript-Plotly.extendTraces仅适用于两个跟踪,但不适用于三个

前端之家收集整理的这篇文章主要介绍了javascript-Plotly.extendTraces仅适用于两个跟踪,但不适用于三个 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

  1. function getData() {
  2. return Math.random();
  3. };
  4. function plotGraph(graph_div) {
  5. let UPDATE_INTERVAL = 300;
  6. Plotly.plot(graph_div,[{
  7. y: [1,2,3].map(getData),name: 'x',mode: 'lines',line: { color: '#80CAF6' }
  8. },{
  9. y: [1,name: 'y',line: { color: '#DF56F1' }
  10. },name: 'z',line: { color: '#4D92E9' }
  11. }]);
  12. var cnt = 0;
  13. var interval = setInterval(function () {
  14. var time = new Date();
  15. Plotly.extendTraces(graph_div,{
  16. y: [[getData()],[getData()],[getData()]]
  17. },[0,1])
  18. cnt = cnt+1;
  19. if (cnt === 100) clearInterval(interval);
  20. },UPDATE_INTERVAL);
  21. }

错误

  1. plotly-latest.min.js:7 Uncaught Error: attribute y must be an array of length equal to indices array length
  2. at plotly-latest.min.js:7
  3. at R (plotly-latest.min.js:7)
  4. at Object.t [as extendTraces] (plotly-latest.min.js:7)
  5. at realtime_vis.js:40

指向

  1. Plotly.extendTraces(graph_div,1])

官方文档中的示例仅显示了如何绘制2条线,但该示例不适用于3条线.
有什么帮助吗?我假设我可以显式指定数组的大小?!

最佳答案
Plotly文档并不清楚here,但是第三个参数是要修改的打印索引数组.

在您的情况下,您要告诉Plotly修改[0,1],但要提供3个新的y值.如果将其更改为[0,1,2],它应该可以工作,或者您只能提供两个新的y值.

  1. function getData() {
  2. return Math.random();
  3. };
  4. Plotly.plot(graph_div,[{
  5. y: [1,line: { color: '#80CAF6' }
  6. },{
  7. y: [1,line: { color: '#DF56F1' }
  8. },line: { color: '#4D92E9' }
  9. }]);
  10. var cnt = 0;
  11. var interval = setInterval(function () {
  12. var time = new Date();
  13. Plotly.extendTraces(graph_div,{
  14. y: [[getData()],[getData()]]
  15. },2])
  16. cnt = cnt+1;
  17. if (cnt === 100) clearInterval(interval);
  18. },300);
  1. <head>
  2. <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  3. </head>
  4. <body>
  5. <div id="graph_div"></div>
  6. </body>

猜你在找的JavaScript相关文章