我在角度中使用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次以输入数据“假”元素 .
有谁知道正确的方法?
谢谢 .
1 回答
编辑:根据问题编辑,这个答案是不相关的 .
我不确定如果我完全理解你的问题,但我在角度图表中的缩放动画有问题,我在检查角度图表网站(http://jtblin.github.io/angular-chart.js/examples/app.js)上的示例背后的代码时找到的解决方案是设置选项中的动画持续时间为0 . 在Angular中,使用角度图表可以使用图表选项指令在控制器中完成,如外部链接代码中所示:
调节器
视图
或者在app的config方法中全局使用ChartJsProvider:
我希望这有帮助,我发布的所有信息都可以在chart.js文档中找到:http://www.chartjs.org/docs/latest/configuration/animations.html