首先开始,这很可能是一个常见的问题,但我太睡眠不足,现在能够弄清楚它(我没有尝试,虽然哈哈)
无论如何,我的问题是与多轴折线图
我有7个不同的行,数据范围从1位数字到5位数字(例如,第1行范围为10000-30000,第2行范围为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
);
1条答案
按热度按时间yacmzcpb1#
这是因为您将每个数据集Map到其自己的y轴。这意味着y轴将从该数据集的最小值到最大值,因此看起来是错误的。
如果你想让你的数据被正确地缩放,你只需要删除每个数据集中的
yAxisID
选项。删除这个选项后,它们都恢复到默认的y
,这样你就只有一个缩放。这将显示正确缩放的数据