更改数据集时不显示 Chartjs 自定义颜色

Question

我正在尝试创建 2 个不同的折线图来显示 2 个不同的数据集。有了这个，我想为每个图表显示 2 种不同的颜色。

<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>

目前，我有 signalRService.dataX，其中包含来自较大 signalRService.data 的特定数据。当我将数据分成 2 个变量以将它们分配给不同的图表时，颜色和颜色设置停止工作并恢复为默认值（带填充的浅灰色）。我也把它们放在同一个组件上。

我尝试过的修复：我尝试使用 [data] 属性而不是 [datasets] ，但它没有用，因为我无法读取 signalRService.data[0] 因为它未定义。

我尝试为颜色创建 2 个单独的数组，但也没有用。

我已经调查过了，但还没有真正弄清楚如何使用 [datasets]="signalRService.data" 然后为每个图表隐藏不同的数据集。

最好的解决方案是，如果我能够调整颜色并维护其余代码，或者能够在每个图表上隐藏一个数据集（我将有 3 个，所以我想隐藏 2 个3 个数据集）。但是，我对任何想法都持开放态度，即使是我可能“尝试”但做得不正确的想法。

下面是我的 app.component.ts 文件，以备不时之需。

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

Answer 1

我真的想通了。如果我将 html 中对颜色数组的引用替换为像这样的信息本身

[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
            }]"

并且我还将 data1 和 data2 变量更改为原始超级数据集的切片（使用 Arrays.slice），它有效。

更改数据集时不显示 Chartjs 自定义颜色

Chartjs custom colors not displaying when dataset is changed

javascript

signalr

typescript

chart.js

angular