Угловой масштаб диаграммы chart.js - PullRequest
Новая
       26

Угловой масштаб диаграммы chart.js

0 голосов
/ 04 июня 2018

Я использую 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-кратной цикличности, чтобы вставить в данные «поддельные» элементы.

Кто-нибудь знает правильный путь?

Спасибо.

1 Ответ

0 голосов
/ 16 июля 2018

edit: В свете редактирования вопроса этот ответ не актуален.

Я не уверен, полностью ли я понял ваш вопрос, но у меня возникла проблема с анимацией масштабирования в угловых диаграммах иРешение, которое я нашел при проверке кода за примерами на сайте angular-chart (http://jtblin.github.io/angular-chart.js/examples/app.js) состояло в том, чтобы установить в анимации длительность анимации равной 0. В Angular, используя angular-char, это можно сделать в контроллере с помощьюдиректива chart-options, как видно из внешнего связанного кода:

Controller 

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

View 

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

Или глобально с помощью ChartJsProvider в методе config приложения:

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

Надеюсь, это поможет, всю информацию, которую я разместил, можно найти в документации к chart.js: http://www.chartjs.org/docs/latest/configuration/animations.html

...