你们有没有遇到这样的情况:
1.输入开始时间和结束时间,明天时间间断有一个月,返回的却只有几天的数据
2.但又被要求x轴要根据查询时间展示,后端数据不愿意自行补齐该部分
3.只能前端自力更生
过程不堪回首,现在好歹有了思路:
1.先利用循环得到开始时间到结束时间的x轴数组
2.只要不等于返回时间,就在原数据数组后利用push()方法直接添加x中的时间数据
3.利用插入排序方法,按照时间顺序排序数组
4.重新赋值回原数据
5.利用highstock插件画图,具体方法参考前博文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://img.highcharts.com.cn/highstock/highstock.js"></script>
<script src="https://img.highcharts.com.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="https://img.highcharts.com.cn/highcharts/modules/no-data-to-display.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100%;
font-size: 15px;
overflow: auto;
background: gray;
}
section {
width: 95%;
height: 100%;
margin: 0 auto;
}
section>div {
width: 100%;
margin-top: 10px;
}
section>div:hover {
box-shadow: 2px 2px 15px 0px #aaa;
}
</style>
</head>
<body>
<section></section>
</body>
<script>
//得到series数组
function getSeries(datas, seriesName) {
var series = []
for(var i in seriesName) {
series.push({
type: 'column',
name: seriesName[i],
data: datas[i],
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
})
}
return series;
}
function pushdArray(arr, index, value) { //arr 被插二维数组 index二维数组索引 value插入值
if(index >= arr.length) {
return;
}
arr[index].push(value);
}
function arrs(arr) {
var tArr = [];
for(var i in arr) {
tArr.push([])
}
return tArr;
}
var groupingUnits = [
[
'day', [1]
],
[
'week', // unit name
[1] // allowed multiples
],
[
'month', [1, 2, 3, 4, 6],
],
[
'hour', [1, 2, 3, 4, 6],
],
[
'minute', [1, 2, 3, 4, 6],
]
];
// create the chart
Highcharts.setOptions({
global: {
useUTC: false
//世界时间
},
lang: {
rangeSelectorZoom: '范围:',
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月",
"九月", "十月", "十一月", "十二月"
],
shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月',
'九月', '十月', '十一月', '十二月'
],
weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
printChart: '打印图表',
downloadPNG: '下载JPEG 图片',
downloadJPEG: '下载JPEG文档',
downloadPDF: '下载PDF 图片',
downloadSVG: '下载SVG 矢量图',
contextButtonTitle: '下载图片'
}
});
//假数据
var a = [{
name: '品质异常1',
exceptionName: ['异常1', '异常2', '异常3', '异常4'],
arr: [
[1551283200000, 7.204, 7.232, 7.037, 7.072],
[1551542400000, 7.058, 7.127, 6.953, 6.988],
[1551715200000, 7.068, 7.137, 6.943, 6.962],
[1551974400000, 7.078, 7.147, 6.923, 6.961]
]
},
{
name: '品质异常2',
exceptionName: ['异常1', '异常2', '异常3', '异常4'],
arr: [
[1551283100000, 7.204, 7.232, 7.037, 0],
[1551283200000, 7.204, 7.232, 7.037, 0],
[1551456000000, 7.058, 7.107, 6.933, 0],
[1551715200000, 6.961, 7.003, 6.92, 6.982],
[1551888000000, 6.947, 7.024, 0, 6.982],
[1551974400000, 0, 7.141, 6.891, 7.1],
[1552147200000, 6.968, 7.204, 6.905, 7.086]
]
},
{
name: '品质异常2',
exceptionName: ['异常1', '异常2', '异常3', '异常4'],
arr: [
]
}
]
//插入排序
function insertionSort(iArr) {
var oArr = [iArr[0]];
var n = iArr.length;
// 从左边开始，每次拿一个与已排列好的数组进行比较
for(var i = 1; i < n; i++) {
for(var j = 0; j < i; j++) {
if(iArr[i][0] <= oArr[j][0]) {
// 若介于小于该元素，则插入其前方
oArr.splice(j, 0, iArr[i]);
break;
} else if(j === i - 1) {
// 若比最后一个还大，则排在最右侧
oArr.push(iArr[i]);
}
}
}
return oArr;
}
var start = '2019-01-28 00:00:00';//模拟时间输入框开始时间
var end = '2019-03-10 16:00:00';//模拟时间输入框结束时间
start = Date.parse(start);//获取时间戳
end = Date.parse(end);
var limit = 24 * 3600 * 1000//以一天为时间间隔
var x = [];//x轴时间数组
var datay = [];
for(var i = start; i < end; i += limit) {
x.push(i);
}
var arr1 = a;
for(var m in arr1) {
var arr = arr1[m].arr;
if(arr.length > 0) {
for(var i in arr) {
for(var j in x) {
if(arr[i][0] !== x[j]) {
//为了偷懒,后面的0是手动加的,你们可以利用循环添加
arr.push([x[j], 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
}
}
break;
}
var r = insertionSort(arr); //插入排序
console.log('让,', r)
//保存排序数据
datay[m] = r
} else {
//如果没有数据直接赋值空数组
datay[m] = []
}
}
//将保存的数组赋值给原数据
for(var m in a) {
a[m].arr = datay[m]
}
console.log('xy', a);
var tArr = [];
for(var i = 0; i < a.length; i++) {
var str = '<div id="container' + i + '" style="height: 350px;"></div>';
$('section').append(str);
var title = a[i].name;
var seriesName = a[i].exceptionName;
tArr = arrs(seriesName);
for(var j = 0; j < a[i].arr.length; j++) {
for(var k = 0; k < seriesName.length; k++) {
pushdArray(tArr, k, [a[i].arr[j][0],
a[i].arr[j][k + 1]
]);
}
}
var chart = Highcharts.stockChart('container' + i, {
chart: {
type: 'column',
spacing: [10, 40, 10, 40]
},
rangeSelector: {
inputDateFormat: '%Y-%m-%d',
inputEditDateFormat: '%Y-%m-%d',
enabled: true,
selected: 1, //表示以上定义button的index,从0开始
buttons: [
{
type: 'day',
count: 1,
text: '日',
},
{
type: 'all',
text: '全部'
}
]
},
title: {
text: title
},
credits: { //banquan
enable: false,
href: '',
position: {},
style: {},
text: ''
},
legend: { //图例
enabled: true, //是否显示图例
align: 'top'
},
scrollbar: { //滚动条
height: 10,
minWidth: 50,
},
navigator: { //导航器
adaptToUpdatedData: true,
enable: true,
handles: {},
height: 20,
marginTop: 10,
maskInside: true,
opposite: false,
outlineColor: '#ccc',
},
xAxis: {
min: 0,
dateTimeLabelFormats: {
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%m-%d',
week: '%m-%d',
month: '%y-%m',
year: '%Y'
},
tickPixelInterval: 0, //刻度间隔为0
},
tooltip: {
split: true,
shared: false,
valueDecimals: 2, //保留两位小数
shape: 'callout',
xDateFormat: '%Y-%m-%d',
headerFormat: '<span style="color:{series.color}">\u25CF</span><small>{point.key}(总个数:{point.stackTotal})</small><table>',
pointFormat: '<span style="color:{series.color}">\u25CF</span><tr><td style="color: {series.color}"><b>{series.name}: </b></td>' +
'<td style="text-align: right"><b>{point.y}</td></tr>',
footerFormat: '</table>',
dateTimeLabelFormats: {
hour: "%H时",
day: "%m-%e",
month: "%Y-%m",
},
},
yAxis: [{
labels: {
align: 'right',
},
resize: {
enabled: true
},
lineWidth: 2,
opposite: false
}, {
labels: {
align: 'right',
},
title: {
text: '异常个数: pcs'
},
offset: 0,
lineWidth: 2,
opposite: false
}],
plotOptions: {
series: {
showInLegend: true
},
column: {
stacking: 'normal',
dataLabels: {
//enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) ||
'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: getSeries(tArr, seriesName) //注意这里是tArr而非datas
});
}
</script>
</html>