我在这里兜圈子。我已经构建了一个不错的情节，但不幸的是，悬停文本不起作用。请查看代码中的最后几行；我已做出相应评论。如果没有悬停文本，我会得到一个不错的图表，但有了它，我就得不到。我收到的错误消息是:
Uncaught Error Error: cannot extend missing or non-array attribute: hovertext
我不知道还有什么可以解释这个问题。
这是我的代码:
<!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 = [counter - 0.5, counter - 0.4, counter - 0.3, counter];
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:顺便说一句，我已经在这个话题上广泛折磨过 ChatGPT 了。这没有帮助。凭借我相当广泛的编程知识，我也陷入了死胡同。嗯，JavaScript 并不是我真正的语言。
最佳答案
您可以尝试在初始跟踪设置中将 hovertext 定义为空数组吗？
Plotly.extendTraces只能添加到现有数组(不能创建新数组)。
如果您尝试扩展的属性尚未在跟踪数据中定义为数组，则可以解释您所看到的错误(未捕获错误错误:无法扩展丢失或非数组属性:hovertext)。
var trace1 = {
y: [],
x: [],
hovertext: [], // <--
type: 'scatter',
};
然后，这应该可以工作:
Plotly.extendTraces(graphDiv, { hovertext: [hoverText] }, [0]);
关于javascript - Plotly.extendTraces 不接受悬停文本更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/76435779/