個人網站搭建 (第十一天) 閱讀量曲線圖

    爲了讓本身能直觀的看出博客閱讀量的變化，而不須要到後臺觀察，因此就使用了Highcharts的基礎折線圖來幫助實現。其文檔地址：Highcharts 演示
    樣例效果：

    經過閱讀API文檔，能夠實現本身想要的樣式，也能夠改變線條的顏色。一系列的配置主要有chart: {圖表配置}，colors: [顏色集合]，credits: {版權信息}，data: {數據功能模塊}，drilldown: {鑽取}，exporting: {導出}，labels: {標籤}，legend: {圖例}，loading: {加載}，navigation: {導航}，noData: {沒有數據}，plotOptions: {數據列配置}，responsive: {響應式}，series: [{數據列}]，subtitle: {副標題}，title: {標題}，tooltip: {數據提示框}，xAxis: [{X 軸}]，yAxis: [{Y 軸}]，zAxis: {Z 軸}

    不過這樣調試起來比較麻煩，由於每修改一個地方就要去觀察圖表是否有所改變，否則到時候什麼地方出了問題殊不知道是哪一步驟錯誤致使的。幸虧Highcharts提供了可視化編輯功能，支持在線調試，最後把所須要的js代碼貼到項目中便可，可視化編輯：基礎折線圖-可視化

    該圖表顯示基本是靠js來實現的，HTML結構裏只須要定義一個div，id值爲container，這個container要與js裏的容器名同樣

<div id="container" style="max-width:800px;height:400px"></div>

    js代碼以下：

var chart = Highcharts.chart('container', {
    title: {
        text: '2010 ~ 2016 年太陽能行業就業人員發展狀況'
    },
    subtitle: {
        text: '數據來源：thesolarfoundation.com'
    },
    yAxis: {
        title: {
            text: '就業人數'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },
    series: [{
        name: '安裝，實施人員',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: '工人',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: '銷售',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: '項目開發',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: '其餘',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
});

    能夠看到，data是一個列表，事實上xAxis和yAxis (也就是x軸與y軸)也能夠接受列表的數據。我要的功能很簡單，只須要一個標題，一條曲線，一個日期的x軸和對應的列表數據，那首先就須要拿到日期和閱讀量數據的列表

    定義一個能夠返回日期和對應閱讀量數據的列表，先以最近七天閱讀量變化爲例

def get_seven_days_read_data(content_type):
    """
    做用：獲取七天內的閱讀記錄
    :param content_type: 數據表的模型類
    :return: 七天內的日期和閱讀量
    """
    today = timezone.now().date()
    dates = []
    read_nums = []
    for i in range(7, 0, -1):
        # timedelta表示日期差量
        date = today - datetime.timedelta(days=i-1)
        dates.append(date.strftime('%m/%d'))
        read_detail = ReadDetail.objects.filter(content_type=content_type, date=date)
        result = read_detail.aggregate(read_num_sum=Sum('read_num'))
        # 若是前面不爲false就取前面的,如爲false則取後面的
        read_nums.append(result['read_num_sum'] or 0)
    return dates, read_nums

    拿到dates和read_nums兩個列表之後，就能夠經過render函數將它們傳入到前端頁面

<div id="container"></div>

<script>
   // 圖表配置
   var options1 = {
       chart: {
           type: 'line' 
       },   //指定圖表的類型，默認是折線圖（line）
       title: { text: null },     // 標題
       xAxis: {
           categories: {{ seven_dates|safe }},  // x 軸分類
           tickmarkPlacement: 'on',
           title: { text: '過去七日閱讀量變化' }
       },

       yAxis: {
           title: { text: null }, // y 軸標題
           labels:{ enabled:false },
           gridLineDashStyle: 'ShortDash',  // 刻度線對齊方式
       },

       series: [{                              // 數據列
           name: '閱讀量',                        // 數據列名
           data: {{ seven_read_nums }}                     // 數據
       }],

       plotOptions:{
           line:{
               dataLabels: {
                   enabled: true,
                   color:'darkblue',
               }
           }
       },

       legend:{ enabled: false },     //消除圖例
       credits: { enabled:false },     //消去版權信息
   };
   
    // 圖表初始化函數
    var chart = Highcharts.chart('container', options1);
</script>

    接下來，還有一個整年閱讀量，與七天內閱讀量變化相似，這就須要對每個月的閱讀量進行Sum後返回

def get_year_read_data(content_type):
    """
    做用：獲取該年每月的閱讀記錄
    :param content_type: 數據表的模型類
    :return: 整年每個月的閱讀量
    """
    # 獲取每月的閱讀記錄
    months = []
    read_nums = []
    year = datetime.datetime.now().year
    month = datetime.datetime.now().month

    for month in range(1, month+1):
        months.append(str(month) + '月')
        read_month_data = ReadDetail.objects.filter(content_type=content_type, date__year=year, date__month=month)
        result = read_month_data.aggregate(read_num_sum=Sum('read_num'))
        read_nums.append(result['read_num_sum'] or 0)

    return months, read_nums, year

    比七天閱讀量變化不一樣的是，多傳了一個year到模板中，這是爲了使代碼可以適應年份的變化而增長的一個參數

<div id="container2"></div>

<script>
    var options2 = {
        chart: { type: 'line' },   //指定圖表的類型，默認是折線圖（line）
            title: { text: null },     // 標題
        xAxis: {
            categories: {{ thirty_dates|safe }},  // x 軸分類
            tickmarkPlacement: 'on',
            title: { text: {{ year }}+'年閱讀量變化'}
        },

        yAxis: {
            title: { text: null }, // y 軸標題
            labels:{ enabled:false },
            gridLineDashStyle: 'ShortDash',  // 刻度線對齊方式
        },

        series: [{                              // 數據列
            name: '閱讀量',                        // 數據列名
            data: {{ thirty_read_nums }}                     // 數據
        }],

        plotOptions:{
            line:{
                dataLabels: {
                    enabled: true,
                    color:'darkblue',
                }
            }
        },

        legend:{ enabled: false },     //消除圖例
        credits: { enabled:false },     //消去版權信息
    };

    // 圖表初始化函數
    var chart = Highcharts.chart('container2', options2);
</script>

    曲線圖就製做好了，不過好多細節和自定義的功能仍是應該多看看API，我只參透了一點皮毛就以爲意義匪淺。另外還有一個特別注意的地方，必須引入Highcharts的script纔可生效，以前被坑過，請留意

<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>