我想使用每个条形值的滑块来更新条形图。但是，我希望条形图随着滑块的变化而动态变化。我已经使用oninput实现了这一点。目前，我有以下内容，这相当滞后。
HTML
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<h1> Plotly Test</h1>
<div id="PlotlyTest" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
<p> Adjust Value 1</p>
<form oninput="amount.value=rangeInput.value">
<input type="range" id="rangeInput" name="rangeInput" min="0" max="100" value="get_min() " oninput="adjustValue1(this.value)">
<output name="amount" for="rangeInput"></output>
</form>
<script src="functionality.js"></script>
</body>
var data = [{
x: ['VALUE 1'], // in reality I have more values...
y: [20],
type: 'bar'
}];
Plotly.newPlot('PlotlyTest', data);
function adjustValue1(value)
{
data[0]['y'][0] = value;
Plotly.redraw('PlotlyTest');
}
this，使用Plotly.redraw并不是最快的方法。但那是什么？
Plotly.animate()函数是更新轨迹的最快方法。
update = {
x: data[0].x,
y: data[0].y,
opacity: 1 // You can do things like change the opacity too
};
Plotly.animate(div="graph", {
data: update,
traces: [0], /* With a bit of work, you can list any other traces you
want to update too (e.g. make a for loop over trace++ and set
update[trace] at each iteration) */
layout: {}
}, {
// These 2 make sure the plot updates as quickly as possible:
transition: {duration: 0},
frame: {duration: 0, redraw: false}
});
.react是最快的，而且速度相当快（我使用的是 v5.18）。我在许多轨迹上有大约 5000 个点，并且只有一个轨迹设置为使用滑块更新。我将滑块分成 100 个间隔，Plotly 将其称为
sl.stepsvar sl = SLIDER.layout.sliders[0] // all event info
var sla = sl.active // this is the hidden tick
var str_coeff = sl.steps[sla].label // string value
var temp_coeff = parseFloat(str_coeff) // the value I want
for (let i = 0 ; i < Nbase; i++) { // update base into chosen curve
SLIDER.data[dest_curve_id].y[i] = base_curve.y[i] + temp_coeff*(temp_curve.y[i] - 25.)
}
Plotly.react(SLIDER, SLIDER.data, SLIDER.layout, config); // and update curves