Plotly.js 在同一页上使用多个绘图时只有一个绘图有效

Question

我正在尝试使用 Plotly 在我的 Polymer 应用程序同一页面上显示多个绘图.

在这里你可以看到，我是如何添加地块的：

var layout = {
    hovermode: 'closest',
    title: title,
    xaxis: {
        title: title,
        titlefont: {
            family: 'Arial, monospace',
            size: 20,
            color: '#7f7f7f'
        }
    },
    yaxis: {
        title: 'Trigger rate',
        titlefont: {
            family: 'Arial',
            size: 20,
            color: '#7f7f7f'
        }
    }
};


for(var i=0; i<25; i++) {

    var data = [{
        x: xtime,
        y: yrate,
        name: 'DM'+i,
        text: hints,
        type: 'Scatter+Lines'

    }];

    cname="plot"+i;
    appendDiv(cname);
    Plotly.newPlot(cname, data, layout, {showLink: false});

}

所有绘图均正确显示。但是 Plotly 的所有“功能”，如缩放或另存为图像 仅适用于最后一个情节 。悬停信息也一样。

找了好几页都没找到解决方法。

github 上存在一个问题，在使用 ioslides 演示文稿时存在同样的问题。但我不使用 isoslides。 https://github.com/ropensci/plotly/issues/463

有人知道如何在同一页面上使用多个 plotly plots 的所有功能吗？

谢谢

Answer 1

这个例子有帮助吗？

HTML:

<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
  <script data-require="plotly@1.0.0" data-semver="1.0.0" src="https://cdn.plot.ly/plotly-latest.min.js" defer></script>
  <script src="script.js" defer></script>
  </body>

</html>

JAVASCRIPT:

var layout = 
{
    width: 500,
    height: 400,
    hovermode: 'closest',
    title: "title",
    xaxis: {
        title: "X",
        titlefont: {
            family: 'Arial, monospace',
            size: 20,
            color: '#7f7f7f'
        }
  },
  yaxis: {
      title: 'Y',
      titlefont: {
          family: 'Arial',
          size: 20,
          color: '#7f7f7f'
      }
  }
};

var x_vals = [];
for (var i = 0; i < 10; i++)
{
  x_vals.push(i);
}

function makeYVals(x)
{
    var y_vals = x.map(function(x)
  {
    return 2 + 1.3*x + (1 - 2*Math.random());
  });

  return y_vals;
}

for (var graph_num = 0 ; graph_num < 3; graph_num++)
{
  var graph_div = document.createElement("div");
  graph_div.id = "graph-" + graph_num;
  document.body.appendChild(graph_div);

  console.log(graph_div.id);

  var y_vals = makeYVals(x_vals);

  var data = 
  {
    x: x_vals,
    y: y_vals,
    mode: 'lines+markers',
    type: 'scatter'
  };

  layout.title = "Graph " + graph_num;

  console.log(data);

  Plotly.newPlot(graph_div, [data], layout);
}

http://plnkr.co/edit/XluyqzOLOYAtdzp9EevX?p=preview

Plotly.js 在同一页上使用多个绘图时只有一个绘图有效

Plotly.js only one plot working when using multiple plots on same page

javascript

plot

polymer

plotly