使用Plotly中的新数据更新图形的高性能方法

High performance way to update graph with new data in Plotly?

本文关键字：更新 图形 数据 高性能 方法 Plotly 新数据 使用      更新时间：2023-09-26

我想使用滑块更新每个条形值的条形图。但是，我希望条形图随着滑块的变化而动态变化。我已经使用 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>

.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');
}

据此，使用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}
});
相关文章：