Django Highcharts製作圖表

Django Highcharts製作圖表

在運維工作總很多資料最終的展現方式要用到圖表,畢竟用圖來展示要比一堆數字更直觀些,比如利用率、站點的PV,UV等,大家千萬不要覺得看到很多漂亮的圖就感覺很難,其實真心不是,因為現在有很多前端的繪相簿,你只需要按它要求的格式(json)提供給前端介面,什麼曲線圖、餅圖,還有你從來都不知道的圖都可以生成出來,現在用的比較多的是highcharts,echarts等,django-highcharts是django的一個整合庫,使用它在django裡更方便繪製出我們想要的圖表,所以這篇文章就使用它來完成一個超小專案,實現一個站點的PV,UV曲線圖, 另外我一直認為公眾號其實不太合適貼太多的程式碼,要看程式碼最好還是用專業的編輯器,如果通篇都是程式碼,我估計很多人直接就收藏了,時間久了自己都忘了,起不到真正學習的目的, 所以今天我重點還是講使用步驟,確保下次大家開發的時候會用,程式碼只是輔助,當然核心的我也會全部貼出來,但完整的程式碼限於篇幅就不在貼了,另外這篇是需要小夥伴們有django一點點基礎的,如果沒有任何基礎,可能需要先了解下基本mvc的概念,否則你可能會看的雲裡霧裡, 其它不多說了,現在開始,我先介紹下開發環境:

python 2.7 django1.8.2 mysql (版本隨意)

第一步,安裝django-higchats,這個根據大家使用的環境即可,pip或直接用pycharm工具安裝都可以。

第二步,新建project 和app

第三步,以上做完,就可以敲程式碼了,先建models,就是資料庫表的表結構,日常站點訪問資料PV,UV資料可以插入到這個表裡,一會我們要使用。

第四步,圖表模組程式碼編寫,這部分主要是一個類從資料庫表中獲取資料,然後將資料提供給圖形展示類,程式碼如下:


class pudata(object):
def __init__(self, dbobj):
self.dbobj = dbobj
self.pdays = self.dbobj.objects.all()
def mpvdate(self):
res = {}
for v in self.pdays:
res[v.days] = v.pvisitor
res = collections.OrderedDict(sorted(res.items(), key=lambda d: d[0]))
return res
def muvdate(self):
res = {}
for v in self.pdays:
res[v.days] = v.uvisitor
res = collections.OrderedDict(sorted(res.items(), key=lambda d: d[0]))
return res
class MindgViewPv(HighChartsMultiAxesView):
p = pudata(mindg)
title = 'mindg.cn'
tooltip = {'shared': 'true'}
chart_type = 'spline'
categories = p.mpvdate().keys()
@property
def yaxis(self):
y_axis = [
{
'title': {
'text': 'PV'
},
}
]
return y_axis
@property
def series(self):
p = pudata(mindg)
series = [
{
'name': 'mindg.cn',
'data': p.icypvdate().values()
}]
return series

第五步,模板層程式碼,模板採用ajax方式,從後臺獲取的json資料給highcharts然後繪製曲線圖,程式碼如下:


{% extends 'head_css.html' %}
{% load highcharts_tags %}
{% block js %}
<script type="text/javascript">
$(function (){
$.getJSON("{% url 'mpv' %}", function(data) {
$('#container').highcharts(data);
});
});
</script>
{% endblock %}

有了上面的程式碼,就可以通過view函式將mindg.html 渲染出來了,最終圖如下:

關於highcharts的使用就介紹到這裡,如有疑問請我直接留言。

您可能感興趣的文章:

jQuery外掛HighCharts實現的2D迴歸直線散點效果示例【附demo原始碼下載】jQuery外掛HighCharts實現的2D對數餅圖效果示例【附demo原始碼下載】jQuery外掛HighCharts繪製2D帶Label的折線圖效果示例【附demo原始碼下載】jQuery外掛HighCharts繪製的基本折線圖效果示例【附demo原始碼下載】Javascript highcharts 餅圖顯示數量和百分比例項程式碼html js highcharts繪製圓餅圖表的簡單例項HighCharts圖表控制元件在ASP.NET WebForm中的使用總結(全)PHP mysql Highcharts生成餅狀圖jQuery.Highcharts.js繪製柱狀圖餅狀圖曲線圖淺析jquery的js圖表元件highchartsJQuery Highcharts 動態生成圖表的方法Highcharts 非常實用的Javascript統計圖demo示例純JAVASCRIPT圖表動畫外掛Highcharts ExamplesjQuery外掛HighCharts實現2D柱狀圖、折線圖的組合多軸圖效果示例【附demo原始碼下載】