0

我正在使用 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.

4

1 回答 1

0

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

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

更新

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

于 2021-05-11T03:37:18.240 回答