CodeSalt | Django + Echarts 實例

時間 2019-11-16

標籤 codesalt django echarts 實例欄目 Python 简体版

原文原文鏈接

CodeSalt | Django + Echarts 實例

因爲近期須要熟悉Django、Echarts，所以經過本文記錄實現Django + Echarts 兩個小實例的過程，將分別使用不一樣方式實現Web端Echarts圖表的展現：javascript

使用pyecharts展現3D圖
使用echarts.js展現折線圖
後續Django在鏈接MySQL進行展現時可能遇到的一些問題

0 前期準備

環境+Django準備html
- 虛擬環境java
  - 使用指定版本Python(本文使用python3.5)，建立名爲djangovenv的虛擬環境python
    - $ virtualenv --python=/Library/Frameworks/Python.framework/Versions/3.5/bin/python3.5 djangovenv
  - 激活虛擬環境mysql
    - $ source ~/venv/djangovenv/bin/activate
  - 安裝Django 1.11.4、pyechartsgit
    - $ pip install django==1.11.4
    - $ pip install pyecharts
  - 建立Django Project、Django Appgithub
    - 建立名爲mychartsite的Projectsql
      - $ django-admin startproject myechartsite
    - 進入剛纔建立的project目錄$ cd my echartsite
    - 建立名爲djoncharts的app數據庫
      - $ python manage.py startapp djoncharts
  - 註冊app,在myechartsite/settings.py中註冊
```
INSTALLED_ APPS = [
'djoncharts', # <----在此添加
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
```

1 使用pyecharts

安裝django
- $ pip install pyecharts

Demo製做（不與數據庫鏈接，直接來看一個官方樣例的效果，3D圖）

Step1: 在app目錄下設置myechartsite/djoncharts/urls.py和myechartsite/djoncharts/views.py

首先，設置djoncharts/urls，app命名空間有助於讓後續模板中{% url %}標籤區分應該爲URL建立哪一個應用的視圖

# myechartsite/djoncharts/urls.py

from django.conf.urls import url
from . import views

app_name = 'djoncharts'
urlpatterns = [
   url(r'^pyechart3d/$', views.pyechart3d, name='pyechart3d'),
]

以後，處理視圖(Views)功能部分，設置djoncharts/views
將pyecharts的官方案例寫入views:

# myechartsite/djoncharts/views.py

from __future__ import unicode_literals
from django.shortcuts import render
import math
from django.http import HttpResponse
from django.template import loader
from pyecharts import Line3D

from pyecharts.constants import DEFAULT_HOST


def pyechart3d(request):
    template = loader.get_template('djoncharts/pyecharts.html')
    l3d = line3d()
    context = dict(
        myechart=l3d.render_embed(),
        host=DEFAULT_HOST,
        script_list=l3d.get_js_dependencies()
    )
    return HttpResponse(template.render(context, request))


def line3d():
    _data = []
    for t in range(0, 25000):
        _t = t / 1000
        x = (1 + 0.25 * math.cos(75 * _t)) * math.cos(_t)
        y = (1 + 0.25 * math.cos(75 * _t)) * math.sin(_t)
        z = _t + 2.0 * math.sin(75 * _t)
        _data.append([x, y, z])
    range_color = [
        '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf',
        '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
    line3d = Line3D("3D line plot demo", width=1200, height=600)
    line3d.add("", _data, is_visualmap=True,
               visual_range_color=range_color, visual_range=[0, 30],
               is_grid3D_rotate=True, grid3D_rotate_speed=180)
    return line3d

Step2: 爲項目提供本身的模板
（上述代碼中 template = loader.get_template('djoncharts/pyecharts.html')還找不到咱們的模板）

首先，在app(/djoncharts)目錄下，建立模板/templates以及子目錄/templates/djoncharts ，在此子目錄下建立pyecharts.html

建立完成後的目錄結構爲：

├── __init__.py
├── admin.py
├── apps.py
├── tests.py
├── models.py
├── templates/
│   └── djoncharts/
│       └── pyecharts.html
├── views.py
├── migrations/
│   ├── __init__.py
├── urls.py

將下面 html 模板代碼保存爲pyecharts.html，確保 pyecharts.html 文件的絕對路徑爲 myechartsite/djoncharts/templates/djoncharts:

<!-- myechartsite/djoncharts/templates/djoncharts/pyecharts.html -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Proudly presented by PycCharts</title>
    {% for jsfile_name in script_list %}
    <script src="{{host}}/{{jsfile_name}}.js"></script>
    {% endfor %}
</head>

<body>
  {{myechart|safe}}
</body>

</html>

Step3: 將根目錄下的URLconf指向djoncharts.urls模塊；按照django文檔的指示，咱們任什麼時候候都應該使用include()來導入其餘URL模式。(admin.site.urls是惟一一個例外)

# myechartsite/urls.py

from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    # url(r'^admin/', admin.site.urls),
    url(r'^djoncharts/', include('djoncharts.urls')),
]

