django返回頁面和json格式列表給前端AntV圖表使用。

ret_char_data = []  # 經費支出分類彙總列表    ret_char_data_root = []  # 經費支出分類彙總列表含總經費    budget_obj = models.Budget.objects.filter(id=request.GET.get("id")).first()    payment_year = time.strptime(budget_obj.year_budget, "%Y")[0]    payment_previous_year = time.strptime(budget_obj.year_budget, "%Y")[0] - 1    sum_pay = models.Payment.objects.filter(payment_time__year=payment_year).values().aggregate(Sum("payment_amount"))    # 年度總支出    payment_list = models.Payment.objects.filter(payment_time__year=payment_year).values(        "payment_project__project_property").annotate(Sum("payment_amount"))    # 按專案屬性得到支出彙總資料    payment_list_previous_year = models.Payment.objects.filter(payment_time__year=payment_previous_year).values(        "payment_project__project_property").annotate(Sum("payment_amount"))    property_tuple = models.OperaMaintProject._meta.model.property_choices    #  得到 ((0, '自主維護'), (1, '專業代維'), (2, '外包維修'), (3, '緊急搶修'), (4, '備件採購'), (5, '其他'))    ret_list = []    ret_list_previous_year = []    budget = budget_obj.reply_quota*10000 - sum_pay["payment_amount__sum"]  # 剩餘經費    budget_dic = {"budget": budget}    for property in property_tuple:        char_dic = {}        char_dic_root = {}        char_dic['type'] = property[1]        char_dic_root['type'] = property[1]        char_dic['money'] = 0        char_dic_root['money'] = 0        for pay_item in payment_list:            if pay_item["payment_project__project_property"] == property[0]:                char_dic['type'] = property[1]                char_dic_root['type'] = property[1]                char_dic['money'] = pay_item['payment_amount__sum']                char_dic_root['money'] =float(round((pay_item['payment_amount__sum']/(budget_obj.reply_quota*10000))*100,1))        ret_char_data.append(char_dic)        ret_char_data_root.append(char_dic_root)    sum_money = 0    for obj in ret_char_data_root:       sum_money =sum_money +float(obj["money"])    char_dic_remainder  = {}    char_dic_remainder['type'] = '剩餘經費'    char_dic_remainder['money'] = 100-sum_money    ret_char_data_root.append(char_dic_remainder)    ret_char_data_root = json.dumps(ret_char_data_root)    # char_dic_total = {}    # char_dic_total['type'] = '總經費'    # char_dic_total['money'] = str(budget_obj.reply_quota*10000)    # ret_char_data_root.append(char_dic_total)    print(ret_char_data_root)    char_dic_sum={}    char_dic_sum['type'] = '總支出'    char_dic_sum['money'] = str(sum_pay['payment_amount__sum'])    ret_char_data.append(char_dic_sum)    return render(request, "opera_maint/budget_mgr/budget_analysis.html", {"ret_list": ret_list,                                                                           "ret_list_previous_year": ret_list_previous_year,                                                                           "property_tuple": property_tuple,                                                                           "ret_char_data": ret_char_data,                                                                           "ret_char_data_root": ret_char_data_root,                                                                           })

前端：

 var _DataSet = DataSet,            DataView = _DataSet.DataView;                        前端獲取列表        var temp_data = '{{ ret_char_data_root|safe }}';        console.log(data,typeof(data));                這時temp_data 是個字串        var data =JSON.parse(temp_data); 轉成json物件        console.log(data,typeof(data));                此時已經是object了。不能直接使用                JSON.parse('{{ ret_char_data_root|safe }}')。要中轉一下。        var dv1 = new DataView();        dv1.source(data).transform({            type: 'percent',            field: 'money',            dimension: 'type',            as: 'percent'        });        var chart1 = new G2.Chart({            container: 'mountNode1',            forceFit: true,            height: window.innerHeight        });        chart1.source(dv1, {            percent: {                formatter: function formatter(val) {                    val = val * 100 + '%';                    return val;                }            }        });        chart1.coord('theta');        chart1.tooltip({            showTitle: false,            itemTpl: '<li><span  class="g2-tooltip-marker"></span>{name}: {value}</li>'        });        chart1.intervalStack().position('percent').color('type').label('percent', {            offset: -40,            // autoRotate: false,            textStyle: {                rotate: 0,                textAlign: 'center',                shadowBlur: 2,                shadowColor: 'rgba(0, 0, 0, .45)'            }        }).tooltip('type*percent', function (item, percent) {            percent = percent * 100 + '%';            return {                name: item,                value: percent            };        }).style({            lineWidth: 1,            stroke: '#fff'        });        chart1.render();    </script>