python项目篇-从数据库获取数据以Json格式返回前端数据可视化方式显示
json
适用于现代 C++ 的 JSON。
项目地址：https://gitcode.com/gh_mirrors/js/json
免费下载资源
·
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不是我们想要的取不出想要的数据
所以最好使用我开头写的方式
更新**********
{# 继承模板 #}
{% 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: 800px;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 jstotallBath = []
var jstotallHouse = []
var jstotallPay = []
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'])
}
for(i in obj){
jstotallBath.push(obj[i]['totalBath'])
}
for(i in obj){
jstotallHouse.push(obj[i]['totalHouse'])
}
for(i in obj){
jstotallPay.push(obj[i]['totalPay'])
}
console.log(jsdayIncome)
console.log(jstotallIncome)
// 指定图表的配置项和数据
var option = {
title: {
text: '每日收入可视化'
},
tooltip: {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data:['净收入','住房收入','洗浴收入','支出']
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis: {
type:'category',
data: jsdayIncome
},
yAxis: {type : 'value'},
series: [{
name: '净收入',
type: 'bar',
data: jstotallIncome
},
{
name: '住房收入',
type: 'bar',
data: jstotallHouse
},
{
name: '洗浴收入',
type: 'bar',
data: jstotallBath
},
{
name: '支出',
type: 'bar',
data: jstotallPay
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
{% endblock %}
{% block class_chartIncome %}
active
{% endblock %}
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支：1 个月前 )
960b763e
4 个月前
8c391e04
6 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
11
0- 0
已为社区贡献4条内容
所有评论(0)