我有一个多轴时间轴图表。某些yax从时间序列中间某个位置的非零值开始。我注意到这些数据集在图表上出现了幻影线。
我尝试将beginAtZero
属性设置为false
(无论如何都是默认值)
我如何摆脱它们?
这是一个代码段,其中显示了chart options
对象的data
和chart
属性。
let chartPropertyOptions = {
scales: {
xAxes: [
{
type: 'time',
display: true,
distribution: 'linear',
time: {
unit: 'day',
displayFormats: {
day: 'DD MMM YYYY'
}
},
scaleLabel: {
display: true,
labelString: 'Date',
fontSize: 16
},
gridLines: {
display: false
},
display: false,
id: 'date'
}
],
yAxes: [
{
id: 'axis0',
scaleLabel: {
display: true,
labelString: 'Axis 0',
fontSize: 16
},
gridLines: {
display: false
},
stacked: true,
position: 'right',
ticks: {
max: 40,
min: 5
}
},
{
id: 'axis1',
scaleLabel: {
display: true,
labelString: 'Axis 1',
fontSize: 16
},
gridLines: {
display: false
},
stacked: true,
position: 'right',
ticks: {
max: 40,
min: 5,
beginAtZero: false
},
display: false,
},
{
id: 'axis2',
scaleLabel: {
display: true,
labelString: 'Axis 2',
fontSize: 16
},
gridLines: {
display: false
},
stacked: true,
position: 'right',
ticks: {
max: 40,
min: 5
},
display: false,
},
{
id: 'axis3',
scaleLabel: {
display: true,
labelString: 'Axis 3',
fontSize: 16
},
gridLines: {
display: false
},
stacked: true,
position: 'left',
ticks: {
max: 40,
min: 5
},
display: false,
},
{
id: 'axis4',
scaleLabel: {
display: true,
labelString: 'Axis 4',
fontSize: 16
},
gridLines: {
display: false
},
stacked: true,
position: 'right',
}
]
},
maintainAspectRatio: true,
responsive: true
};
let data = {
labels: response.data.map(a => a.date),
xAxisId: 'date',
datasets: [
{
label: 'Axis 0',
data: response.data.map(a => a.v1),
lineTension: 0,
fill: false,
yAxisID: 'yaxis0',
borderColor: '#fe8b36',
},
{
label: 'Axis 1',
data: response.data.map(a => {
let result = a.v1_mean + a.v1_std*2;
return result;
}),
lineTension: 0,
fill: false,
yAxisID: 'yaxis1',
borderColor: '#ff0000',
},
{
label: 'Axis 2',
data: response.data.map(a => {
let result = a.v1_mean - a.v1_std*2;
return result
}),
lineTension: 0,
fill: false,
yAxisID: 'yaxis2',
borderColor: '#002ef4',
},
{
label: 'Axis 3',
data: response.data.map(a => a.v1_mean),
lineTension: 0,
fill: false,
yAxisID: 'yaxis3',
borderColor: '#a06ee4',
},
{
label: 'Axis 4',
data: response.data.map(a => a.v2),
lineTension: 0,
fill: false,
yAxisID: 'yaxis4',
borderColor: '#a43fe4',
}
]
};
let chart = new Chart(myChartRef, {
type: 'line',
data: data,
options: chartPropertyOptions
});