Я пытаюсь визуализировать данные асинхронно из JSON в django 2.0, используя vuejs и Highcharts.Я просто перешел из jquery в vuejs из-за его простоты.Я обнаружил, что визуализация данных с использованием vue js и Highcarts намного медленнее, чем с использованием JQuery и Highcharts.
Я генерирую JSONResponse в другом URL-адресе из диаграммы, а аксиос используется, чтобы помочь vuejs извлекать данные из этого URL-адреса.Данные сначала аннотируются и группируются по набору запросов в views.py.Опции Highcharts также установлены в бэкэнде.
вот мои 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)
Я извлекаю данные, используя axios, когда el монтируется, и визуализирую данные перед обновлением.Я пытаюсь нарисовать диаграмму, когда приложение обновлено ранее, но это просто создать вечный цикл, который невозможно остановить процесс рисования и невозможно визуализировать данные.Тем не менее, используя ловушку жизненного цикла beforeUpdate, визуализация данных все еще происходит медленно.Для отображения графика необходимо 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>
Я новичок в vuejs, поэтому любые предложения помогут.спасибо