Question

我正在尝试使用plotly.js，并希望制作一个根据下拉选择进行更改的情节。我也在我的代码中使用jQuery和bootstrap。我遇到的问题是，当进行新的选择时，它会在同一轴上重新绘制一条新线，前一条线仍然在图上，而不是完全重新绘制一个替换上一个选择图的新图。我试图在jQuery中探索.empty（）方法，但无法使其正常工作。任何人都可以在下面的代码中发现我可以更改的内容，以便只绘制新的选择吗？

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Plotly Test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script>
  </head>
  <body>

  <div>
    <div class="btn-group">
      <button id="plot-drop-button" type="button" class="btn btn-primary">Select</button>
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
      </button>
      <ul id="plot-drop" class="dropdown-menu" role="menu">
        <li value="1"><a href="#">1</a></li>
        <li value="2"><a href="#">2</a></li>
        <li value="3"><a href="#">3</a></li>
      </ul>
    </div>
    <div id="tester" style="height:350px"></div>
  </div>

  <script src="plotly_test.js"></script>
  </body>
</html>

JS

$('#plot-drop li').click( function(event) {
  event.preventDefault(); 
  TESTER = document.getElementById('tester');
  var val = $(this).attr('value');
  $("#plot-drop-button").html(val);
  var a = parseFloat(val);
  var trace1 = {x: [1, 2, 3, 4, 5], y: [1, 2, 4, 8, 16 + a] };
  var data = [trace1];
  Plotly.plot( TESTER, data, { margin: { t: 0 } } );
});

Answer 1

我设法回答了我自己的问题。我需要更换：

Plotly.plot()

使用：

Plotly.newPlot()

仅使用jQuery和plotly.js绘制新的下拉列表选择

1 个答案: