python專案篇-從資料庫獲取資料以Json格式返回前端資料視覺化方式顯示
阿新 • • 發佈:2019-01-04
views.py:
def adminEchartIncome(request):
ret = models.incomeAccount.objects.all().order_by("dayIncome","id") # ret = serialize("json",ret) # print(ret) json_list = [] for i in ret: json_dict = {} json_dict["id"] = i.id json_dict["totalIncome"] = i.totalIncome json_dict["dayIncome"] = i.dayIncome json_dict["remarkIncome"] = i.remarkIncome json_dict["totalBath"] = i.totalBath json_dict["totalBathHouse"] = i.totalBathHouse json_dict["totalHouse"] = i.totalHouse json_dict["totalPay"] = i.totalPay json_list.append(json_dict) ret1 = json.dumps(json_list) print(ret1,type(ret1)) return render(request,'admin_chartIncome.html',{"ret": json.dumps(ret1)})
html:
{# 繼承模板 #} {% extends 'admin_base.html' %} {% load static %} {#把這個頁面塞到模版#} {% block page-main %} <h1 class="page-header">清泉後臺管理頁面--收入視覺化</h1> <div class="panel panel-primary"> <!-- Default panel contents --> <div class="panel-heading">收入視覺化 <i class="fa fa-thumb-tack pull-right"></i></div> <div class="panel-body"> <div class="row" style="margin-bottom: 15px"> <div class="col-md-4"> <div class="input-group"> {# <input type="text" class="form-control" placeholder="Search for...">#} <span class="input-group-btn"> {# <button class="btn btn-default" type="button">搜尋</button>#} </span> </div><!-- /input-group --> </div><!-- /.col-md-4 --> <div class="col-md-3 pull-right"> {# <a href="/adminAddincome/" class="btn btn-success pull-right">新頁面新增</a>#} {# <button class="btn btn-success pull-right" data-toggle="modal" data-target="#myModal">新增</button>#} </div> </div><!-- /.row --> <div id="echart" style="width: 600px;height:600px;"> </div> </div> </div> <script type="text/javascript"> // 基於準備好的dom,初始化echarts例項 var myChart = echarts.init(document.getElementById('echart')); var ret={{ ret|safe }}; var jsdayIncome = [] var jstotallIncome = [] var obj =JSON.parse(ret) console.log(obj); for(i in obj){ jsdayIncome.push(obj[i]['dayIncome']) } for(i in obj){ jstotallIncome.push(obj[i]['totalIncome']) } console.log(jsdayIncome) console.log(jstotallIncome) // 指定圖表的配置項和資料 var option = { title: { text: '每日收入視覺化' }, tooltip: {}, legend: { data:['收入'] }, xAxis: { data: jsdayIncome }, yAxis: {}, series: [{ name: '收入', type: 'bar', data: jstotallIncome }] }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> {% endblock %} {% block class_chartIncome %} active {% endblock %}
總結:第一次直接用取資料庫的資料格式報錯,這在我的bug記錄中有說明
其次使用以下程式碼:
def getdata(request): # 使用ORM # all()返回的是QuerySet 資料型別;values()返回的是ValuesQuerySet 資料型別 ret = models.incomeAccount.objects.all().order_by("dayIncome","id") ret = serialize("json",ret) print(ret) return render(request,'admin_chartIncome.html',{"ret": json.dumps(ret)})
ret返回的資料是:
[{"model": "qqsys.incomeaccount", "pk": 13, "fields": {"dayIncome": "2018-12-27", "totalBath": 108, "totalHouse": 0, "totalBathHouse": 108, "totalPay": 100, "totalIncome": 8, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 12, "fields": {"dayIncome": "2018-12-28", "totalBath": 497, "totalHouse": 200, "totalBathHouse": 697, "totalPay": 0, "totalIncome": 697, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 11, "fields": {"dayIncome": "2018-12-29", "totalBath": 342, "totalHouse": 0, "totalBathHouse": 342, "totalPay": 590, "totalIncome": -248, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 10, "fields": {"dayIncome": "2018-12-30", "totalBath": 955, "totalHouse": 340, "totalBathHouse": 1295, "totalPay": 709, "totalIncome": 586, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 3, "fields": {"dayIncome": "2018-12-31", "totalBath": 764, "totalHouse": 150, "totalBathHouse": 914, "totalPay": 369, "totalIncome": 545, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 9, "fields": {"dayIncome": "2019-01-01", "totalBath": 846, "totalHouse": 229, "totalBathHouse": 1075, "totalPay": 1035, "totalIncome": 40, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 8, "fields": {"dayIncome": "2019-01-02", "totalBath": 372, "totalHouse": 270, "totalBathHouse": 642, "totalPay": 3708, "totalIncome": -3066, "remarkIncome": ""}}, {"model": "qqsys.incomeaccount", "pk": 16, "fields": {"dayIncome": "2019-01-03", "totalBath": 466, "totalHouse": 349, "totalBathHouse": 815, "totalPay": 340, "totalIncome": 475, "remarkIncome": ""}}] <class 'str'>
但是這種json不是我們想要的取不出想要的資料
所以最好使用我開頭寫的方式