iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
0
自我挑戰組

從爬蟲到架站系列 第 21

Day 20: 從爬蟲到架站-隊伍勝率圖

  • 分享至 

  • xImage
  •  

球隊戰績的部分想直接秀出來,那就不需要用選單了,直接讓後端傳全部的資料過來就好,所以將app.py的程式碼改寫一下

@app.route('/get_team_win_stat', methods=['POST'])
def get_team_win_stat():
    all_team_stat = {}
    team_list = ["中信兄弟", "統一7-ELEVEn", "富邦", "樂天"]
    for team in team_list:
        stat = get_team_stat(team)
        all_team_stat[team] = stat
    if stat:
        return jsonify(all_team_stat)
    else:
        return redirect(url_for('index'))

接著前端的ajax也改一下,最主要是將昨天產生data的程式碼包成一個function

function generate_team_data(team_data, team){
    let win_percetage = team_data["勝率"].reverse();
    let date_list = team_data["時間"];
    let date = [];
    let data = [];

    for(let i = 0; i < date_list.length;i++){
        let date_split = date_list[i].split("/");
        let t = new Date(date_split[0],date_split[1],date_split[2]);
        date.push(t);
    }

    function generatedata(date, val){
        return {
            name: date.toString(),
            value:[
                date,
                val
            ]
        };
    }

    for(let i =0 ; i < win_percetage.length; i++){
        data.push(generatedata(date[i],win_percetage[i]));
    }
    return data;
}

let team_dict = {};
let team_list = ["中信兄弟", "統一7-ELEVEn", "富邦", "樂天"]
for(let i = 0; i < team_list.length; i++){
    team_dict[team_list[i]] = generate_team_data(result[team_list[i]]);
}

資料處理好了,把昨天圖的配置項修改一下,並且加入一些標記(使用legend)

option = {
    tooltip: {
        trigger: 'axis',
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        }
    },
    legend: {
        name: team_list[0],
        name: team_list[1],
        name: team_list[2],
        name: team_list[3],
    },
    series: [{
        name: team_list[0],
        data: team_dict[team_list[0]],
        type: 'line'
    },{
        name: team_list[1],
        data: team_dict[team_list[1]],
        type: 'line'
    },{
        name: team_list[2],
        data: team_dict[team_list[2]],
        type: 'line'
    },{
        name: team_list[3],
        data: team_dict[team_list[3]],
        type: 'line'
    }]
};

legend的name必須要和series中的name一樣

最後是成果圖

明天把表格的資料也爬下來顯示


上一篇
Day 19: 從爬蟲到架站-隊伍勝率圖(前端)
系列文
從爬蟲到架站21
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言