django vue js & Highcharts 异步从 JSON 获取数据

我目前正在使用 django、highcharts 和 JQuery 来构建一个简单的数据可视化 Web 应用程序。我刚刚从 JQuery 迁移到 Vue Js，我对 vue js 如何从某些 url 获取 JSON 数据感到困惑。这是我的代码：

模板

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Django Highcharts Example</title>
</head>
<body>
<div id="container" data-url="{% url 'async_chart_data' %}"></div>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$.ajax({
url: $("#container").attr("data-url"),
dataType: 'json',
success: function (data) {
Highcharts.chart("container", data);
}
});
</script>
</body>
</html>

Views.py

def chart_view(request):
return render(request,'chart.html')
def chart_data(request):
dataset = Passenger.objects.values('embarked')
.exclude(embarked='')
.annotate(total=Count('embarked'))
.order_by('embarked')
port_name = dict()
for choices_tuple in Passenger.PORT_CHOICES:
port_name[choices_tuple[0]] = choices_tuple[1]
#Hicharts visualization config
pie_chart = {
'chart' : {'type':'pie'},
'title' : {'text' : 'PELABUHAN'},
'series': [{
'name' : 'Tempat Berangkat',
'data' : list(map(lambda row: {'name' : port_name[row['embarked']],
'y' : row['total']},dataset))
}]
}
return JsonResponse(pie_chart)

Models.py

from django.db import models
class Passenger(models.Model):
MALE = 'M'
FEMALE = 'F'
SEX_CHOICES = (
(MALE, 'male'),
(FEMALE, 'female')
)
CHERBOURG = 'C'
QUEENSTOWN = 'Q'
SOUTHAMPTON = 'S'
PORT_CHOICES = (
(CHERBOURG, 'Cherbourg'),
(QUEENSTOWN, 'Queenstown'),
(SOUTHAMPTON, 'Southampton'),
)
name = models.CharField(max_length=100, blank=True)
sex = models.CharField(max_length=1, choices=SEX_CHOICES)
survived = models.BooleanField()
age = models.FloatField(null=True)
ticket_class = models.PositiveSmallIntegerField()
embarked = models.CharField(max_length=1, choices=PORT_CHOICES)
def __str__(self):
return self.name

我想更改 JQuery 用法以将 JSON 数据获取到 Vue JS。我该怎么做？

编辑：我已经完成了这个问题。我在这里遇到了另一个问题

案例已关闭。我可以通过使用 vue js 生命周期钩子来实现它。但是，它仍然足够慢，无法加载页面。需要(4 到 7 秒(，但它有效。这是我的模板。

<!DOCTYPE html>
<html>
<head>
	<title>Using Vue Axios</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://code.highcharts.com/highcharts.src.js"></script>
</head>
<body>
	<div id="app">[[dataTitanic]]</div>
	<h1>The Chart Is Shown Below : </h1>
	<div id="container"></div>
	<script type="text/javascript">
		var url = "{% url 'async_chart_data' %}";
		var app = new Vue({
			delimiters : ['[[',']]'],
			el : '#app',
			data(){
				return {
					dataTitanic : null,
				}
			},
			mounted(){
				axios
				  .get(url)
				  .then(response => (this.dataTitanic = response['data']))
			},
			beforeUpdate(){
				Highcharts.chart('container',this.dataTitanic)
			}
		})
	</script>
</body>
</html>

相关内容

最新更新

热门标签：