django highcharts實現資料視覺化

因為他是web框架，因此他和資料視覺化掛鉤的時候，自然就想到了非常熟悉highcharts圖表技術，看似非常高大上，稱為資料視覺化，實則使用django框架讀取資料庫資料繫結到前台顯示罷了。

網上各大教程**例如菜鳥，w3cshool等等，對於這些django的安裝已經講的很清楚了，基本沒什麼重複的必要菜鳥教程。我這裡使用的是python3.6和django 1.10.6。

選定乙個你想要新建專案的資料夾，shift+右擊，開啟命令列視窗，輸入以下命令建立專案：

django-admin startproject testpro

盜用一下菜鳥的目錄結構：

testpro|-
-testpro||
--__init__.py
||--
settings.py
||--
urls.py
|`--
wsgi.py
`--manage
.py

其中的testpro就是專案的名稱。當然你要是使用的是ide，例如pycharm，那你直接新建django專案就好了。

想要連線資料庫，就需要使用到django模型，諸如mysql，oracle等主流資料庫都是支援的（sqlserver好像不行？！）。我這裡使用的是mysql，所以需要安裝一下mysql的驅動：

pip install mysqlclient

django連線資料庫的資訊儲存在了settings.py中，按需求做如下修改：

databases = 
}

再次盜用：

testpro|-
-testmodel||
--__init__.py
||--
admin.py
||--
models.py
||--
tests.py
|`--
views
.py

再建立乙個模板資料夾，存放我們的html頁面，於是總的結構圖：

testpro|-
-testmodel||
--__init__.py
||--
admin.py
||--
models.py
||--
tests.py
|`--
views.py
|--testpro||
--__init__.py
||--
settings.py
||--
urls.py
|`--
wsgi.py
|--templates
#模板資料夾`-
-manage
.py

接下來呢，在models.py中新建乙個model：

...
class usertest(models.model):
name=models.charfield(max_length=20)
age=models.charfield(max_length=20)

我的主鍵自增id，這裡不需要定義（我也是初學，暫時不講為什麼，以後更新補上）。實際上這個模型對應的資料庫表有字首,就像這樣：django_usertest現在模型有了，獲取資料就是了。我新建了乙個ca_user.py，裡面寫運算元據庫的**。

引入這幾個包：

from testmodel.models import usertest #實體類（模型）的引入

寫乙個方法，獲取資料，拼成想要的格式，方便前台highcharts顯示，實際也就是拼json：

def
user_show
(request):
users=usertest.objects.all() #獲取全部資料
listx = 
listy = 
for user in users: #遍歷，拼橫縱座標
return render(request, "show.html", ) #跳轉到show.html，並將拼好的資料（）傳遞到該頁面

python的**還是很通俗的。前台頁面在templates資料夾下建立，templates資料夾需要設定為模板資料夾，找到settings.py中的templates,作如下修改：

'dirs': [os.path.join(base_dir,'templates')]     #templates就是你上面建的模板資料夾的名字

新建乙個show.html ，引入jquery的包，寫好highcharts的**，然後繫結資料。資料繫結和angular類似，使用}來繫結。在這個過程中，遇到乙個問題，那就是我的x軸座標使用的是字串陣列，陣列項中的引號在前台被強行轉義了，變成了'，於是圖表顯示不出來了。這裡呢需要修改一下設定settings.py中的middleware配置，注釋如下語句：

'django.middleware.csrf.csrfviewmiddleware'

並且在繫結不需要轉義的物件時，在物件名之後加|safe，例如}便成}。修改完成後的**如下：

lang="en">
charset="utf-8">
src="">
script>
src="">
script>
src="">
script>
titletitle>
head>
id="container">
div>
$(function
() ,
title: ,
xaxis: }, 
title: 
},yaxis: ,
labels: 
},tooltip: ,
plotoptions: }},
legend: ,
credits: ,
series: [}
}]});
});script>
body>
html>

到此，啟動伺服器執行專案：

python manage runserver 0.0 .0.0 :8000

ide的話直接執行就好了，到此看效果

django highcharts實現資料視覺化

pyecharts實現資料視覺化

matplot pandas 實現資料視覺化基礎

Flask Echarts實現資料視覺化一

django highcharts實現資料視覺化

pyecharts實現資料視覺化

matplot pandas 實現資料視覺化 基礎

Flask Echarts實現資料視覺化 一

相關推薦

matplot pandas 實現資料視覺化基礎

Flask Echarts實現資料視覺化一