Я экспериментирую с plotly.js и хотел бы создать график, который меняется в зависимости от выпадающего списка. Я использую jQuery и загрузчик в моем коде также. Проблема, с которой я столкнулся, заключается в том, что при создании нового выделения он перерисовывает новую линию на той же оси, а предыдущие линии все еще находятся на графике, а не полностью перерисовывают новый график, который заменяет график предыдущего выбора. Я попытался изучить метод .empty () в jQuery, но не смог заставить его работать должным образом. Кто-нибудь может заметить, что я могу изменить в приведенном ниже коде, чтобы отображался только новый выбор?
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 } } );
});