如何动态访问 chart.js 选项？答案

【问题标题】：How do I access chart.js options dynamically?如何动态访问 chart.js 选项？
【发布时间】：2019-05-14 22:46:16
【问题描述】：

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

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

    ...
}

其中ymax 被计算为充当“建议最大值”。

用户通过点击条形图向图表添加数据；更新函数访问数据为

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 选项吗？

【问题讨论】：

标签： javascript chart.js

【解决方案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();

【讨论】：

这就是我正在做的事情，但什么不起作用。我编辑了我的问题以澄清我正在使用update() 函数。图表轴仍未更新。
对，向下滚动文档，它提到了应该如何更新比例。
另外，确保 scaleSteps 是配置对象中的有效属性。可能是您的 scaleSteps 初始设置器不正确，导致 ChartJS 使用默认行为覆盖该属性。因此，如果不正确，您将无法更新相同的属性。

【解决方案2】：

//get object
const chartJS: Chart = $("#myChart").data('chart');

//change something
chartJS.config.options.scales.yAxes[0].ticks.min = minVal <= 0 ? minVal : minVal - 

//update
chartJS.update();

确保在创建后将对象添加为数据

....
var ctx = canvas.getContext("2d");
var myChart = new Chart(ctx, {
                type: 'line',
                data: chartData,
                options
            });

//
var canvasItem = $("#myChart");
canvasItem.data('chart', myChart);

【讨论】：