Saya mencoba membuat 2 bagan garis berbeda yang menampilkan 2 kumpulan data berbeda. Dengan ini, saya ingin menampilkan 2 warna berbeda untuk setiap grafik.

<div style="display: block" *ngIf='signalRService.data'>
    <canvas baseChart id="data1"
            [datasets]="signalRService.data1"
            [labels]="chartLabels"
            [options]="chartOptions"
            [legend]="chartLegend"
            [chartType]="chartType"
            [colors]="colors"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
  <div style="display: block" *ngIf='signalRService.data'>
    <canvas baseChart id="data2"
            [datasets]="signalRService.data2"
            [labels]="chartLabels"
            [options]="chartOptions"
            [legend]="chartLegend"
            [chartType]="chartType"
            [colors]="colors"
            (chartClick)="chartClicked($event)"></canvas>
  </div>

Saat ini, saya memiliki signalRSService.dataX yang berisi data spesifik dari signalRSService.data yang lebih besar. Ketika saya memisahkan data menjadi 2 variabel untuk menetapkannya ke bagan yang berbeda, pengaturan warna dan warna berhenti bekerja dan kembali ke default (Abu-abu terang dengan isian). Saya juga memiliki keduanya pada komponen yang sama.

Perbaikan yang telah saya coba: Saya telah mencoba menggunakan properti [data] alih-alih [datasets] yang tidak berfungsi, karena saya tidak dapat membaca signalRSService.data[0] karena tidak terdefinisi.

Saya mencoba membuat 2 array terpisah untuk warna, yang juga tidak berhasil.

Saya telah memeriksanya, tetapi belum benar-benar mengetahui bagaimana saya dapat menggunakan [datasets]="signalRService.data" dan kemudian menyembunyikan kumpulan data yang berbeda untuk setiap bagan.

Solusi terbaik adalah jika saya dapat menyesuaikan warna dan mempertahankan sisa kode atau dapat menyembunyikan kumpulan data pada setiap grafik (saya akan memiliki 3, jadi saya ingin menyembunyikan 2 dari 3 kumpulan data). Namun, saya terbuka untuk ide apa pun, bahkan apa yang mungkin saya "coba" tetapi lakukan dengan tidak benar.

Di bawah ini adalah file app.component.ts saya jika diperlukan.

import { Component, OnInit } from '@angular/core';
import { SignalRService } from './services/signal-r.service';
import { HttpClient } from '@angular/common/http';
import { ChartOptions } from 'chart.js';
import { Label } from 'ng2-charts';
import * as pluginCrosshair from 'chartjs-plugin-crosshair';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  public chartOptions: (ChartOptions) = {
    responsive: true,
    spanGaps: false,
    animation: {
      duration: 0
    },
    scales: {
      // We use this empty structure as a placeholder for dynamic theming.
      xAxes: [{}],
      yAxes: [
        {
          id: 'y-axis-0',
          position: 'left',
          ticks: {
            max : 30,
            min: -30
          }
        },
      ]
    },
    
    plugins: {
      tooltips: {
        mode: "interpolate",
        intersect: false,
      },
      crosshair: {
        line: {
          color: '#F66',  // crosshair line color
          width: 2,        // crosshair line width
          value: '0'
        },
        sync: {
          enabled: false,            // enable trace line syncing with other charts
          //group: 1,                 // chart group
          suppressTooltips: false   // suppress tooltips when showing a synced tracer
        },
      },
      zoom: {
        enabled: false,
      },
    }
  };
  public chartType: string = 'line';
  public chartLegend: boolean = true;
  public chartLabels: Label[] = ['0', '1', '2', '3', '4', '5','6','7','8','9','10','11','12','13','14','15','16','17',
  '18','19','20','21','22','23','24','25','26','27','28','29','30','31','32','33','34','35','36','37','38','39','40',
  '41','42','43','44','45','46','47','48','49','50','51','52','53','54','55','56','57','58','59'];
  public chartPlugins = [pluginCrosshair];
  public colors: any[] = [{ // grey
    backgroundColor: 'rgba(148,159,177,0.2)',
    borderColor: 'rgba(148,159,177,1)',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)',
    fill: false
  }, 
  {
    backgroundColor: 'rgba(0,100,0,0.2)',
    borderColor: 'rgba(0,0,100,1)',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)',
    fill: false
  }];

  constructor(public signalRService: SignalRService, private http: HttpClient) { }

  ngOnInit() {
    this.signalRService.startConnection();
    this.signalRService.addTransferChartDataListener();
    this.signalRService.addBroadcastChartDataListener();
    this.startHttpRequest();
  }

  private startHttpRequest = () => {
    this.http.get('https://localhost:5001/api/chart')
      .subscribe(res => {
        console.log(res);
      })
  }

  public chartClicked = (event) => {
    console.log(event);
    this.signalRService.broadcastChartData();
  }
}
0
raghav m 19 November 2020, 22:19

1 menjawab

Jawaban Terbaik

Saya benar-benar menemukan ini. Jika saya mengganti referensi di html ke array warna hanya dengan informasi itu sendiri seperti ini

[colors]=" 
            [{
              backgroundColor: 'rgba(0,100,0,0.2)',
              borderColor: 'rgba(0,0,100,1)',
              pointBackgroundColor: 'rgba(148,159,177,1)',
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: '#fff',
              pointHoverBorderColor: 'rgba(148,159,177,0.8)',
              fill: false
            }]"

Dan saya juga mengubah variabel data1 dan data2 menjadi irisan (menggunakan Arrays.slice) dari dataset super asli, itu berfungsi.

0
raghav m 19 November 2020, 21:56