ChartJS 多折线图数据显示不正确,但显示正确的数字

nzkunb0c  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(281)

首先开始,这很可能是一个常见的问题,但我太睡眠不足,现在能够弄清楚它(我没有尝试,虽然哈哈)
无论如何,我的问题是与多轴折线图
我有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
    );

graph

yacmzcpb

yacmzcpb1#

这是因为您将每个数据集Map到其自己的y轴。这意味着y轴将从该数据集的最小值到最大值,因此看起来是错误的。
如果你想让你的数据被正确地缩放,你只需要删除每个数据集中的yAxisID选项。删除这个选项后,它们都恢复到默认的y,这样你就只有一个缩放。
这将显示正确缩放的数据

相关问题