总体思路:
Vue对象中定义data数据对象,axios.get方法通知后台产生数据,后台用JsonResponse返回数据,注意写上safe=False,前台用response.data取回数据,存入Vue对象的data对象中,在js中通过Vue实例名取数据使用。
- app1为Vue对象实例,sim01对象存数据
<script>
var app1=new Vue({
el:"#sim_params",
delimiters:["[[","]]"],
data:{
sim_params:{},
sim01:{},
},
- run_01方法触发向后台要数据的get请求,结果res.data存入this.sim01,并调用画图的draw01()js方法
run_01:function(event){
axios.get('/uav/api/run_sim').then(res=>{
this.sim01=res.data
draw01()
})
},
var draw01=function(){
Highcharts.chart('container', {
title: {
text: '决策算法对比'
},
xAxis: {
categories: app1.sim01['x1']
},
series: [{
data: app1.sim01['y1'],
name: 'Q-learning'
}, ]
});
}