我有多个yAxes图表，当Y轴标签的数量很少时，它可以正常工作。但是当它们增加时，我可以看到标签开始重叠。我尝试更改label('Ticket-Checked', ok(user(<ID>)))，但运气不高。我的数据是动态的，就像我说的那样，当数据集很小时，它可以很好地工作，但是在这种情况下，标签开始重叠。
fontSizenew Chart(document.getElementById('chart1').getContext('2d'), {
type: 'line',
plugins: [
{
beforeLayout: chart => chart.data.datasets.forEach((ds, i) => {
chart.config.options.scales.yAxes[i].display = !ds._meta[0].hidden;
//chart.config.options.scales.yAxes[i].ticks.fontSize = 8;
//chart.config.options.scales.yAxes[i].scaleLabel.fontSize = 8;
//chart.config.options.scales.yAxes[i].scaleLabel.padding = 12;
})
}],
data: {
datasets: [
//add data here
{
label: 'a',
yAxisID: 'yAxis-a',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '0.40'}, {'x': '2020-07-28T22:14:59Z', 'y': '246.00'} ],
//borderColor: 'red',
fill: false,
},{
label: 'b',
yAxisID: 'yAxis-b',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '0.20'}, {'x': '2020-07-28T22:14:59Z', 'y': '0'}],
//borderColor: 'red',
fill: false,
},{
label: 'c',
yAxisID: 'yAxis-c',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '7.00'}, {'x': '2020-07-28T22:14:59Z', 'y': '12.00'}],
//borderColor: 'red',
fill: false,
},{
label: 'd',
yAxisID: 'yAxis-d',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '0.20'}, {'x': '2020-07-28T22:14:59Z', 'y': '0'}],
//borderColor: 'red',
fill: false,
},{
label: 'e',
yAxisID: 'yAxis-e',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '0.20'}, {'x': '2020-07-28T22:14:59Z', 'y': '0'}],
//borderColor: 'red',
fill: false,
},{
label: 'f',
yAxisID: 'yAxis-f',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '7.00'}, {'x': '2020-07-28T22:14:59Z', 'y': '9.00'}],
//borderColor: 'red',
fill: false,
},{
label: 'h',
yAxisID: 'yAxis-h',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '0.20'}, {'x': '2020-07-28T22:14:59Z', 'y': '0'}],
//borderColor: 'red',
fill: false,
},{
label: 'i',
yAxisID: 'yAxis-i',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '0'}, {'x': '2020-07-28T22:14:59Z', 'y': '0'}],
//borderColor: 'red',
fill: false,
},{
label: 'j',
yAxisID: 'yAxis-j',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '7.00'}, {'x': '2020-07-28T22:14:59Z', 'y': '9.00'}],
//borderColor: 'red',
fill: false,
},{
label: 'k',
yAxisID: 'yAxis-k',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '0'}, {'x': '2020-07-28T22:14:59Z', 'y': '246.00'}],
//borderColor: 'red',
fill: false,
},{
label: 'l',
yAxisID: 'yAxis-l',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '0'}, {'x': '2020-07-28T22:14:59Z', 'y': '0'}],
//borderColor: 'red',
fill: false,
},{
label: 'm',
yAxisID: 'yAxis-m',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '0.04'}, {'x': '2020-07-28T22:14:59Z', 'y': '3.00'}],
//borderColor: 'red',
fill: false,
},{
label: 'n',
yAxisID: 'yAxis-n',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '0'}, {'x': '2020-07-28T22:14:59Z', 'y': '0'}],
//borderColor: 'red',
fill: false,
},{
label: 'o',
yAxisID: 'yAxis-o',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '0'}, {'x': '2020-07-28T22:14:59Z', 'y': '0'}],
//borderColor: 'red',
fill: false,
},{
label: 'p',
yAxisID: 'yAxis-p',
data: [{'x': '2020-07-28T22:12:27Z', 'y': '7.00'}, {'x': '2020-07-28T22:14:59Z', 'y': '9.00'}],
//borderColor: 'red',
fill: false,
},
]
},
options: {
responsive: true,
plugins : {
colorschemes : {
scheme : 'brewer.SetTwo7'
}
},
title: { display: true, text: 'mydataset'},
legend: {position: 'bottom'},
/*
pan: {
enabled: true,
mode: 'x',
speed: 20,
threshold: 10,
},
zoom: {
enabled: true,
mode: 'x', // or 'x' for "drag" version
speed: 0.1,
},
*/
scales: {
xAxes: [{
type: 'time',
//distribution: 'linear',
time: { unit: 'minute',
tooltipFormat:'YYYY-MM-DD HH:mm:ss',
displayFormats: {
millisecond: 'HH:mm:ss.SSS',
second: 'HH:mm:ss',
minute: 'HH:mm',
hour: 'HH'
}
},
ticks: {
//min: new Date('2020-05-27T14:11:55Z'),
major: {
enabled: true,
//fontStyle: 'bold',
callback: function (value, index, values) {
return value + ':00'
}
},
}
}],
yAxes: [
// add data here
{
id: 'yAxis-a',
type: 'linear',
position: 'right',
scaleLabel: {
display: true,
labelString: 'a'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-b',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: 'b'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-c',
type: 'linear',
position: 'right',
scaleLabel: {
display: true,
labelString: 'c'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-d',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: 'd'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-e',
type: 'linear',
position: 'right',
scaleLabel: {
display: true,
labelString: 'e'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-f',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: 'f'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-h',
type: 'linear',
position: 'right',
scaleLabel: {
display: true,
labelString: 'h'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-i',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: 'i'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-j',
type: 'linear',
position: 'right',
scaleLabel: {
display: true,
labelString: 'j'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-k',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: 'k'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-l',
type: 'linear',
position: 'right',
scaleLabel: {
display: true,
labelString: 'l'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-m',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: 'm'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-n',
type: 'linear',
position: 'right',
scaleLabel: {
display: true,
labelString: 'n'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-o',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: 'o'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
{
id: 'yAxis-p',
type: 'linear',
position: 'right',
scaleLabel: {
display: true,
labelString: 'p'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
}
},
]
}
}
});