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>
</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>
</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
}