Question

我有一个最初使用options对象创建的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();

Answer 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);

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

2 个答案: