javascript - 如何动态访问 Chart.js 选项？

Question

我有一个最初使用选项对象创建的 Chart.js 图表对象 myBarChart

options={
    scaleOverride : true,
    scaleSteps : ymax,
    scaleStepWidth : 1,
    scaleStartValue : 0, 

    ...
}

其中 ymax 被计算为“suggestedMax”。

用户通过单击图表的条形图将数据添加到图表中；更新函数访问数据为

myBarChart.datasets[0].bars[i].value = newValue[i]

(循环所有直方图箱)。此模式以及 documentation ，表明我应该能够访问这些选项

myBarChart.options.scaleSteps = newYmax;
myBarChart.update();

以便在用户添加数据时更改 y 轴的最大值。然而，这是行不通的。当用户添加足够的数据超过原始 ymax 时，数据会被记录，但 y 轴永远不会改变，因此条形在顶部被切断。

我尝试设置一个显式值而不是 newYmax，并且看到了相同的行为，因此问题不在于我对 newYmax 的计算。我只是无法更改 myBarChart.options.scaleSteps，而且我不明白为什么。

我正在使用 v1.0.1(无法升级)。 This answer表示选项在创建后无法更改，并且必须重新绘制图表，但我找不到任何文档来支持这一点。

创建图表后我可以访问和更改 Chart.js 选项吗？

Answer 1

要更新选项，您可以更新单个属性或更新整个对象。然后，您必须在图表上强制重绘，以使新图表选项生效(请参阅 chartjs docs)。

例如:

const ctx = document.getElementById("myChart").getContext('2d');
const chart = new ChartJS(ctx, { title: { text: 'old title' } });
chart.options.title.text = 'new title';
chart.update();