SOURCE

console 命令行工具 X clear

                    
>
console
 /* Read XLSX Module */

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

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]]);
        var data = jsondata.filter(function (item){
            var flag = false;
            if (item.运行状态 == '运行成功'){
                if (item.审批状态 == '审批通过' || item.审批状态 == '自动审批'){
                    flag = true
                }
            }
            return flag
        });
        var dataContainer = {};
        data.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 {
                    y: i,
                    id: item.运行编号,
                    status: item.运行状态,
                    start: date,
                    end: date + day,
                    amount: item.结果数量,
                };
            });
            return {
                id: i,
                name: strategyItem,
                data: temp
            };
        });
    };
    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;
}


var today = new Date(),
	day = 1000 * 60 * 60 * 24,
	map = Highcharts.map,
	dateFormat = Highcharts.dateFormat,
	series;
// Set to 00:00:00:000 today
today.setUTCHours(-8);
today.setUTCMinutes(0);
today.setUTCSeconds(0);
today.setUTCMilliseconds(0);
today = today.getTime();

(function (Highcharts) {
	var renderAmount = (function (Highcharts) {
		var calculateAmountAndCountEvent = function (series) {
			var points = series.data,
				intervalAmount = Highcharts.reduce(points, function(total, current) {
					return total + current.amount;}, 0);
			series.amount = intervalAmount;
		};
		
		return renderAmount;
	}(Highcharts))
})


var getStratergyAmountAndCount = function() {
	var chart = this.chart,
		series = chart.get('strategy-' + (this.value+1)),
		points = series.points,
		totalAmount = points.reduce(function (total, current) {return total + current.data.amount;}, 0);
	return totalAmount;
};
strategy = [{
	model: 'Strategy 1',
	current: 0,
	deals: [{
		status: '运行成功',
		from: today - 1 * day,
		to: today,
		amount: 1
	},  {
		status: '运行成功',
		from: today + 5 * day,
		to: today + 6 * day,
		amount: 100
	}]
}, {
	model: 'Strategy 2',
	current: 0,
	deals: [{
		status: '运行成功',
		from: today - 2 * day,
		to: today + 1 * day,
		amount: 1000
	}, {
		status: '运行成功',
		from: today - 7 * day,
		to: today -5 * day,
		amount: ""
	}, {
		status: '运行成功',
		from: today + 2 * day,
		to: today + 6 * day,
		amount: 1000
	}]
}, {
	model: 'Strategy 3',
	current: 0,
	deals: [{
		status: '运行成功',
		from: today + 0 * day,
		to: today + 3 * day,
		amount: 10000
	}, {
		status: '运行成功',
		from: today + 3 * day,
		to: today + 4 * day,
		amount: 10000
	}, {
		status: '运行成功',
		from: today + 6 * day,
		to: today + 8 * day,
		amount: 10000
	}]
}, {
	model: 'Strategy 4',
	current: 0,
	deals: [{
		status: '运行成功',
		from: today - 1 * day,
		to: today + 1 * day,
		amount: 10000
	}, {
		status: '运行成功',
		from: today - 3 * day,
		to: today - 2 * day,
		amount: 1000
	}, {
		status: '运行成功',
		from: today + 2 * day,
		to: today + 3 * day,
		amount: 100
	}]
}, {
	model: 'Strategy 5',
	current: 0,
	deals: [{
		status: '运行成功',
		from: today - 1 * day,
		to: today + 2 * day,
		amount: 1000
	}, {
		status: '运行成功',
		from: today + 3 * day,
		to: today + 4 * day,
		amount: 100
	}, {
		status: '运行成功',
		from: today + 5 * day,
		to: today + 6 * day,
		amount: 1000
	}]
}];
series = strategy.map(function (strategy, i) {
	var data = strategy.deals.map(function (deal) {
		return {
			id: 'deal-' + i,
			status: deal.status,
			start: deal.from,
			end: deal.to,
			y: i,
			amount: deal.amount
		};
	});
	return {
		id: '策略-' + (i+1),
		name: strategy.model + i,
		data: data
	};
})
console.log(series[0])
Highcharts.ganttChart('gantt', {
	time: {
		// UTC+8
		timezoneOffset: -8 * 60
	},
	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: []
		}
	},
	scrollbar: {
		enabled: true
	},
	//时间范围按钮
	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'
		}]
	},
	xAxis: {
		currentDateIndicator: {
			width: 5,
			label: {
				format: '%Y-%m-%d, %H:%M'
			}
		}
	},
	yAxis: {
		type: 'category',
		grid: {
			columns: [{
				title: {
					text: '策略'
				},
				categories: map(series, function (s) {
					return "策略" + s.name;
				})
			}, {
				title: {
					text: 'Amount'
				},
				labels: {
					formatter: function() {
						var chart = this.chart,
							series = chart.get('策略-' + (this.value + 1)),
							points = series.data;
						series.amount = Highcharts.reduce(points, function (total, current) {return total + (current.amount?current.amount:0);}, 0);
						return series.amount;
					}
				}
			}]
		}
	}
});
<!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="../highcharts-gantt.js"></script>
        <script type="text/javascript" src="../exporting.js"></script>
        <script type="text/javascript" src="../xlsx.full.min.js"></script>
        <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>
    </body>
</html>
body {
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  color: #2688ca;
}
.page-head {
    margin: 0 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
}

本项目引用的自定义外部资源