javascript - 图表选项不与图表 js 一起使用

标签 javascript typescript chart.js aurelia

我有一个使用图表 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/

相关文章:

javascript - 如何使用 jquery resize run 函数一次?

Javascript 禁用按钮,直到填写所有字段

javascript - 级联下拉列表显示字典/数组

javascript - 如何检查具有类的元素是否是该类的第一个子元素

javascript - 让 Angular 解析器等待图像

Typescript Postmessage 失败,只有一个参数,还有两个

typescript - 类型 'recaptchaLoaded' .ts(2339) 上不存在属性 'IReCaptchaComposition | undefined'

javascript - 如何更改一条特定线的网格线宽

javascript - Chart JS 自定义标签不起作用

javascript - Chart.js Canvas 和图表宽度在重绘时被覆盖