我有一个使用图表 js 的 Aurelia 项目。我可以很好地显示图表,但似乎未使用图表选项。
我有一个 typescript Controller ,可以执行以下操作:
SimpleLineData: LinearChartData;
optionschart: ChartSettings;
activate() {
this.optionschart = this.chartoptions;
this.xx();
setInterval(this.yy.bind(this), 1000);
}
public xx() {
this.SimpleLineData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset 1",
fillColor: '#9b0391',
strokeColor: '#9b0391',
pointColor: '#9b0391',
pointStrokeColor: '#9b0391',
pointHighlightFill: '#9b0391',
pointHighlightStroke: '#9b0391',
borderColor: "#9b0391",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset 2",
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,1)',
borderColor: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
}
}
public yy() {
this.SimpleLineData.datasets[0].data[0] = this.x;
this.x++;
}
public chartoptions = {
animation: false
};
在我的 html 中我这样做:
<chart type="line" style="width: 50%; height: 50%; display: block;" should-update="true" throttle="1000" naive-options="optionschart" data.bind="SimpleLineData"></chart>
当调用yy()
时,数据会更新,但图表会再次呈现动画。即使我设置了 animation: false
选项。
有人有建议吗?
最佳答案
您的 html 中有一个拼写错误。 naive-options
应更改为 native-options
。它可能仍然不起作用,因为根据 documentation ,它应该是native-options.bind
关于javascript - 图表选项不与图表 js 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46121590/