SOURCE

console 命令行工具 X clear

                    
>
console
$(document).ready(function () {
    $('#select_bottom').click(function () {
        $('#select_file').trigger('click');
    })
    $('#select_file').change(function () {
        importf(this);
    })
})

var strategyRule = {};
strategyRule["策略10"] = 14,
strategyRule["策略19"] = 1,
strategyRule["策略20"] = 1,
strategyRule["策略7"] = 1;


var wb;//读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串

function importf(obj) {
    if (!obj.files) {
        return;
    }
    var f = obj.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        var data = e.target.result;
        if (rABS) {
            wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                type: 'base64'
            });
        } else {
            wb = XLSX.read(data, {
                type: 'binary'
            });
        }
        //document.getElementById("table").innerHTML = JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]));
        /* data preprocess */
        var jsondata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]),
            jsondata2 = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[1]]);
        var data = jsondata.filter(function (item){
            var flag = false;
            if (item.运行状态 == '运行成功'){
                if (item.审批状态 == '审批通过' || item.审批状态 == '自动审批'){
                    flag = true
                }
            }
            return flag
        });


        data.forEach((item, i) => {
            item.结果数量 = parseFloat(item.结果数量)
        });

        let data2 = JSON.parse(JSON.stringify(data)), //深度复制下,防止原数据变化;
            newData = [];
        data2.forEach( item => {
            const res = newData.findIndex( elem => {
                return (item.决策领域 === elem.决策领域) && (item.运行开始时间.split(" ")[0] === elem.运行开始时间.split(" ")[0])
            });
            if (res !== -1) {
                newData[res].结果数量 = newData[res].结果数量 + item.结果数量;
            } else {
                newData.push(item)
            }
        });
        console.log(data2.length)
        console.log(newData.length)


        let newData2 = [];
        jsondata2.forEach(item => {
            item.已发送数量 = parseFloat(item.已发送数量);
            item.未发送数量 = parseFloat(item.未发送数量);
            const res = newData2.findIndex( ol => {
                return item.任务编号 === ol.任务编号;
            });
            if (res !== -1) {
                newData2[res].已发送数量 = newData2[res].已发送数量 + item.已发送数量;
                newData2[res].未发送数量 = newData2[res].未发送数量 + item.未发送数量;
            } else {
                newData2.push(item)
            }
        });


        var dataContainer = {};
        newData.map((item) => {
            dataContainer[item.决策领域] = dataContainer[item.决策领域] || []
            dataContainer[item.决策领域].push(item)
        })
        var strategyName = Object.keys(dataContainer),
            series = strategyName.map((strategyItem,i) => {
            var temp = dataContainer[strategyItem].map((item) => {
                var date = new Date(item.运行开始时间.split(" ")[0]),
                    day = 1000 * 60 * 60 * 24;
                return {
                    status: item.运行状态,
                    start: date.getTime(),
                    end: date.getTime() + day,
                    y: i,
                    amount: item.结果数量,
                };
            });
            return {
                id: i,
                name: strategyItem,
                data: temp
            };
        });
        var chart = Highcharts.ganttChart('gantt',{
            time: {
                // UTC+8
                timezoneOffset: -8 * 60
            },
            plotOptions: {  
                turboThreshold:0 //不限制数据点个数 
            }, 
            series: series,
            title: {
		        text: 'Strategy Schedule'
	        },
            tooltip: {
		        pointFormat: '<span>Status: {point.status}</span><br/><span>From: {point.start:%e. %b}</span><br/><span>To: {point.end:%e. %b}</span><br/><span>Amount: {point.amount}</span>'
	        },
            //导航器
            navigator: {
                enabled: true,
                series: {
                    type: 'gantt',
                    pointPlacement: 0.5,
                    pointPadding: 0.25
                },   
                yAxis: {
                    min: 0,
                    max: 3,
                    reversed: true,
                    categories: []
                }
	        },
            rangeSelector: {
                enabled: true,
                selected: 0,
                buttons: [{
                    type: 'week',
                    count: 1,
                    text: '1周'
                }, {
                    type: 'month',
                    count: 1,
                    text: '1月'
                }, {
                    type: 'month',
                    count: 3,
                    text: '1季'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1年'
                }, {
                    type: 'all',
                    text: 'All'
                }]
            }, 
            scrollbar: {
                enabled: true
            },
            xAxis: {
                currentDateIndicator: {
                    width: 5,
                    label: {
                        format: '%Y-%m-%d, %H:%M'
                    }
                }
	        },
            yAxis: {
		        type: 'category',
		        grid: {
                    columns: [{
                        title: {
                            text: '策略'
                        },
                        categories: Highcharts.map(series, function (s) {
                            return s.name;
                        })
                    }]
		        }
	        }
        });

        data.forEach(item => {
            const target = newData2.find(elem => {
                return elem.任务编号 === item.运行编号
            });
            if (target === undefined) {
                item.已发送数量 = null;
                item.未发送数量 = null;
            } else {
                item.已发送数量 = target.已发送数量;
                item.未发送数量 = target.未发送数量;
            }
        })


        var filterParams = {
            comparator: function (filterLocalDateAtMidnight, cellValue) {
            var dateAsString = cellValue;
            if (dateAsString == null) return -1;
            var dateParts = dateAsString.split(' ')[0];
            var cellDate = new Date(dateParts);

            if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
                return 0;
            }

            if (cellDate < filterLocalDateAtMidnight) {
                return -1;
            }

            if (cellDate > filterLocalDateAtMidnight) {
                return 1;
            }
            },
            browserDatePicker: true,
            minValidYear: 2000,
        };
        const columnDefs = [
            { field: "决策领域",rowGroup: true, enableRowGroup: true },
            { field: "运行编号"},
            { field: "结果数量", aggFunc: 'sum' },
            { field: "已发送数量", aggFunc: 'sum'},
            { field: "运行状态" },
            { field: "运行开始时间", filter: 'agDateColumnFilter', filterParams: filterParams}
        ];
        const gridOptions = {
            columnDefs: columnDefs,
            rowData: data,
              defaultColDef: {
                flex: 1,
                minWidth: 150,
                sortable: true,
                resizable: true,
            },
            autoGroupColumnDef: {
                minWidth: 250,
            },
            sideBar: 'columns',
        };
        const gridDiv = document.querySelector('#table');
        new agGrid.Grid(gridDiv, gridOptions);
    };
    if (rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
}


