为角图4中的高图表系列动态创建名称

Question

我正在使用角度4绘制样条曲线高图表组件并尝试编辑图例的标签。我基本上需要做以下事情。如果有三个系列，则该系列的名称应如下所示。基本策略，策略1和策略3.下面的方法正确构建系列并将图例标记为文本。我如何实现改变它们？

seriesName : string = 'Test';

     private addSeries() {

        this.results.forEach(element => {
          if (element.data != null)
            this.chartSeries.push({ data: element.data, name: this.seriesName});

      }

样条图表组件

import { Component, Input, OnChanges } from '@angular/core';


@Component({
    selector: 'splinechart',
    template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
    styles: [`
    chart {
        display: block;
        width: 100% !important;
         padding:0;
      }        
    `]
})

export class SplineChartComponent implements OnChanges {
    public options: any;
    chart: any;

    @Input() public series: any;
    @Input() public yaxisdata: any;

    @Input() public selectedRating: string = '';

    constructor() {
        this.options = {
            credits: {
                enabled: false
            },
            chart: {
                type: 'spline'
            },
            legend: {
                align: 'right',
                verticalAlign: 'bottom',
                layout: 'horizontal',
                margin: 0,
                itemMarginTop: 0


            },
            title: { useHTML: true, text: null, align: "left", margin: 50 },
            xAxis: {
                allowDecimals: false,
                title: { margin: 30 ,itemMarginTop:30}

            },
            yAxis: {

                title: {
                    text: '',
                    margin: 50
                },
                categories: [


                ],
                allowDecimals: false,

            },
            tooltip: {

            },
            plotOptions: {

                series: {
            allowPointSelect: true


                  },
                spline: {
                    lineWidth: 2,
                    states: {
                        hover: {
                            lineWidth: 3
                        }
                    },
                    marker: {
                        enabled: true,
                         symbol: 'circle'

                    },
                }
            },
            series: []
        };
    }


    getInstance(chartInstance): void {
        this.chart = chartInstance;
        this.redraw();
    }


    ngOnChanges(data: any) {
        if (!data.series.currentValue || !this.chart) return;
        data.series.currentValue.map(s => {
            this.chart.addSeries(s);
        });
        this.chart.reflow();
    }

    redraw() {
        if (!this.chart) return;
           this.chart.yAxis[0].categories = this.yaxisdata;


        this.series.map(s => {
            if(s!=null)
            this.chart.addSeries(s);
            console.log(this.yaxisdata);

          // this.chart.yAxis[0].setExtremes(1000000,null);

        });    
    }

}