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 style="background-color:{color};" 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>

原文地址:http://blog.51cto.com/9891207/2129726

时间: 2024-10-06 21:42:59

django返回页面和json格式列表给前端AntV图表使用。的相关文章

SpringMVC 统一返回JSON格式数据到前端

有时在给APP做接口功能的时候,都是返回JSON格式的数据,所以最好的只好在工程设置一个统一的数据返回方式 在SpringMVC 直接配置XML可以产生这种配置,比较简单 Spring的版本我用的是4.3.3的 <bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter&qu

Asp.Net WebAPI配置接口返回数据类型为Json格式

一.默认情况下WebApi 对于没有指定请求数据类型类型的请求,返回数据类型为Xml格式 例如:从浏览器直接输入地址,或者默认的XMLRequest,或者AngularJs的get请求等. 对于有循环引用的也会抛出异常""ObjectContent`1"类型未能序列化内容类型"application/xml; charset=utf-8"的响应正文." 二.设置返回格式为Json数据 1.修改配置,这对所有的接口都生效 找到Global.asax

【.net 深呼吸】聊聊WCF服务返回XML或JSON格式数据

有时候,为了让数据可以“跨国经营”,尤其是HTTP Web有关的东东,会将数据内容以 XML 或 JSON 的格式返回,这样一来,不管客户端平台是四大文明古国,还是处于蒙昧时代的原始部落,都可以使用这些数据. 在WCF中实现将数据以XML或JSON格式返回有Y多种方法,不管你用什么方法,只要得到预期结果就好,米芾说了,笔可以八面出锋,当然了,人家指的是绘画. 这里,老周就挑两种方法来演示,仅供参考,没有考古价值,建议司马子长不要把本文收入<史记>. 第一种方法是用到 WebServiceHos

SpringBoot RestController 同时支持返回xml和json格式数据

@RestController 默认支持返回json格式数据,即使不做任何配置也能返回json数据 当接口需要支持xml或json两种格式数据时应该怎么做呢? 只要引入 Jackson xml的 maven依赖就可以了: <dependency> <groupId>com.fasterxml.jackson.jaxrs</groupId> <artifactId>jackson-jaxrs-xml-provider</artifactId> &l

SSM框架以json格式传给前端页面

配置文件和由Mybatis逆向工程生成了相关的代码见  登录实现 关键的是在Controller层的方法上加入@ResponseBody注解实现json格式 在控制台输出的json格式数据 index.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath();

如何将查出的日期Data类型以Json格式输出到前端

方法一 在返回的实体的属性中加上注解 // 创建时间    @DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")    private Date createDate; 方法二 在Controller中注解一个@InitBinder,使用@ResponseBody时会将实体中的属性为Data类型的转换成JSON格式的日期 private static final SimpleDateFormat DATEFORMAT = new Simple

页面中 json 格式显示 数据

在页面中,有时候我们需要的不仅仅是将数据显示出来,而且要以以 json 的格式显示数据,如显示接口的时候 我们需要如下显示 这个时候,主要用到了 <pre> 标签 $.get("/chat", { "query": send_content, "ident": ident }, function (data) { var result = JSON.stringify(JSON.parse(data), null, 4); // 格式

WCF服务返回XML或JSON格式数据

第一种方式public string GetData( string format) { string res = null; Student stu = new Student { StuID = 3, StuName ="李四" }; using (MemoryStream ms = new MemoryStream()) { XmlObjectSerializer sz = null; if ( format.ToLower() == "xml") { sz

Ajax请求ashx 返回 json 格式数据常见问题

问题:ashx 返回的字符串json格式,在前台ajax自动解析失败. 问题分析:经过排查,发现是拼接json时出现” ’  “单引号,jquery无法解析,用” “ “双引号才可以.例如: string strjson="[ { 'userName':'test'}]"; //单引号导致jquery无法自动解析. string strjson="[ {\"userName\":\"test\"}]"; // 双引号可以解析: