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});

}

所有图表都正确显示。但所有＆＃34; 功能＆＃34; Plotly喜欢缩放或保存为图像仅适用于最后一个情节。有关悬停的信息也一样。

我在几个页面上搜索过，但没有找到解决方案。

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

有人知道，如何在同一页面上使用多个情节图并具有所有功能？

谢谢

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在同一页面上使用多个绘图时只有一个绘图工作

1 个答案: