應用技術：jQuery、tooltip、align-items

程式碼：

1、樣式設定

<style>

.year-outer-bar {
position: relative;

display: flex;  
align-items: flex-end;  側軸終點對齊彈性盒的各項元素，必須與flex搭配使用。
margin-right: 10px;
float: left;  #設定多個span標籤在同一行顯示，右側距離10px；

width: 30px;

min-width: 20px;
height: 60px;
background-color: #f1f1f1;
}

.inner-bar 
 
{
position: absolute;
display: block;
width: inherit; #保持和父容器一致的寬度
background-color: #8ed0ff;
z-index: 999;
}

.inner-bar.active {
background-color: #ffe98e; #與前一個類繫結 當增加active時觸發此樣式
}

.year-label {
font-size: 12px;
color: black;
position: absolute; #固定住label位置，避免飄走
z-index: 9999; #放在最上層顯示
}

.selected_year 
 
{
margin-left: 30px;  #整體右移30px;
}

</style>

2、html部分程式碼

<div class="selected_year">
    <span class="year-outer-bar" id="2000-outer" onclick="get_article_list('2000')">  #外部的灰色矩形 設定點選事件get_article_list(year),傳遞引數year用於篩選論文資料 設定id=2000-outer，用於設定樣式title和background-color
        <span class="year-label">2000</span> #label
        <span class="inner-bar" id="2000"></span> #代表數量的顏色柱
    </span>
    <span class="year-outer-bar" id="2001-outer" onclick="get_article_list('2001')">
        <span class="year-label">2001</span>
        <span class="inner-bar" id="2001"></span>
    </span>
    <span class="year-outer-bar" id="2002-outer" onclick="get_article_list('2002')">
        <span class="year-label">2002</span>
        <span class="inner-bar" id="2002"></span>
    </span>
    <span class="year-outer-bar" id="2003-outer" onclick="get_article_list('2003')">
        <span class="year-label">2003</span>
        <span class="inner-bar" id="2003"></span>
    </span>
     <span class="year-outer-bar" id="2004-outer" onclick="get_article_list('2004')">
        <span class="year-label">2004</span>
         <span class="inner-bar" id="2004"></span>
      </span>
</div>        

3、js部分

<script type="application/javascript">
        $(document).ready(function () {

            get_article_count();
}）；
const get_article_count = function () {
            var year_list = []
            for (var i = 2000; i < 2020; i++) {
                year_list.push(i)
            }
            var url = '{{ prepare_url("/people/get-article-statistics-count") }}'
            if (url !== '') {
                $.ajax({
                    async: true,
                    timeout: 200000,
                    type: 'POST',
                    url: url,
                    contentType: 'application/json',
                    data: JSON.stringify({
                        people_id: $("#people-id").val(),
                        year_list: year_list,
                    }),
                    success: function (result) {
                        if (result.succeed) {
                            if (result.data) {
                                addCountListHtml(result.data);
                                $.unblockUI();
                            }
                        }
                    },
                    error: function () {
                        $.unblockUI();
                    }
                });
            }

        }
const addCountListHtml = function (countListInfo) {

            $(countListInfo).each(function (index, data) {
                var year = nullToString(data.year);
                var year_count = nullToString(data.count);
                if (year === 'max') {
                    article_max = year_count;
                } else {
                    if (year_count === 0) {
                        $('#' + year + '').css("height", '0px');
                        $('#' + year + '-outer').attr("title", year + '年：0篇');
                        $('#' + year + '-outer').tooltip();
                    } else {
                        var outer_height = $('.year-outer-bar').height();
                        var height_percentage = (year_count / article_max).toFixed(2) * outer_height;
                        console.log(article_max)
                        $('#' + year + '').css("height", height_percentage.toString() + 'px');
                        $('#' + year + '-outer').attr("title", year + '年：' + year_count + '篇');
                        $('#' + year + '-outer').tooltip();
                    }
                }

            })
        }

大概效果如下圖：

取2000年-2019年的最大論文數作為max，按比例設定每個年份的高度

點選對應年份的bar可以檢視對應年份的論文，同時柱狀改變顏色