javascript - 如何使用 Chart.js 仅更改图表中的特定选项？

Question

我有一个数字类型的输入，它为我提供了X轴上的最大刻度 .

我订阅了该输入的 valueChange，这是我发现更新勾选选项的 max value 的唯一方法是:

updatedMaxTickX(chart: any, newMax: number): void {
        chart.options = {
            scales: {
                xAxes: [
                    {
                        ticks: {
                            max: newMax
                        }
                    }
                ]
            }
        };
    }

然后:

this.detailsForm.get("max").valueChanges.subscribe(v => {
this.updatedMaxTickX(this.canvas, v);
this.canvas.update()
});

这有效，当输入更改时，最大刻度数会更新，但也会发生的是所有其他选项都会重置!

所以基本上我认为这会覆盖我的选项并将其他所有内容设置为默认值。

如何只更改ticks.max，同时保持 Controller 中定义的其他所有内容？

我试过了

this.detailsForm.get("max").valueChanges.subscribe(v => {
this.canvas.options.scales.xAxes.ticks.max = v;
this.canvas.update()
});

但这不起作用并给我带来错误。

Answer 1

xAxes 是一个数组，这应该可以工作:

myChart.options.scales.xAxes[0].ticks.max = v;