用 Plotly 中的新数据更新图形的高性能方法? [英] High performance way to update graph with new data in Plotly?
问题描述
我想使用每个条形值的滑块来更新条形图.但是，我希望条形随着滑块的变化 动态变化.我使用 oninput 实现了这一点.目前，我有以下内容，这是相当滞后的.
I want to update my bar chart using a slider bar for the values of each bar. However, I want the bars to dynamically change as the slider changes. I have achieved this using oninput. Currently, I have the following, which is quite laggy.
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>
JS
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 不是最快的方法.但那又是什么呢?
According to this, using Plotly.redraw isn't the fastest method. But then what is?
推荐答案
我很快就把它放在一起了(好吧，我花了很大的精力才知道如何去做；我刚刚修改了我的一些工作完成以适合此答案).据我所知，Plotly.animate() 函数是更新轨迹的最快方法.
I have quickly thrown this together (well, it took a great deal of effort to find out how to do it; I've just modified some work I had done to suit this answer). The Plotly.animate() function is the quickest way to update traces, as far as I can tell.
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}
});
这篇关于用 Plotly 中的新数据更新图形的高性能方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
