背景:由于运营的需求,需要一些数据图表进行分析。整个思路是这样的,利用DJANGO的ORM操作数据库,从库中查询出所需要的数据。并把查询整个动作封装成一个数据接口。返回给前端json格式。利用chart.js将数据展现在页面上。
html
引用好所需要的文件,static可以在settings.py中设定好。
<script src="{% static "js/Chart.js" %}"></script>
<script src="{% static "js/Chart.min.js" %}"></script>
<div class="col-sm-4">
<h3>用户操作错误记录种类</h3>
<canvas id="myChart" width="400" height="400"></canvas>
</div>
这里套用了一些bootstrap的内容其实只需要一句
<canvas id="myChart" width="400" height="400"></canvas>
js
var k,s;
/*获取图表数据*/
var getdata = BASE_URL + '/operation/all';
$.get(getdata, function(data){
console.log((data));
k = data.labels;
s = data.data;
var ctx = $("#myChart").get(0).getContext("2d");
//This will get the first returned node in the jQuery collection.
var myNewChart = new Chart(ctx);
Chart.defaults.global.responsive = true;
var data = {
labels : k,
datasets : [
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: s
}
]
}
new Chart(ctx).Bar(data);
});
view.py
class CustomerShowdata(View):
"""
图表详情页面
"""
template = "customer/showdata.html"
@method_decorator(login_required)
def get(self, request, *args, **kwargs):
page_name = "customer_show_data"
return render_to_response(self.template,
context_instance=RequestContext(request, locals()))
APIView
编写符合REST设计原则的接口.其实上面的VIEW不需要,因为直接在JS端调用了这个API.只是我重新写了一个页面,网页访问需要上面的VIEW来回应HtttpResponse
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework.permissions import IsAuthenticated
class GetOperationFail(APIView):
"""
获取所有用户的操作错误信息列表
"""
permission_classes = (IsAuthenticated, )
def get(self, request, *args, **kwargs):
ins = ConsoleRecord()
data_map = ins.get_fail_data()
tags=[]
numbers=[]
for key,value in data_map.iteritems():
tags.append(key)
numbers.append(value)
return Response({"labels" : tags,
"data" : numbers,
})
model部分
class ConsoleRecord(models.Model):
"""
Record user actions
"""
class Meta:
db_table = "records"
# 用户名
username = models.CharField(
max_length=30,
null=False
)
name = models.CharField(
max_length=30,
null=False
)
# 操作时间
create_datetime = models.DateTimeField(
auto_now_add=True
)
# 资源
service = models.CharField(
choices=SERVICE_CHOICES,
max_length=30
)
# 操作
action = models.CharField(
max_length=30,
null=False,
)
# 状态
status = models.CharField(
max_length=100,
null=False
)
def __unicode__(self):
return "%s %s %s %s" % (self.username,
self.action,
self.service,
self.create_datetime
)
@classmethod
def create(cls,
service,
action,
action_detail,
status,
):
try:
_console_record = ConsoleRecord(
service=service,
action=action,
action_detail=action_detail,
status=status,
)
_console_record.save()
return _console_record, None
except Exception as exp:
return None, str(exp)
@classmethod #返回大类错误信息
def get_fail_data(cls):
allfail = cls.objects.filter(status=u'失败')
logger.debug(allfail)
data_map = {}
tags = []
numbers = []
for everyone in allfail:
# data_js = json.dumps()
word = everyone.service
if word in data_map:
data_map[word] += 1
else:
data_map[word] = 1
return data_map
#传入需要的资源的值,返回详细的错误信息。 eg: get_fail_data_details(_('service'))
@classmethod
def get_fail_data_details(cls,value):
date_map = {}
allfail = cls.objects.filter(status=u'失败',service=value)
logger.debug(allfail)
data_map = {}
for everyone in allfail:
# data_js = json.dumps()
word = everyone.action
if word in data_map:
data_map[word] += 1
else:
data_map[word] = 1
return data_map