Javascript 如何动态访问chart.js选项?
我有一个chart.js chart对象Javascript 如何动态访问chart.js选项?,javascript,chart.js,Javascript,Chart.js,我有一个chart.js chart对象myBarChart最初是用options对象创建的 options={ scaleOverride : true, scaleSteps : ymax, scaleStepWidth : 1, scaleStartValue : 0, ... } 其中,ymax被计算为“建议最大” 用户通过单击图表的条形图向图表中添加数据;update函数按如下方式访问数据: myBarChart.datasets[0].b
myBarChart
最初是用options对象创建的
options={
scaleOverride : true,
scaleSteps : ymax,
scaleStepWidth : 1,
scaleStartValue : 0,
...
}
其中,ymax
被计算为“建议最大”
用户通过单击图表的条形图向图表中添加数据;update函数按如下方式访问数据:
myBarChart.datasets[0].bars[i].value = newValue[i]
(在所有直方图箱上循环)。这个模式,连同,建议我应该能够访问选项作为
myBarChart.options.scaleSteps = newYmax;
myBarChart.update();
以便在用户添加数据时更改y轴的最大值。然而,这是行不通的。当用户添加足够的数据以超过原始的ymax
时,会记录数据,但y轴从未改变,因此该条在顶部被切断
我尝试过设置显式值而不是newYmax
,我看到了相同的行为,因此问题不在我对newYmax
的计算中。我只是无法更改myBarChart.options.scaleSteps,我也不知道为什么
我使用的是v1.0.1(升级不是一个选项)。表示创建后无法更改选项,并且必须重新绘制图表,但我找不到任何文档支持此操作
创建图表后,我可以访问并更改chart.js选项吗?要更新选项,可以更新单个属性,也可以更新整个对象。然后,必须在图表上强制重画以使新的图表选项生效(请参阅) 例如:
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的初始setter不正确,导致ChartJS使用默认行为覆盖属性。因此,如果它不正确,您将无法更新相同的属性。
//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);