Chart.js 一个 y 轴上的多个数据集

Question

我正在使用 chartjs v3（最新），我正在尝试使用共享一个 y 轴的多个数据集来渲染一个图表。

目前我有以下代码：

const buff = await defaultChartRenderer({
                    type: 'line',
                    data: {
                        labels: data.value.filter(v => v.type === 'online').map(v => moment(new Date(v._time)).format(data.format)),
                        datasets: [
                            {
                                data: allOnline,
                                borderColor: '#43b581',
                                backgroundColor: 'rgba(0,0,0,0)',
                                label: 'Online',
                                normalized: true
                            },
                            {
                                data: allOffline,
                                borderColor: '#ff0000',
                                backgroundColor: 'rgba(0,0,0,0)',
                                label: 'Offline',
                                normalized: true
                            },
                            {
                                data: allIdle,
                                borderColor: '#faa61a',
                                backgroundColor: 'rgba(0,0,0,0)',
                                label: 'Idle',
                                normalized: true
                            },
                            {
                                data: allDnd,
                                borderColor: '#f04747',
                                backgroundColor: 'rgba(0,0,0,0)',
                                label: 'DND',
                                normalized: true
                            }
                        ]
                    },

                    options: {
                        scales: {
                            y: {
                                suggestedMax: Math.max(...[...allOffline, ...allOnline, ...allDnd, ...allIdle]),
                                suggestedMin: Math.min(...[...allOffline, ...allOnline, ...allDnd, ...allIdle]),
                                stacked: true,

                                ticks: {
                                    beginAtZero: false,
                                    precision: 0,
                                },
                                gridLines: {
                                    zeroLineColor: "rgba(255, 255, 255, 0.8)",
                                    color: "rgba(255, 255, 255, 0.4)"
                                },
                                stacked: true,
                                id: 0,
                                position: 'left'
                            },
                        },
                        legend: {
                            //display: false,
                            labels: {
                                fontColor: 'white',
                                fontSize: 20
                            }
                        },
                        tooltips: {
                            enabled: false
                        }
                    }
                })

defaultChartRenderer 函数根本不会修改我的输入。 以下数据以allOnline、allOffline、allIdle 和allDnd 的形式传入：

[
  2, 2, 3, 3,
  3, 2, 2
] [
  4, 4, 4, 3,
  4, 4, 3
] [
  1, 1, 1, 1,
  0, 0, 1
] [
  1.5, 1, 2, 2,
    2, 2, 2
]

我希望这会输出包含该数据的图表，但只有 allOnline 数据正确显示。其他所有内容都会向上移动。

电流输出：https://imgur.com/a/prGiyxy

我做错了吗？我尝试将yAxisID 添加到所有数据集并在所有数据集之间共享一个ID，但这没有用。我也试过没有normalize: true。

Answer 1

要使其按预期工作，请删除选项scales.y.stacked 或将其设置为false。

有关详细信息，请参阅 Chart.js 文档中的 Stacking 章节。

更新

stacked: true 在您的 y 轴上定义了两次。删除它们，它应该可以工作。