Angular chart.js图表​​比例

Question

我正在使用chart.js来实现图表中的一些结果。 我要寻找的是具有一定数量的数字，该数字每50毫秒发生一次变化。 我已经做到了，这是小矮人：

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

Package.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"
  }

Component.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();
        }
    }
}

Component.html：

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

Module.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();

您将看到调整比例尺的图表以及if语句，该语句检查是否触发了包含200个以上元素的数组。 我试图达到的目的是拥有正确的缩放比例，而无需首先循环200次以放入数据“ fake”元素。

有人知道正确的方法吗？

谢谢。

Answer 1

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

我不确定我是否完全理解您的问题，但是我在查看角度图表网站上示例示例的代码时发现角度图表中的缩放动画以及我找到的解决方案时存在问题（ http：// jtblin （.github.io / angular-chart.js / examples / app.js ）将选项中的动画持续时间设置为0。 在Angular中，使用angular-chart可以在控制器中使用chart-options指令来完成，如外部链接代码所示：

控制者

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

视图

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

或在应用程序的config方法中全局使用ChartJsProvider：

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

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