多折线图数据显示不正确，但数字显示正确

Question

首先，这很可能是一个常见的问题，但我现在太缺觉了，无法解决这个问题(我确实试过了，哈哈)

无论如何，我遇到的问题是多轴折线图

我有7个不同的行，数据范围从1位数到5位数(例如;第一行的范围是10000-30000，第二行的范围是0- 9)

现在我的问题是行比例不正确，第2行看起来比第1行大，尽管差异很大(检查图像，绿线是值为34的那条线，但它看起来比其他所有行都大

我错过了什么来修复这个?

const data = {
labels: lbs,
datasets: [
{
label: 'Regular',
data: <?php echo $regularjs;?>,
fill: true,
backgroundColor: 'rgba(194, 143, 68, 0.1)',
borderColor: 'rgb(194, 143, 68)',
yAxisID: 'y',
tension: 0.4,
},
{
label: 'Feed',
data: <?php echo $feedjs;?>,
fill: true,
backgroundColor: 'rgba(68, 194, 160, 0.1)',
borderColor: 'rgb(68, 194, 160)',
yAxisID: 'y1',
tension: 0.4,
},
{
label: 'Recents',
data: <?php echo $recentsjs;?>,
fill: true,
backgroundColor: 'rgba(156, 68, 194, 0.1)',
borderColor: 'rgb(156, 68, 194)',
yAxisID: 'y2',
tension: 0.4,
},
{
label: 'Search',
data: <?php echo $searchjs;?>,
fill: true,
backgroundColor: 'rgba(194, 68, 68, 0.1)',
borderColor: 'rgb(194, 68, 68)',
yAxisID: 'y3',
tension: 0.4,
},
{
label: 'Popular',
data: <?php echo $popularjs;?>,
fill: true,
backgroundColor: 'rgba(179, 194, 68, 0.1)',
borderColor: 'rgb(179, 194, 68)',
yAxisID: 'y4',
tension: 0.4,
},
{
label: 'Profile',
data: <?php echo $profilejs;?>,
fill: true,
backgroundColor: 'rgba(68, 81, 194, 0.1)',
borderColor: 'rgb(68, 81, 194)',
yAxisID: 'y5',
tension: 0.4,
},
{
label: 'Recommended',
data: <?php echo $recommendedjs;?>,
fill: true,
backgroundColor: 'rgba(194, 68, 123, 0.1)',
borderColor: 'rgb(194, 68, 123)',
yAxisID: 'y6',
tension: 0.4,
}
]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
interaction: {
mode: 'index',
intersect: false,
},
stacked: false,
plugins: {
title: {
display: true,
text: 'Daily Pack Visits'
},
legend:{display: true}
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
beginAtZero: true,
},
y1: {
type: 'linear',
display: true,
position: 'right',
beginAtZero: true,
grid: {drawOnChartArea: false,},
ticks: {
display: false
}
},
y2: {
type: 'linear',
display: true,
position: 'right',
beginAtZero: true,
grid: {drawOnChartArea: false,},
ticks: {
display: false
}
},
y3: {
type: 'linear',
display: true,
position: 'right',
beginAtZero: true,
grid: {drawOnChartArea: false,},
ticks: {
display: false
}
},
y4: {
type: 'linear',
display: true,
position: 'right',
beginAtZero: true,
grid: {drawOnChartArea: false,},
ticks: {
display: false
}
},
y5: {
type: 'linear',
display: true,
position: 'right',
beginAtZero: true,
grid: {drawOnChartArea: false,},
ticks: {
display: false
}
},
y6: {
type: 'linear',
display: true,
position: 'right',
beginAtZero: true,
grid: {drawOnChartArea: false,},
ticks: {
display: false
}
}
}
},
};
const dailypacks = new Chart(
document.getElementById('daily-visits'),
config
);

图

Answer 1

这是因为您将每个数据集映射到自己的y轴。这意味着该数据集的y轴将从最小到最大，因此看起来是错误的。

如果你想让你的数据被正确的调用，你只需要删除每个数据集中的yAxisID选项。去掉这个后，它们都回到了默认值y，所以你只有一个刻度。

这将显示正确缩放的数据