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

问题描述

我正在使用 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)',label: 'Online',normalized: true
                            },{
                                data: allOffline,borderColor: '#ff0000',label: 'Offline',{
                                data: allIdle,borderColor: '#faa61a',label: 'Idle',{
                                data: allDnd,borderColor: '#f04747',label: 'DND',normalized: true
                            }
                        ]
                    },options: {
                        scales: {
                            y: {
                                suggestedMax: Math.max(...[...allOffline,...allOnline,...allDnd,...allIdle]),suggestedMin: Math.min(...[...allOffline,stacked: true,ticks: {
                                    beginAtZero: false,precision: 0,},gridLines: {
                                    zeroLineColor: "rgba(255,255,0.8)",color: "rgba(255,0.4)"
                                },id: 0,position: 'left'
                            },legend: {
                            //display: false,labels: {
                                fontColor: 'white',fontSize: 20
                            }
                        },tooltips: {
                            enabled: false
                        }
                    }
                })

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

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

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

当前输出：https://imgur.com/a/prGiyxy

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

解决方法

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

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

更新

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