最近有个需求,需要有个chart展示某些microservice的不同时间的状态,UI设计出来的图我根据HighChart里面的Chart看,和scatter最符合,就决定使用scatter,但是他默认的X轴并不是时间,需要改成时间,花了点时间尝试,记录下.
首先把X轴变成以时间为单位的,就要用到这个type属性,设置成’datetime’,tickInterval是指的时间间隔,我这里写的是一天,label里面跟的是X轴显示的format,时间格式化,被我comment掉的是X轴 Label的对齐策略和旋转
xAxis: {
type: 'datetime',
tickInterval: 24 * 36e5,
labels: {
format: '{value: %Y-%m-%e}',
// align: 'right',
// rotation: -30
}
}
然后是hover某个Node时候的detail的展示format,这里有一点需要注意,这里的数据源并不是point了,之前我的有篇blog用的networkgraph,里面的节点变量就是point,我一开始也下意识用point,发现确实undefined,然后只有去前端debug,发现是options,还有一点,如果写成comment中的 lambda 形式的话,this将会是undefined,无法取到值.(鬼知道我经历了什么才总结出来的)
pointFormatter: function () {
const time = new Date(this.options.x).toISOString();
return time.substring(0, time.indexOf('T'));
}
//pointFormatter: () => {
// const time = new Date(this.options.x).toISOString();
// return time.substring(0, time.indexOf('T'));
//}
之后是数据格式,这里我给了三组数据,因为是测试数据,就没什么具体意义,只是为了测试把X轴变为时间为单位.这里要注意,如果是用new Date()这种,他会带有时区,导致在图中显示出来的点不会刚好在时间节点上,会根据时区偏移一点,所以我这里使用的是UTC时间,
series: [
{
name: 'Type A',
color: 'rgba(223, 83, 83, .5)',
data: [
[Date.UTC(2021, 1, 17), 1],
[Date.UTC(2021, 1, 18), 1],
[Date.UTC(2021, 1, 20), 1],
[Date.UTC(2021, 1, 25), 1],
[Date.UTC(2021, 1, 26), 1],
]
},
{
name: 'Type B',
color: 'rgba(119, 152, 191, .5)',
data: [
[Date.UTC(2021, 1, 17), 2],
[Date.UTC(2021, 1, 20), 2],
[Date.UTC(2021, 1, 21), 2],
[Date.UTC(2021, 1, 24), 2],
[Date.UTC(2021, 1, 25), 2],
[Date.UTC(2021, 1, 26), 2]
]
},
{
name: 'Type C',
color: 'rgba(243, 247, 3, .5)',
data: [
[Date.UTC(2021, 1, 16), 3],
[Date.UTC(2021, 1, 18), 3],
[Date.UTC(2021, 1, 23), 3],
[Date.UTC(2021, 1, 24), 3],
[Date.UTC(2021, 1, 26), 3],
]
},
]
所以我再给出最终的 config string
export const HISTORICAL_SRC = {
chart: {
type: 'scatter',
zoomType: 'xy',
width:1500
},
exporting: {
enabled: false
},
title: null,
credits: {
enabled: false
},
xAxis: {
startOnTick: true,
endOnTick: true,
showLastLabel: true,
type: 'datetime',
tickInterval: 24 * 36e5,
labels: {
overflow:'allow',
format: '{value: %Y-%m-%e}',
// align: 'right',
// rotation: -30
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: -15,
y: 0,
floating: true,
backgroundColor: '#FFFFFF',
// borderWidth: 1
},
yAxis: {
title: {
enabled: false
},
labels: {
enabled: false
}
},
plotOptions: {
scatter: {
marker: {
radius: 10,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
// pointFormat: 'new Date({point.x}), {point.y} kg'
pointFormatter: function () {
const time = new Date(this.options.x).toISOString();
return time.substring(0, time.indexOf('T'));
}
}
}
},
series: [
{
name: 'Type A',
color: 'rgba(223, 83, 83, .5)',
data: [
[Date.UTC(2021, 1, 17), 1],
[Date.UTC(2021, 1, 18), 1],
[Date.UTC(2021, 1, 20), 1],
[Date.UTC(2021, 1, 25), 1],
[Date.UTC(2021, 1, 26), 1],
]
},
{
name: 'Type B',
color: 'rgba(119, 152, 191, .5)',
data: [
[Date.UTC(2021, 1, 17), 2],
[Date.UTC(2021, 1, 20), 2],
[Date.UTC(2021, 1, 21), 2],
[Date.UTC(2021, 1, 24), 2],
[Date.UTC(2021, 1, 25), 2],
[Date.UTC(2021, 1, 26), 2]
]
},
{
name: 'Type C',
color: 'rgba(243, 247, 3, .5)',
data: [
[Date.UTC(2021, 1, 16), 3],
[Date.UTC(2021, 1, 18), 3],
[Date.UTC(2021, 1, 23), 3],
[Date.UTC(2021, 1, 24), 3],
[Date.UTC(2021, 1, 26), 3],
]
},
]
}