Plotly.jsを使って動的にグラフを作成/削除/再レイアウトするのに最適な方法は？

Question

私のページ上のボタンを使ってグラフを追加、削除したい。 レイアウトとデータをJsonとしてplotly.plot（）関数に渡す必要があります。 これをどのように動的に行うことができますか？

基準からのサンプルコード：

var trace1 = { 
    x: [1, 2, 3, 4], 
    y: [10, 15, 13, 17], 
    type: 'scatter' 
}; 

var trace2 = { 
    x: [1, 2, 3, 4], 
    y: [16, 5, 11, 9], 
    type: 'scatter' 
}; 

var data = [trace1, trace2]; 

var layout = { 
    width: 500, 
    height: 500 
}; 

Plotly.newPlot('myDiv', data,layout); 

iがデータベースからAJAXを介して自分のデータを受け取ります。

function getTrace_data(x,y) { 
    $.ajax({ 
    type: "GET", 
    url: "get.php?action=data&x="+x+"&y="+y 
    dataType: "json", 
    success: function(data){ 
     drawGraph(data); 
    }, 
    error: function(error){ 
     console.log(error); 
    } 
    }); 
} 

function drawGraph(data) 
{ 
    var trace1 = { 
    x: data.x, 
    y: data.y, 
    type: 'scatter' 
    }; 

    var layout = { 
    width: 500, 
    height: 500 
    }; 
    Plotly.newPlot('myDiv', data,layout); 
} 

グラフを描画することはできますが、グラフの種類を動的に変更するにはどうすればよいですか。またはレイアウトオプション？

Answer 1

既存のグラフを新しいグラフで上書きし、グラフのレイアウトをいくつかの変数で動的に変更することができます。以下のスニペットをご覧ください。ボタンが異なるAJAX呼び出しであると仮定してください。

function changeGraph(graphType) { 
 
    var traces = []; 
 
    var graph_types = []; 
 
    var myDiv = document.getElementById("mydiv"); 
 
    switch (graphType) { 
 
    case 1: 
 
     graph_types.push("scatter"); 
 
     graph_types.push("bar"); 
 
     break; 
 
    case 2: 
 
     graph_types.push("bar"); 
 
     graph_types.push("bar"); 
 
     break; 
 
    default: 
 
     graph_types.push("scatter"); 
 
     graph_types.push("scatter"); 
 
    } 
 
    traces.push({ 
 
     x: [1, 2, 3, 4], 
 
     y: [10, 15, 13, 17], 
 
     type: graph_types[0] 
 
    }); 
 

 
    traces.push({ 
 
     x: [1, 2, 3, 4], 
 
     y: [16, 5, 11, 9], 
 
     type: graph_types[1] 
 
    }); 
 

 
    var layout = { 
 
     width: 500, 
 
     height: 500 
 
    }; 
 

 
    Plotly.newPlot(myDiv, traces, layout); 
 
} 
 

 
document.getElementById("button0").addEventListener("click", function() { 
 
    changeGraph(0); 
 
}); 
 
document.getElementById("button1").addEventListener("click", function() { 
 
    changeGraph(1); 
 
}); 
 
document.getElementById("button2").addEventListener("click", function() { 
 
    changeGraph(2); 
 
}); 
 

 
document.getElementById("button0").click();

<script src=https://cdn.plot.ly/plotly-latest.min.js></script> 
 
<div id="mydiv"></div> 
 

 
<button id="button0">Scatter only</button> 
 
<button id="button1">Bar&Scatter</button> 
 
<button id="button2">Bars only</button>