Version
5.3.0
Link to Minimal Reproduction
- No response*
Steps to Reproduce
- Create the chart with realtime data and xaxis is time axis.
- Add minor ticks to xaxis.
- look for minor ticks.
Current Behavior
Highlighted part is where the ticks are adjusted in compromised position.
Ideally should be spread similar to rest of intervals.
Expected Behavior
Expected Behavior.
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
Please check the example below.
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
};
}
let data = [];
let now = new Date(1997, 9, 3);
let oneDay = 24 * 3600 * 1000;
let value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
data.push(randomData());
}
option = {
xAxis: {
type: 'time',
splitLine: {
show: false
},
minorTick: {
show: true,
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [
{
name: 'Fake Data',
type: 'line',
showSymbol: false,
data: data
}
]
};
setInterval(function () {
for (var i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
}
myChart.setOption({
series: [
{
data: data
}
]
});
}, 1000);
3条答案
按热度按时间rdrgkggo1#
You cannot ignore those only before the first and after the last. The only thing you can do is to hide the minor ticks all.
vlju58qv2#
minorTick
cuts ticks into a given number of parts, which by default is 5. The reason why it behaves like this is because it cuts the axis from the beginning (/end) to the first (/last) tick.The time between two ticks in the time axis is not the same. So it's hard to tell how long should the beginning or ending minor ticks should last.
jtjikinw3#
@Ovilia , as the dynamic(new) data, comes in, the time between two major ticks won't match only in these 2 cases
so in these 2 cases, can we control the no of minor ticks shown? or can we completely hide minor ticks?