javascript - 无法覆盖 plotly.js 上的新图
问题描述
嗨,我需要在每次移动滑块时重新绘制我的图形函数。似乎 newPlot 应该可以解决问题,但它没有(我也尝试过重绘),这是代码,我希望你会喜欢它并请找到解决方案。谢谢大家。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="plotly-latest.min.js"></script>
</head>
<body>
<div id="tester" style="width:1000px; height:600px;"></div>
<p> r:<span id="sliderAmount"></span></p>
<p> <input id='lambdaSlider' type="range" min ='-5' max = '5' step = '0.5' value = '1'></input></p>
<script src="./js/plotly_funfamily.js"></script>
</body>
<script>
TESTER = document.getElementById('tester');
var r = document.getElementById("lambdaSlider").value;//TAKES R VALUE FROM SLIDER
//GETS THE VALUES
var exp="Math.exp(k)";
var xValues = [];
var yValues = [];
for (var x = -11; x <= 11; x += 0.1) {
var k=r*x;
xValues.push(x);
yValues.push(eval(exp));}
var trace_init = {x:xValues, y:yValues, mode:"lines"};
var data = [trace_init];
不要介意布局
var layout = {
autosize: false,
margin: {l: 50, r: 50, b: 50, t: 0, pad: 2},
//paper_bgcolor: '#7f7f7f',
//plot_bgcolor: '#c7c7c7',
//width: 500,
//height: 500,
xaxis: {
range: [-10, 10],
autotick: false,
ticks: 'outside',
tick0: 0,
dtick: 1,
ticklen: 7,
tickwidth: 1,
tickcolor: '#000',
showgrid: true,
zeroline: true,
//showline: true,
//gridcolor: '#bdbdbd',
gridwidth: 1,
//zerolinecolor: '#969696',
zerolinewidth: 1,
//linecolor: '#636363',
//linewidth: 6
nticks: 20,
domain: [1, 1], //mantiene il rapporto 1:1 fra x e y
},
yaxis: {
range: [-1, 10],
autotick: false,
ticks: 'outside',
tick0: 0,
dtick: 1,
ticklen: 7,
tickwidth: 1,
tickcolor: '#000',
showgrid: true,
zeroline: true,
//showline: true,
//gridcolor: '#bdbdbd',
//gridwidth: 2,
//zerolinecolor: '#969696',
zerolinewidth: 1,
//linecolor: '#636363',
//linewidth: 6
scaleanchor: "x",
domain: [1, 1],
}
};
我在这里画了第一张图
Plotly.newPlot( TESTER, data, layout, {scrollZoom: true, displaylogo: false,
modeBarButtonsToRemove['toImage','zoom2d','zoomIn2d',
'zoomOut2d','select2d','lasso2d','resetViews','toggleSpikelines','hoverClosestCartesian',
'hoverCompareCartesian','resetScale2d','autoScale2d']});
这会更新值 n
//UPDATES THE GRAPH
function update(){
var r = document.getElementById("lambdaSlider").value;
var exp="Math.exp(k)";
for (var x = -11; x <= 11; x += 0.1) {
var k=r*x;
xValues.push(x);
yValues.push(eval(exp));}
data1 = [{x:xValues, y:yValues, mode:trace_init.mode}];
Plotly.newPlot('tester', data1, layout, {scrollZoom: true, displaylogo: false,
modeBarButtonsToRemove: ['toImage','zoom2d','zoomIn2d',
'zoomOut2d','select2d','lasso2d','resetViews','toggleSpikelines','hoverClosestCartesian',
'hoverCompareCartesian','resetScale2d','autoScale2d']});}
// CHANGES OF THE SLIDER
var slide = document.getElementById('lambdaSlider');
var sliderDiv = document.getElementById("sliderAmount");
sliderDiv.innerHTML = document.getElementById('lambdaSlider').value;
slide.oninput = function() {
sliderDiv.innerHTML = this.value;
update(this.value)}
</script>
</html>
解决方案
推荐阅读
- c# - 在 WinForm 中单击按钮时在远程 PC 上启动应用程序
- bash - 我需要使用 UNIX shell 脚本在 hive 分区表中选择和删除超过 100 天的 hdfs 文件?
- javascript - 保存传单地图图块以供离线使用
- c# - 为什么在 web api C# 的 post 方法中将字符串变量的值传递为 null
- azure - 如何创建 Azure 警报以通知任何资源删除
- javascript - 将数组作为参数传递时调用和应用之间的实际区别
- flutter - 如何将代码语法高亮添加到flutter_markdown
- c++ - 莫名其妙的行为:没有为 STL 列表执行覆盖的方法
- linux - 在某个目录中列出日志文件并创建 tar 文件
- c# - unity 奇数 NullExceptionReference