我想在我的網路界面上顯示一個圖表。我想用 vue js 實作 web 界面。為此，我使用 axios 將資料從后端傳遞到前端。我可以在我的 rsurface 上顯示一個空圖。但是我傳遞的資料沒有顯示。我的代碼有什么問題，我的資料沒有顯示在圖表上。在下面你可以看到我實作的代碼。
<b-container class="ml-auto">
<b-row>
<b-col>
<vue-plotly :data="dataA" :layout="layout" :options="options"/>
</b-col>
</b-row>
</b-container>
export default {
components: {
VuePlotly,
},
data() {
return {
dataA: [{
x: [],
y: [],
}],
layout: {
title: 'ScreePlot',
bargap: 0.05,
xaxis: {
range: [0, 9],
title: 'x',
tick0: 0,
dtick: 1,
},
yaxis: {
range: [0, 2000],
title: 'y',
tick0: 0,
dtick: 1,
},
},
options: {
displayModeBar: false,
responsive: true,
watchShallow: true,
autoResize: true,
},
};
},
mounted() {
this.getScreePlot();
},
methods: {
getScreePlot() {
const path = 'http://localhost:5000/Diagramm';
axios.get(path)
.then((res) => {
this.dataA.x = res.data.x;
this.dataA.y = res.data.y;
})
.catch((error) => {
// eslint-disable-next-line
console.error(error);
});
},
},
};
uj5u.com熱心網友回復：
如果這個定義
dataA: [{
x: [],
y: [],
}],
你應該這樣填寫：
.then((res) => {
this.dataA.push(
{
x: res.data.x,
y: res.data.y
}) ;
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/479056.html
下一篇：nuxt3可以用子目錄重寫url