Step4: 運行項目

`$ cd myechartsite`
`$ python manage.py runserver`
在瀏覽器輸入:`http://127.0.0.1:8000/djoncharts/pyecharts`

2 使用echarts(不使用pyecharts庫)

優勢在於可個性化靈活定製頁面。

安裝可直接前往官網下載便可

Demo製做（不與數據庫鏈接，直接看一個官方樣例的效果，折線圖）

在上一個demo裏面，咱們已經在根目錄的URLconf設置了指向djoncharts的urlpatterns, 所以不用管根目錄的urls

Step1: 在app目錄下的urls.py中添加新的url()，綁定zhexian()視圖函數：

# myechartsite/djoncharts/urls.py

urlpatterns = [
...

   url(r'^zhexian/$', views.zhexian, name='zhexian'),
]

Step2: 在views.py中添加zhexian()視圖函數：

# myechartsite/djoncharts/views.py
def zhexian(request):
    return render(request, 'djoncharts/zhexian.html')

Step3: 導入echarts.js並添加模板zhexian.html

首先，導入echarts.js：建立目錄static/djoncharts/js，複製echarts.js至目錄下（確保echarts.js在絕對路徑/myechartsite/djoncharts/static/djoncharts/js/echarts.js 下）

以後，添加模板，將如下代碼寫入templates/djoncharts/zhexian.html：

{% load static %} 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 使用 static 關鍵字-->
    /
    <script src="{% static 'djoncharts/js/echarts.js' %}"></script>

</head>
</html>
<body>
    <!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM -->
    <div id="main" style="width:1280px;height:850px;"></div>
    <script type="text/javascript">

        // 基於準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和數據
        var option = {
                title: {
                    text: 'Step Line'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['Step Start', 'Step Middle', 'Step End']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'Step Start',
                        type:'line',
                        step: 'start',
                        data:[120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name:'Step Middle',
                        type:'line',
                        step: 'middle',
                        data:[220, 282, 201, 234, 290, 430, 410]
                    },
                    {
                        name:'Step End',
                        type:'line',
                        step: 'end',
                        data:[450, 432, 401, 454, 590, 530, 510]
                    }
                ]
};
        
        // 使用剛指定的配置項和數據顯示圖表
        myChart.setOption(option);
    </script>
</body>

Step4: 運行項目

$ cd myechartsite
$ python manage.py runserver
在瀏覽器輸入:http://127.0.0.1:8000/djoncharts/zhexian

3 後續Django在鏈接MySQL進行展現時可能遇到的一些問題

3.1 如何操做數據庫(兩種方式)
- 1 執行cursor()
```
cur = connections['databasename'].cursor()
cur.execute('''
         SQL語句
         ''')
# 轉換成dataframe
df = pd.DataFrame(list(cur.fetchall()),
                  columns=['name','song'])
```
- 2 經過模型，操做模型
  - 安裝pymysql
    - python3.5不支持MySQL-python因此須要換成pymysql
    - 安裝後在/myechartsite/myechartsite/__init.py下輸入
```
import pymysql
pymysql.install_as_MySQLdb()
```
  - 準備models
    - 若沒設置default的數據庫，因此須要加--database=來指定一個。所以使用$ python manage.py inspectdb --database=yourdatabasename查看相應的數據庫表的模型
    - 能夠經過$ python manage.py inspectdb --database=afant_stat_db > djoncharts/models.py將模型文件寫入對應app下的models.py文件
3.2 在視圖函數中測試執行SQL語句時候報錯
- 解決方法：
- os.environ.setdefault("DJANGO_SETTINGS_MODULE", "myechartsite.settings")
3.3 template中如何取dict值
- 使用循環來取{% for key, value in dict.items %}
3.4 template中dict沒法排序問題,
- 使用{{ for key, value in dict.items|dictsort:0 }}針對給定的index (此處是0，因此就是依據key) 進行過濾

<body>
        {% for k, v in pre_stat.items|dictsort:0 %}
                {% if k %}
                    {{ k }}
                    {{ v }}
                {% else %}
                    <p> nothing to show </p>
                {% endif %}
        {% endfor %}
</body>

(另外也可自行寫templatetag函數來進行dict過濾)

相關標籤/搜索

django+xadmin+echarts

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。