angular - 第二个y轴不能分配给ng2图表中的折线图

Question

我在 ng2-charts 中创建了一个带有折线图的条形图，但存在以下问题：

我插入了两个 y 轴，但第二个轴（右）无法正确映射到折线图。你知道它是如何工作的吗？我将代码作为图片插入。

Answer 1

// Daten
  public StaffData: any[] = [{
    label: 'IN',
    type: 'bar',
    yAxesID: "y-axis-1",
    data: [3, 11, 10, 6, 9, 28, 45, 40, 26, 3, 10, 6],	    
    },
    {
      label: 'OUT',
      type: 'bar',
      yAxesID: "y-axis-1",
       data: [2, 0, 3, 7, 11, 13, 8, 44, 35, 3, 46, 1],
    },
    {
      label: 'Total',
      type: 'line',
      yAxesID: "y-axis-2",
      data: [0, 30, 62, 100, 100, 100, 114, 77, 57, 54, 10, 10]
    }];
  


  // x-Achse (Monate)
  public StaffLabels: string[] = ['Jan', 'Feb', 'Mrz', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'];

  // Gestaltung des Diagramms
  public StaffColours: Array<any> = [
    {
      backgroundColor: 'rgba(0, 204, 0, 0.2)',
      borderColor: 'rgba(0, 204, 0,1)',
      borderWidth: 1
    },
    {
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1
    },
    {
      backgroundColor: "rgba(255,255,255,0.5)",
      borderColor: 'rgba(255, 93, 0, 0.6)',
      borderWidth: 2
    }
  ];

  // Anzeige der Legende
  public StaffLegend = true;

  // Anzeige des Diagramms
  public barChartType = 'bar';
  
  // Optionen
  public StaffOptions: any = {
    scales: {
      yAxes: [{
        id: "y-axis-1",
        position: 'left',
        type: 'linear',
        ticks: {
          beginAtZero:true
        },
        scaleLabel: {
          display: true,
          labelString: 'Throughput'    
        }
      },
      {
        id: "y-axis-2",
        position: 'right',
        type: 'linear',
        ticks: {
          beginAtZero:true,
          labelString: 'Attendace'
        }
      }]
    }
  };

<div class="col-lg-6">
            <div class="card">
                <div class="card-header text-white bg-primary">
                    <h5 class="header-center text-white">Monatliche Personalentwicklung</h5>
                </div>
                <div class="card-body">
                    <div class="chart-wrapper">
                        <canvas baseChart class="chart"
                        [datasets]="StaffData"
                        [labels]="StaffLabels"
                        [options]="StaffOptions"
                        [colors]="StaffColours"
                        [legend]="StaffLegend"
                        [chartType]="barChartType"
                        (chartHover)="chartHovered($event)"
                        (chartClick)="chartClicked($event)"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>