Question

我正在以角度4构建样条曲线高图。我已经构建了该系列，并且可以在将数据添加到系列中时查看数据，但由于某种原因，该系列似乎并未分配给图表。如果我对样条图表组件中的系列数组中的值进行硬编码，则会绘制线条。我的系列作业有问题。不知道它是什么？

样条图表组件

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 selectedRating: string = '';

    constructor() {
        this.options = {
            credits: {
                enabled: false
            },
            chart: {
                type: 'spline'
            },
            legend: {
                align: 'center',
                verticalAlign: 'top',
                layout: 'horizontal',
                margin: 5,
                itemMarginTop: 50

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

            },


            yAxis: {
                min: 0,
                title: {
                    text: '',
                    margin: 30
                },
                categories: [

                ],
                allowDecimals: false,

            },
            tooltip: {

            },
            plotOptions: {
                spline: {
                    lineWidth: 10,
                    states: {
                        hover: {
                            lineWidth: 5
                        }
                    },
                    marker: {
                        enabled: false
                    },
                }
            },
            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.series.map(s => {
            if(s!=null)
            this.chart.addSeries(s);
        });    
    }

}

压力测试组件（为图表构建系列）

import { Component, OnInit, Input } from '@angular/core';
import { StressTestAnalysis } from '../../../../api/dtos';

@Component({
  selector: 'app-stress-test-analysis',
  templateUrl: './stress-test-analysis.component.html',
})
export class StressTestAnalysisComponent implements OnInit {
  isExpanded = false;
  showTable = true;
  @Input() results: Array<StressTestAnalysis> = [];

  chartSeries : any[] = [];
  yAxis: any[]=[];
  minYAxis : number;
  maxYAxis : number;


  constructor() { }

  ngOnInit() {

     this.results.map(r => {
        this.chartSeries.push(r.data);
        this.yAxis.push(r.yaxis);

     });

  }


}

压力测试html（图表的容器）

 <div *ngIf="!showTable" class="tab-pane base-strategy-chart fade show active" id="base-strategy-chart--nva" role="tabpanel"
          aria-labelledby="chart-tab">
          <div class="tb-container">

            <div class="tb-row d-flex flex-row">
              <div class="tb-cell col-6"></div>

                <splinechart [series]="chartSeries">
               </splinechart>

            </div>
          </div>

Answer 1

我已经解决了这个问题。基本上我传递给样条图的系列不是正确的类型。我传递了一个包含系列和数据的类型。它现在有效

Spline HighChart不使用角度4

1 个答案: