iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
0
自我挑戰組

從爬蟲到架站系列 第 20

Day 19: 從爬蟲到架站-隊伍勝率圖(前端)

  • 分享至 

  • xImage
  •  

昨天還沒把全部的東西做好,今天要把它整個連起來,這邊發現了一個問題,官網上的名稱跟一般稱呼不一樣,像是統一獅是統一7-ELEVEn,而這次在實作這個功能的時候是用官網的名稱下去做,之前是用普通的稱呼,為了保持統一性,選項的文字部分不更改,只改value

整個html表單

<form>
    <div class="row">
        <div class="form-group col-6">
            <select name="team" id="team" onchange="get_win()" class="form-control">
                <option value="中信兄弟">中信兄弟</option>
                <option value="統一7-ELEVEn">統一獅</option>
                <option value="富邦">富邦悍將</option>
                <option value="樂天">樂天桃猿</option>
            </select>
        </div>
     </div>
</form>

然後發現昨天忘記存隊伍的日期

def store_team_win_date(team, win_date):
    db = firestore.client()
    doc_ref = db.collection(u'隊伍').document(str(team))
    doc = doc_ref.get()
    if doc.exists:
        doc_ref.update({"時間": win_date})
    else:
        doc_ref.set({"時間": win_date})

接著是整個ajax

function get_win(){
    let team = document.getElementById("team").value;
    let chart = echarts.init(document.getElementById('stat'), 'white', { renderer: 'canvas' });
    $.ajax({
            type: 'POST',
            url: "/get_team_win_stat",
            data: { "team": team },
            success: function (result) {
                console.log(result);
                let win_percetage = result["勝率"].reverse();
                let date_list = result["時間"];
                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]));
                }
                
                option = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            params = params[0];
                            var date = new Date(params.name);
                            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                        },
                        axisPointer: {
                            animation: false
                        }
                    },
                    xAxis: {
                        type: 'time',
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: false
                        }
                    },
                    series: [{
                        data: data,
                        type: 'line'
                    }]
                };
            
                chart.setOption(option);
            }
        });
}

明天想把四隊的折線圖疊起來


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

尚未有邦友留言

立即登入留言