![Uploading Screen Shot 2016-07-27 at 16.46.58_522860.png . . .]
](http://upload-images.jianshu.io/upload_images/1504853-805d329ac707cd16.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

代碼部分
網(wǎng)頁頂欄部分：

    <div class="ui fixed menu" style="height:54px;padding:10px 0px 10px 10px">
      <div class="ui right labeled input">
        <div class="ui basic label" style="padding:2px 0 2px 5px"><i class="red big pinterest icon"> </i></div>
        <input type="text" placeholder="Search..." style="background-color:#dfdfdf;min-width:356px">
        <div class="ui basic label"><i class="sidebar icon"></i></div>
      </div>

      <div class="ui left attached basic button" style="margin:0 0 0 10px">
        <i class="red pin icon"></i>YOUR ACCOUNT
      </div>
      <div class="right attached ui basic button" >
        <i class="right setting icon"></i>
      </div>
    </div>

卡片圖片部分

<div class="ui link cards" style="margin:60px 0 0 0px" id='contentor'>
<div class="ui card" style="width:236px">
        <div class="image">
          <img src="{% static 'images/pinpic01.jpg' %}">
        </div>
        <div class="content">
          <div class="header">Matt Giampietro</div>
          <div class="meta">
            <a>Friends</a>
          </div>
          <div class="description">
            Matthew is an interior designer living in New York.
          </div>
        </div>
        <div class="extra content">
          <span class="right floated">
            Joined in 2013
          </span>
          <span>
            <i class="user icon"></i>
            75 Friends
          </span>
        </div>
 </div>
</div>

二手行情網(wǎng)站：

首先在ipython中進(jìn)行數(shù)據(jù)清洗整理蒲赂，再通過pipeline實(shí)現(xiàn)：

發(fā)帖總量.png

one day.png

一天的cates和areas.png

之后移植到Django中。

views.py

from django.shortcuts import render
from ganji.models import ItemInfo
from django.core.paginator import Paginator

#  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# 不同區(qū)域發(fā)帖量前5名
def Topx(date1,date2,area,limit):
    pipeline=[
        {'$match':{'$and':[{'pub_date':{'$gte':date1,'$lte':date2}},{'area':{'$all':area}}]}},
        {'$group':{'_id':{'$slice':['$cates',2,1]},'counts':{'$sum':1}}},
        {'$limit':limit},
        {'$sort':{'counts':-1}}
    ]

    for i in ItemInfo._get_collection().aggregate(pipeline):
        data = {
            'name': i['_id'][0],
            'data': [i['counts']],
            'type': 'column'
        }
        yield data

series_CY = [i for i in Topx('2016.01.01','2016.01.07',['朝陽'],5)]
series_TZ = [i for i in Topx('2016.01.01','2016.01.07',['通州'],5)]
series_HD = [i for i in Topx('2016.01.01','2016.01.07',['海淀'],5)]

#  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
# 數(shù)據(jù)中發(fā)帖總量柱狀圖
def total_post():
    pipeline = [
    {'$group':{'_id':{'$slice':['$cates',2,1]},'counts':{'$sum':1}}},
    ]

    for i in ItemInfo._get_collection().aggregate(pipeline):
        data = {
            'name':i['_id'][0],
            'y':i['counts']
        }
        yield data

series_post=[i for i in total_post()]

# - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
def one_day_deal_cate():
    pipeline = [
        {'$match':{'$and':[{'pub_date':{'$gte':'2015.12.25','$lte':'2016.01.11'}},{'time':1}]}},
        {'$group':{'_id':{'$slice':['$cates',2,1]},'counts':{'$sum':1}}},
        {'$sort':{'counts':1}}
    ]
    for i in ItemInfo._get_collection().aggregate(pipeline):
        data = {
            'name':i['_id'][0],
            'y':i['counts']
        }
        yield data

def one_day_deal_area():
    pipeline = [
        {'$match':{'$and':[{'pub_date':{'$gte':'2015.12.25','$lte':'2016.01.11'}},{'time':1}]}},
        {'$group':{'_id':{'$slice':['$area',1]},'counts':{'$sum':1}}},
        {'$sort':{'counts':1}}
    ]

    for i in ItemInfo._get_collection().aggregate(pipeline):
        data = {
            'name':i['_id'][0],
            'y':i['counts']
        }
        yield data

pie1_data = [i for i in one_day_deal_cate()]
pie2_data = [i for i in one_day_deal_area()]

#  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -


def index(request):
    context = {
        'chart_CY':series_CY,
        'chart_TZ':series_TZ,
        'chart_HD':series_HD,
        'series_post':series_post,
        'pie1_data':pie1_data,
        'pie2_data':pie2_data
    }
    return render(request,'chart2.html',context)

def web(request):
    return render(request,'web.html')

def pin(request):
    return render(request,'pin.html')

# blog
def chart(request):
    limit = 15
    item_info = ItemInfo.objects[:20]
    pageinator = Paginator(item_info, limit)
    page = request.GET.get('page', 1)
    print(request)
    print(request.GET)

    loaded = pageinator.page(page)

    context = {
        'ItemInfo': loaded,
        'counts': item_info.count(),
        'last_time':item_info.order_by('-pub_date').limit(1),
    }
    return render(request,'index_data.html',context)

models.py

from django.db import models

from mongoengine import *

# Create your models here.
class ItemInfo(Document):
    title = StringField()
    url = StringField()
    pub_date = StringField()
    area = ListField(StringField())
    cates = ListField(StringField())
    look = StringField()
    time = StringField()
    price = IntField()
    meta = {'collection':'item_info'}

urls.py

from django.conf.urls import url
from django.contrib import admin
from ganji.views import index,web,pin,chart

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index/', index),
    url(r'^web/',web),
    url(r'^pin/',pin),
    url(r'^chart/',chart)

]

