Angular chart.js 图表比例

Question

我在 Angular 中使用 chart.js 在图表中实现一些结果。我正在寻找的是有一定数量的数字，每 50 毫秒发生一次动态变化。我已经这样做了，这是 plunker：

https://plnkr.co/edit/GEu6seOu1fbh9dnuSjMV?p=preview

包.json：

"dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "chart.js": "^2.7.2",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.5",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "@types/chart.js": "2.7.19",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

组件.ts：

import { Component, OnDestroy, ElementRef, OnInit, AfterViewInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Chart, ChartPoint } from 'chart.js';

import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/takeWhile';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
    public isAlive = true;
    public chart: Chart;
    public data = [];

    canvas: any;
    ctx: any;

    public ngOnInit(): void {

        Observable.interval(50)
            .takeWhile(() => this.isAlive)
            .subscribe(
                succ => {
                    if (!this.chart) {
                        return;
                    }

                    if (this.data.length > 200) {
                        this.data.splice(0, 1);
                        this.chart.data.labels.splice(0, 1);
                    }

                    this.data.push(new Date().getSeconds());
                    this.chart.data.labels.push(new Date().getSeconds().toString() + '-');
                    this.chart.update();
                }
            );
    }

    public ngAfterViewInit(): void {
        if (!this.chart) {
            this.canvas = document.getElementById('myChart');
            this.ctx = this.canvas.getContext('2d');
            this.chart = new Chart(this.ctx, {
                type: 'line',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '# of Votes',
                        data: this.data,
                        fill: false,
                        showLine: true,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)'
                        ],
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: false,
                    title: {
                        display: true,
                        text: 'Chart.js - Fixed X and Y Axis',
                    },
                    tooltips: {
                        enabled: false
                    },
                    elements: {
                        point: {
                            radius: 0
                        }
                    },
                    scales: {

                        xAxes: [{
                            display: false,
                            ticks: {

                            }
                        }],
                        yAxes: [{
                            ticks: {
                                min: 0,
                                max: 60
                            }
                        }]
                    }
                }
            });

            for (let i = 0; i < 200; i++) {
                this.data.push(new Date().getSeconds());
                this.chart.data.labels.push(new Date().getSeconds().toString() + '-');
            }
            this.chart.update();
        }
    }
}

组件.html：

<canvas id="myChart" width="800" height="400"></canvas>

模块.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

问题是我必须预渲染（在这种情况下）200 个元素，因为这样，图表将设置正确的比例。如果我不把这段代码放在前面：

for (let i = 0; i < 200; i++) {
                    this.data.push(new Date().getSeconds());
                    this.chart.data.labels.push(new Date().getSeconds().toString() + '-');
                }
                this.chart.update();

您将看到图表调整比例，直到触发检查数组是否包含超过 200 个元素的 if 语句。我试图实现的是在不先循环 200 次以放入数据“假”元素的情况下获得正确的比例。

有人知道正确的方法吗？

谢谢。

Answer 1

编辑：根据问题编辑，此答案不相关。

我不确定我是否完全理解您的问题，但是我在角度图表中的缩放动画以及我在查看角度图表网站上示例背后的代码时找到的解决方案时遇到了问题 (@987654321 @) 是在选项中将动画持续时间设置为 0。在 Angular 中，使用 angular-charts 这可以在控制器中使用 chart-options 指令完成，如外部链接代码中所示：

控制器

app.controller("ctrl",['$scope', function($scope){
  $scope.options = {animation: {duration: 0}};
}])

查看

<canvas id="line" class="chart chart-line"
  chart-options="options"
></canvas>

或者在app的config方法中全局使用ChartJsProvider：

app.config(function(ChartJsProvider) {
    ChartJsProvider.setOptions({
      animation: {duration: 0}
    });
})

我希望这会有所帮助，我发布的所有信息都可以在 chart.js 文档中找到：http://www.chartjs.org/docs/latest/configuration/animations.html