2

我正在使用 ngx-charts 折线图来显示每周的访问者。我使用模拟数据在图表中创建点。我想要实现的是，当用户单击某个点时，他/她可以输入诸如“平安夜”之类的内容，然后在该点显示注释。我真的不知道如何在 ngx-charts 中做到这一点。

当前代码：

import { Component, OnInit } from '@angular/core';
import {NgxChartsModule} from '@swimlane/ngx-charts';

@Component({
  selector: 'app-ngx-charts',
  templateUrl: './ngx-charts.component.html',
  styleUrls: ['./ngx-charts.component.css'],
  template: `
    <mat-card>
      <ngx-charts-line-chart
      [options]="options" (load)="saveInstance($event.context)">
      [view]="view"
      [scheme]="colorScheme"
      [results]="multi"
      [gradient]="gradient"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [legend]="showLegend"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel"
      [autoScale]="autoScale"
      (select)="onSelect($event)">
      </ngx-charts-line-chart>
    </mat-card>
   `
})
export class NgxChartsComponent implements OnInit {
  single: any[] = [ {
    "name": "Germany",
    "value": 8940000
  }];

  multi: any[] = [
    {
      "name": "Germany",
      "series": [
        {
          "value": 4029,
          "name": "2016-09-21T14:30:06.482Z"
        },
        {
          "value": 4550,
          "name": "2016-09-20T17:52:47.417Z"
        },
        {
          "value": 3449,
          "name": "2016-09-23T19:03:19.247Z"
        },
        {
          "value": 4641,
          "name": "2016-09-19T19:21:40.329Z"
        },
        {
          "value": 5141,
          "name": "2016-09-16T09:58:23.402Z"
        }
      ]
    }
  ];

  view: any[] = [700, 400];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Country';
  showYAxisLabel = true;
  yAxisLabel = 'Population';

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  // line, area
  autoScale = true;

  onSelect(event) {
    console.log(event + "Banaan!");

  }

  ngOnInit() {
  }

}
4

0 回答 0