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-statement，用于检查数组是否包含超过200个元素。我试图实现的是拥有正确的比例，而不首先循环200次以输入数据＆＃34;假＆＃34;元件。

有没有人知道正确的方法？

谢谢。

Answer 1

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

我不确定我是否完全理解您的问题，但是我在检查角度图表站点上示例代码（{{ 3}}）中将选项中的动画持续时间设置为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://jtblin.github.io/angular-chart.js/examples/app.js

Angular chart.js图表比例

1 个答案:

Angular chart.js图表​​比例

1 个答案:

Angular chart.js图表比例