Javascript 我正在尝试从flask应用程序获取数据,但我得到了“未捕获的引用错误:\未定义数据”
我正在尝试从flask应用程序获取数据,但不知道为什么会获取此错误图表饼图演示。js:29未捕获引用错误:\未定义数据 我正在创建一个基于flask和sqlite3的库存应用程序,我想在饼图中动态添加数据,所以我为这些数据创建了一个路由,并将其引用到我的js文件中 下面是我的chart.js文件中的代码Javascript 我正在尝试从flask应用程序获取数据,但我得到了“未捕获的引用错误:\未定义数据”,javascript,chart.js,Javascript,Chart.js,我正在尝试从flask应用程序获取数据,但不知道为什么会获取此错误图表饼图演示。js:29未捕获引用错误:\未定义数据 我正在创建一个基于flask和sqlite3的库存应用程序,我想在饼图中动态添加数据,所以我为这些数据创建了一个路由,并将其引用到我的js文件中 下面是我的chart.js文件中的代码 $(document).ready(function(){ var _data; var _labels; $.ajax({ url: "/get_data",
$(document).ready(function(){
var _data;
var _labels;
$.ajax({
url: "/get_data",
type: "get",
data: {vals: ''},
success: function(response) {
full_data = JSON.parse(response.payload);
_data = full_data['data'];
_labels = full_data['labels'];
},
});
});
// Pie Chart Example
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Orders", "Purchases", "Products"],
datasets: [{
data: _data,
backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
hoverBorderColor: "rgba(234, 236, 244, 1)",
}],
},
options: {
maintainAspectRatio: false,
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
caretPadding: 10,
},
legend: {
display: false
},
cutoutPercentage: 80,
},
});
您正在$document.onReady函数中声明_数据变量。该变量将仅在其内部可用。试图绘制图表的代码不在该函数范围内,因此无法访问_数据变量。尝试将创建图表的代码移动到success函数中,以便获得可用的数据并立即呈现图表
$(document).ready(function() {
var _data;
var _labels;
var myPieChart;
$.ajax({
url : "/get_data",
type : "get",
data : {vals: ''},
success : function(response) {
full_data = JSON.parse(response.payload);
_data = full_data['data'];
_labels = full_data['labels'];
// Pie Chart Example
var ctx = document.getElementById("myPieChart");
myPieChart = new Chart(ctx, {
type : 'doughnut',
data : {
labels : _labels,
datasets : [{
data : _data,
backgroundColor : ['#4e73df', '#1cc88a', '#36b9cc'],
hoverBackgroundColor : ['#2e59d9', '#17a673', '#2c9faf'],
hoverBorderColor : "rgba(234, 236, 244, 1)",
}]
},
options : {
maintainAspectRatio : false,
tooltips : {
backgroundColor : "rgb(255,255,255)",
bodyFontColor : "#858796",
borderColor : '#dddfeb',
borderWidth : 1,
xPadding : 15,
yPadding : 15,
displayColors : false,
caretPadding : 10
},
legend : {
display : false
},
cutoutPercentage : 80
}
});
}
});
});
您正在$document.onReady函数中声明_数据变量。该变量将仅在其内部可用。试图绘制图表的代码不在该函数范围内,因此无法访问_数据变量。尝试将创建图表的代码移动到success函数中,以便获得可用的数据并立即呈现图表
$(document).ready(function() {
var _data;
var _labels;
var myPieChart;
$.ajax({
url : "/get_data",
type : "get",
data : {vals: ''},
success : function(response) {
full_data = JSON.parse(response.payload);
_data = full_data['data'];
_labels = full_data['labels'];
// Pie Chart Example
var ctx = document.getElementById("myPieChart");
myPieChart = new Chart(ctx, {
type : 'doughnut',
data : {
labels : _labels,
datasets : [{
data : _data,
backgroundColor : ['#4e73df', '#1cc88a', '#36b9cc'],
hoverBackgroundColor : ['#2e59d9', '#17a673', '#2c9faf'],
hoverBorderColor : "rgba(234, 236, 244, 1)",
}]
},
options : {
maintainAspectRatio : false,
tooltips : {
backgroundColor : "rgb(255,255,255)",
bodyFontColor : "#858796",
borderColor : '#dddfeb',
borderWidth : 1,
xPadding : 15,
yPadding : 15,
displayColors : false,
caretPadding : 10
},
legend : {
display : false
},
cutoutPercentage : 80
}
});
}
});
});
每个函数都有自己的作用域,在该函数中声明的任何变量只能从该函数和任何嵌套函数访问。每个函数都有自己的作用域,在该函数中声明的任何变量只能从该函数和任何嵌套函数访问。非常感谢。让我开心的一天:非常感谢。让我开心的一天: