Plotly.js只有一個情節

同一頁

使用多條曲線，當我試圖使用Plotly我聚合物應用顯示在同一頁上多條曲線的工作。Plotly.js只有一個情節

在這裏你可以看到，我怎麼加的情節：

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像縮放或保存爲圖像做只適用於最後一個陰謀。懸停信息也一樣。

我搜索了幾頁，但沒有找到解決方案。

在使用ioslides演示文稿時，在github上存在一個與使用相同問題的問題。但我不使用isoslides。 https://github.com/ropensci/plotly/issues/463

有人知道，如何使用所有功能在同一頁上的多個情節劇情？

謝謝

來源

2016-10-05 Tobias Etter

什麼是CNAME？是否有可能創建新圖，但它們都指向同一個對象？ –

cname是帶有id的變量（a.ex. plot1，plot2） –

它與vanilla JS完美結合。你可以添加你的聚合物代碼的小提琴嗎？ –

這個例子有幫助嗎？

HTML：

<html> 

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

    <body> 
    <script data-require="[email protected]" 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

來源

2016-10-11 01:31:58 abalter

Plotly.js只有一個情節

回答

相關問題