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

플롯의 모든이 올바르게 표시됩니다 : 나는 플롯을 추가하는 방법
다음

당신이 볼 수 있습니다. 그러나 그림을 확대/축소하거나 저장하는 것과 같은 "functions"은 마지막 플롯 인에 대해서만 작동합니다. 호버링에 대한 정보와 동일합니다.

여러 페이지를 검색했지만 해결 방법을 찾지 못했습니다.

ioslides 프리젠 테이션을 사용할 때 같은 문제가있는 github에 문제가 있습니다. 그러나 나는 isoslides를 사용하지 않는다. https://github.com/ropensci/plotly/issues/463

누군가가 알고 있습니까, 어떻게 모든 기능을 갖춘 동일한 페이지에서 여러 플롯 플롯을 사용합니까?
는

출처

2016-10-05 Tobias Etter

CNAME은 무엇입니까? 새로운 플롯을 만들 수 있지만 모두 동일한 객체를 참조 할 수 있습니까? –

cname은 id (a.ex. plot1, plot2) –

인 변수입니다. 바닐라 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 같은 페이지

답변

관련 문제