function fixdata(data) { //文件流转BinaryString
    var o = "",
        l = 0,
        w = 10240;
    for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
    return o;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,
        initial-scale=1.0"/>
        <title>策略日志可视化</title>
        <style>
            /* CSS */
        </style>
        <script type="text/javascript" src="../jquery.min.js"></script>
                <script type="text/javascript" src="../xlsx.full.min.js"></script>
        <script type="text/javascript" src="../highcharts-gantt.js"></script>
        <script type="text/javascript" src="../exporting.js"></script>
        <script type="text/javascript" src="../ag-grid-enterprise.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
        <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css">
        <script>
            /* JS */
        </script>
    </head>
    <body>
        <div class="page-head">
            <div class="left">
                <h1>策略运行日志</h1>
            </div>
            <div class="right">
                <input id="select_file" type="file" />
                <a id="select_bottom" href="javascript:void(0);">选择文件</a>
            </div>
        </div>
        <div class="content">
            <div id='gantt'></div>
            <div id='table' style="height: 400px; width:900px; margin: auto;" class="ag-theme-alpine"></div>
        </div>
    </body>
</html>
body {
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: #2688ca;
}
.page-head {
    margin: auto;
    height: 100px;
    width: 70%;
    max-width: 1100px;
}

#select_file{
  border:0px;display: none;
}
#select_bottom{
  color:#00A2D4;
  padding:4px 6px;
  border:1px solid #00A2D4;
  border-radius:2px;
  text-decoration: none;
}
.content {
    max-width: 1100px;
    min-width: 800px;
    height: 800px;
    margin: lem auto;
}
#gantt {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}