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

问题

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>

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

According to this, using Plotly.redraw isn't the fastest method. But then what is?

回答1:

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

来源：https://stackoverflow.com/questions/35946484/high-performance-way-to-update-graph-with-new-data-in-plotly

标签

javascript

plotly