#html #mysql #django #ajax #web-development-server
Вопрос:
Мне нужно извлечь данные из базы данных и просмотреть результаты на диаграмме в представлении, диаграммы должны динамически изменяться при изменении значений в базе данных(модель предназначена для получения данных пользователей после отправки опроса
Вот моя модель.
class Survey(models.Model):
gender=models.CharField(max_length=200)
Age = models.CharField(max_length=200)
Nationality=models.CharField(max_length=200)
Gorvernate = models.CharField(max_length=200)
Maritalstatus=models.CharField(max_length=200)
Employmentstatus=models.CharField(max_length=200)
children=models.CharField(max_length=200)
Education =models.CharField(max_length=200)
IncomePerMonth=models.CharField(max_length=200)
class Meta:
db_table = 'form_surey'
Я попробовал это в представлении:
<script>
$.ajax({
type: 'GET',
url: "{% url 'pie-chart' %}",
data: {{gender}},
success: function (response) {
// if not valid user, alert the user
if(!response["valid"]){
alert("Success");
}
},
error: function (response) {
console.log(response)
}
});
const labels = ['Male','Female'];
const data = {
labels: labels,
datasets: [{
label: 'Gender',
backgroundColor: ['rgb(255, 99, 132)',
'rgb(54, 162, 235)',
],
borderColor:[ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)',
],
data: {{gender|safe}},
}]
};
const config = {
type: 'bar',
data: data,
options: {}
};
// === include 'setup' then 'config' above ===
var myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
Комментарии:
1. Привет, вам нужна платформа интерфейса, такая как VueJS или React, которая может отслеживать изменения и динамически обновлять их.
2. Вы можете использовать Vue только на одной странице, так что вам не нужно настраивать все интерфейсные приложения, используйте Vue, чтобы активировать вашу страницу, и используйте axios для запроса API.