英文:
Plotly.extendTraces don't accept hovertext update
问题
I've translated the non-code part of your text as you requested:
"我在这里一直在纠结。我已经建立了一个不错的图表，但不幸的是，悬停文本无法工作。请查看代码中的最后几行；我已经进行了相应的注释。没有悬停文本，我可以得到一个不错的图表，但有了它，我就不行了。我收到的错误消息是：
Uncaught Error Error: 无法扩展缺失或非数组属性：hovertext
我不太确定还需要解释关于这个问题的什么。
这是我的代码："
Please note that I've translated the text but excluded the code, as per your request. If you have any further questions or need assistance with the code itself, please feel free to ask.
英文:
I'm running in circles here. I've built a nice plot, but unfortunately, the hover text isn't working. Please see the last lines in the code; I've commented accordingly. Without the hover text, I get a decent graph, but with it, I don't. The error message I'm receiving is:
Uncaught Error Error: cannot extend missing or non-array attribute: hovertext
I'm not sure what else to explain about the problem.
Here's my code:
<!DOCTYPE html>
<html lang="de">
<head>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://cdn.plot.ly/plotly-2.16.1.min.js"></script>
<title>Temperatur Graph</title>
</head>
<body>
<div id="temp" class="subgraphcontent">
<div class="row" style="padding: 30px;">
<div id="temp_graph_wrapper" class="border border-2" style="padding: 5px;">
<div id="temp_plot"></div>
</div>
</div>
</div>
<div class="temp_graph_div" theta0="1220" theta1_vert="1219" theta2_vert="1219" theta3_vert="1220"
theta4_vert="1219" theta1_hori="1219" theta2_hori="1219" theta3_hori="1221" theta4_hori="1221" counter="1">
</div>
<div class="temp_graph_div" theta0="1221" theta1_vert="1220" theta2_vert="1219" theta3_vert="1220"
theta4_vert="1219" theta1_hori="1218" theta2_hori="1218" theta3_hori="1221" theta4_hori="1220" counter="2">
</div>
<div class="temp_graph_div" theta0="1219" theta1_vert="1217" theta2_vert="1217" theta3_vert="1217"
theta4_vert="1217" theta1_hori="1216" theta2_hori="1216" theta3_hori="1219" theta4_hori="1218" counter="3">
</div>
</body>
<script>
function setup_temp_graph() {
var graphdiv = document.getElementById("temp_plot")
var layout = {
title: 'Temperatur',
height: 700,
width: 930,
showlegend: false,
yaxis: {
ticksuffix: "°C",
gridwidth: 1,
color: 'black',
gridcolor: 'black'
},
xaxis: {
tickmode: "linear",
tickvals: [0],
ticktext: [""],
gridwidth: 1,
color: 'black',
gridcolor: 'black'
},
shapes: [
]
};
var trace1 = {
y: [],
x: [],
type: 'scatter',
};
var data = [trace1];
Plotly.newPlot(graphdiv, data, layout, { displayModeBar: false }, { responsive: true });
}
$(document).ready(function () {
setup_temp_graph();
$('.temp_graph_div').each(function () {
var $this = $(this);
var theta0 = $this.attr("theta0");
var theta1_vert = $this.attr("theta1_vert");
var theta2_vert = $this.attr("theta2_vert");
var theta3_vert = $this.attr("theta3_vert");
var theta4_vert = $this.attr("theta4_vert");
var counter = parseInt($this.attr("counter"));
update_temp_graph(
theta0, theta1_vert, theta2_vert, theta3_vert, theta4_vert, counter
);
});
});
function update_temp_graph(theta0, theta1_vert, theta2_vert, theta3_vert, theta4_vert, counter) {
if (theta0 === "" || theta1_vert === "" || theta2_vert === "" || theta3_vert === "" || theta4_vert === "" || counter === "") {
return; // Exit the function if any of the variables is empty
}
var graphDiv = document.getElementById("temp_plot");
var xValues = 0+网站访问量;
var yValues = [];
var hoverText = [];
if (counter == 1) {
xValues.unshift(0); // Add 0 to the beginning of the xValues array
yValues.push(parseFloat(theta0));
hoverText.push('Einlauf');
}
yValues = yValues.concat([
parseFloat(theta1_vert.replace(",", ".")),
parseFloat(theta2_vert.replace(",", ".")),
parseFloat(theta3_vert.replace(",", ".")),
parseFloat(theta4_vert.replace(",", "."))
]);
hoverText = hoverText.concat([
'Strahlung vertical',
'Abspritzen vertical',
'Umformung vertical',
'Leitung vertical',
]);
var traceUpdate = {
x: xValues,
y: yValues,
text: hoverText,
hoverinfo: 'text',
hovertext: hoverText,
mode: 'lines+markers',
type: 'scatter',
connectgaps: false
};
Plotly.update(graphDiv, traceUpdate, 0);
//the next line works, but without hovertext
// Plotly.extendTraces(graphDiv, { y: [yValues], x: [xValues] }, [0]);
//the next line crashes the graph
// Plotly.extendTraces(graphDiv, { hovertext: [hoverText] }, [0]);
}
</script>
</html>
PS: By the way, I have already extensively tortured ChatGPT on this topic. It doesn't help. And with my fairly extensive programming knowledge, I'm also at a dead end. Well, JavaScript is not really my language.
答案1
得分: 2
可以尝试在初始的跟踪设置中将 hovertext 定义为空数组吗？
Plotly.extendTraces 只能添加到现有的数组中（不能创建新数组）。
如果您试图扩展的属性在跟踪数据中尚未定义为数组，那就可以解释您看到的错误（Uncaught Error Error: cannot extend missing or non-array attribute: hovertext）。
var trace1 = {
y: [],
x: [],
hovertext: [], // <--
type: 'scatter',
};
然后，这应该可以工作：
Plotly.extendTraces(graphDiv, { hovertext: [hoverText] }, [0]);
英文:
Can you try and define, in your initial trace setup, hovertext as an empty array?
Plotly.extendTraces can only add to existing arrays (not create new ones).
If the attribute you are trying to extend is not already defined as an array in your trace data, that would explain the error you are seeing (Uncaught Error Error: cannot extend missing or non-array attribute: hovertext).
var trace1 = {
y: [],
x: [],
hovertext: [], // <--
type: 'scatter',
};
Then, this should work:
Plotly.extendTraces(graphDiv, { hovertext: [hoverText] }, [0]);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论