如何在javascript中更新第二轴的数据？
如何在javascript中更新第二轴的数据？
提问于 2020-03-25 18:19:12
代码如下：
var trace1 = {
x: [1, 2, 3],
y: [40, 50, 60],
name: 'yaxis data',
type: 'scatter'
};
var trace2 = {
x: [2, 3, 4],
y: [4, 5, 6],
name: 'yaxis2 data',
yaxis: 'y2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: 'Double Y Axis Example',
yaxis: {title: 'yaxis title'},
yaxis2: {
title: 'yaxis2 title',
titlefont: {color: 'rgb(148, 103, 189)'},
tickfont: {color: 'rgb(148, 103, 189)'},
overlaying: 'y',
side: 'right'
}
};
Plotly.newPlot('myDiv', data, layout);<head><script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head>
<div id="myDiv"></div>
我只想更新第二个轴yaxis2上的数据。我想避免数据冗余，因此我不想转发其他数据。
请告诉我我能做些什么。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-26 00:04:11
你要找的是Plotly.react，或者Plotly.addTraces/Plotly.deleteTraces。这是docs。
为了更新数据，你不能改变数据。您需要创建数据的一个新的不可变实例(reference)。
因此，您可以复制数据并执行以下操作：
Plotly.react('myDiv', data.map((trace, i) => {
if (i != 1) return trace;
return <new trace>
})或者，您可以删除跟踪并重新添加它：
const newTrace = {...} // some trace object
Plotly.deleteTraces('myDiv', 1); // remove at index 1
Plotly.addTraces('myDiv', newTrace);以下是在1秒超时后更新绘图的示例：
var trace1 = {
x: [1, 2, 3],
y: [40, 50, 60],
name: 'yaxis data',
type: 'scatter'
};
var trace2 = {
x: [2, 3, 4],
y: [4, 5, 6],
name: 'yaxis2 data',
yaxis: 'y2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: 'Double Y Axis Example',
yaxis: {title: 'yaxis title'},
yaxis2: {
title: 'yaxis2 title',
titlefont: {color: 'rgb(148, 103, 189)'},
tickfont: {color: 'rgb(148, 103, 189)'},
overlaying: 'y',
side: 'right'
}
};
Plotly.newPlot('myDiv', data, layout);
setTimeout(() => {
const newTrace = {
x: [2, 3, 4],
y: [4, 10, 20],
name: 'yaxis2 data',
yaxis: 'y2',
type: 'scatter'
}
// delete the second trace (index 1) or delete multiple traces with Plotly.deleteTraces('myDiv', [0,1])
Plotly.deleteTraces('myDiv', 1);
// add a new trace
Plotly.addTraces('myDiv', newTrace);
}, 1000)<head><script src="https://cdn.plot.ly/plotly-latest.min.js"></script></head>
<div id="myDiv"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60846773
复制相关文章
相似问题
腾讯云开发者
