gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 00:12:21 24 4
gpt4 key购买 nike

我想使用滑动条更新我的条形图,以显示每个条形的值。但是,我希望条形图随着 slider 的变化 动态变化。我使用 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');
}

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

关于javascript - 使用 Plotly 中的新数据更新图形的高性能方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35946484/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com