index_data.html

{% extends "chart.html" %}

{% block grid %}
<div class="ui equal width grid" style="width:70%;margin:5px 0 5px 0;">
            <div class="row">
                <div class="column">
                    <div class="ui red segment">
                        <div class="ui statistic">
                            <div class="value">
                                {{ counts }}
                            </div>
                            <div class="label">
                                Documents
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column">
                    <div class="ui blue segment">
                        <div class="ui statistic">
                            <div class="value">
                                <i class="plane icon"></i> 5
                            </div>
                            <div class="label">
                                Flights
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="column">
                    <div class="ui container segment">
                        <div class="ui divided items">
                            {% for item in ItemInfo %}
                            <div class="item">
                                <div class="content">
                                    <div class="header">
                                        {{ item.title }}
                                    </div>
                                    <div class="description">
                                        {{ item.area }}
                                    </div>
                                    <div class="extra">
                                        {% for tag in item.cates %}
                                        <div class="ui label">
                                            {{ tag }}
                                        </div>
                                        {% endfor %}
                                    </div>

                                </div>
                            </div>
                            {% endfor %}
                        </div>

                        <div class = "ui small pagination menu">
                            {% if ItemInfo.has_previous %}
                                <a class="icon item" href="?page={{ ItemInfo.previous_page_number }}">
                                <i class="icon left arrow"></i>
                                </a>
                            {% endif %}

                            <div class="disabled item">
                                {{ ItemInfo.number }} of {{ ItemInfo.paginator.num_pages }}
                            </div>
                            {% if ItemInfo.has_next %}
                                <a class="icon item" href="?page={{ ItemInfo.next_page_number }}">
                                    <i class="icon right arrow"></i>
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}

chart2.html

{% extends 'chart.html' %}

{% block grid %}
<div class="ui equal width grid" style="margin:5px 0 5px 0;width:70%">


    <div class="row">
      <div class="column">
        <div class="ui container segment">
          <div class="ui container" id="chart2"></div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="column">
        <div class="ui container segment">
          <div class="ui container" id="pie1"></div>
        </div>
      </div>

      <div class="column">
          <div class="ui container segment">
          <div class="ui container" id="pie2"></div>
        </div>
      </div>
    </div>


    <div class="row">
      <div class="column">
        <div class="ui container segment">
          <div class="ui compact menu">
            <div class="ui simple dropdown item">
              Area
              <i class="dropdown icon"></i>
              <div class="menu">
                <div class="item" id="CY">朝陽</div>
                <div class="item" id="HD">海淀</div>
                <div class="item" id="TZ">通州</div>
              </div>
            </div>
          </div>
          <div class="ui container" id="chart1"></div>
        </div>
      </div>
    </div>



</div>

{% endblock %}

{% block chartjs %}

    <script>
    $(function () {
        // Create the chart
        $('#chart2').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: '發(fā)帖總量柱狀圖'
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                title: {
                    text: '數(shù)量'
                }
            },
            legend: {
                enabled: false
            },

            series: [{
                name: 'posts',
                colorByPoint: true,
                data: {{ series_post|safe }}
            }]
        });
    });

    </script>

    <script>
        $('#CY').click(function () {
          $('#chart1').highcharts({
            credits:{
                enabled:false
            },
            title: {
                text: '朝陽二手交易'
            },
            yAxis: {
                title: {
                    text: 'TOP 5'
                }
            },
            series: {{ chart_CY|safe }}
        });
    });
    </script>

    <script>
        $('#HD').click(function () {
          $('#chart1').highcharts({
            credits:{
                enabled:false
            },
            title: {
                text: '海淀二手交易'
            },
            yAxis: {
                title: {
                    text:  'TOP 5'
                }
            },
            series: {{ chart_HD|safe }}
        });
    });
    </script>

    <script>
        $('#TZ').click(function () {
          $('#chart1').highcharts({
            credits:{
                enabled:false
            },
            title: {
                text: '通州二手交易'
            },
            yAxis: {
                title: {
                    text:  'TOP 5'
                }
            },
            series: {{ chart_TZ|safe }}
        });
    });
    </script>

    <script>
    $(function () {
        $('#pie1').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: '一天內(nèi)交易物品種類分布'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                name: 'Percent',
                colorByPoint: true,
                data: {{ pie1_data|safe }}
            }]
        });
    });
    </script>

    <script>
    $(function () {
        $('#pie2').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: '一天內(nèi)交易物品地區(qū)分布'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                name: 'Percent',
                colorByPoint: true,
                data: {{ pie2_data|safe }}
            }]
        });
    });
    </script>

{% endblock %}

實(shí)現(xiàn)效果：

1.png

2.png

3.png

blog.png

總結(jié):

• 進(jìn)一步學(xué)習(xí)了Django的框架，后續(xù)準(zhǔn)備把document好好看看裙秋，買了本Python web開發(fā)測(cè)試驅(qū)動(dòng)方法腮考，準(zhǔn)備系統(tǒng)學(xué)學(xué)晋修。
• 學(xué)習(xí)了用senmatic模版做網(wǎng)頁晨继，下一步需要學(xué)習(xí)html＋css＋javascript
• 學(xué)習(xí)了如何搭建簡單的網(wǎng)頁增炭。
• 初步掌握了利用爬蟲抓取數(shù)據(jù)忍燥，并進(jìn)行網(wǎng)頁的數(shù)據(jù)可視化。

課程結(jié)束了隙姿，學(xué)習(xí)才剛開始梅垄，繼續(xù)學(xué)習(xí)，做些實(shí)際的項(xiàng)目输玷，以后繼續(xù)在博客中記錄下來队丝，謝謝老師。