使用角度 4 向图表添加序列时出现高图表错误 #17

Question

我正在尝试使用角度 4 实现直方图高图。我收到错误"将系列添加到图表时出现高图表错误 #17。我的代码如下。该系列碰巧看起来不错，不确定问题可能是什么

直方图组件

import { Component, Input } from '@angular/core';
@Component({
    selector: 'histogram',
    template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
    styles: [`
        chart{
              display: block;
              width: 100% !important;
              padding:0;
        }
    `]
})
export class HistogramChartComponent {
    public options: any;
    chart: any;
    @Input() public series: any;
    constructor() {
        this.options = {
            chart: {
                type: 'histogram'
            },
            title: {
                text: ''
            },
            legend: {
                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;
        console.log(this.series);
        this.chart.addSeries(this.series);
    }
}

期末剩余 承载直方图

组件的组件

import { Component, OnInit, Input } from '@angular/core';
import { EndingSurplus } from '../../../../api/dtos';
export interface ChartSeries {
   data: number[];
 }
@Component({
  selector: 'app-ending-surplus-analysis',
  templateUrl: './ending-surplus-analysis.component.html',
})
export class EndingSurplusAnalysisComponent implements OnInit {
  isExpanded = false;
  @Input() results: Array<EndingSurplus>  = [];
 chartSeries: Array<ChartSeries> = [];
  constructor() { }
  ngOnInit() {
    this.addSeries();
  }
  private addSeries() {
    this.results.forEach(element => {
      if (element.data != null)
        this.chartSeries.push({ data: element.data});
    });
  }
}

结束盈余组件 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-12">
                <histogram [series]="chartSeries">
               </histogram> 
                </div>
            </div>
          </div>
          <!-- sta Chart End -->
        </div>

Answer 1

我能够在 Angular 应用程序中使用角度高图表指令重新创建示例直方图高图。请参考我的堆栈闪电战工作版本，下面是我的示例代码

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';

@NgModule({
  imports:      [ BrowserModule, FormsModule, ChartModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { Chart } from 'angular-highcharts';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  histogram : Chart;
  data= [3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3, 3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3, 2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3, 2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3, 2.5, 3, 3.4, 3];
  constructor() {
  }
  ngOnInit() {
    this.histogram= new Chart({
    title: {
        text: 'Highcharts Histogram'
    },
    xAxis: [{
        title: { text: 'Data' },
        alignTicks: false
    }, {
        title: { text: 'Histogram' },
        alignTicks: false,
        opposite: true
    }],
    yAxis: [{
        title: { text: 'Data' }
    }, {
        title: { text: 'Histogram' },
        opposite: true
    }],
    series: [{
        name: 'Histogram',
        type: 'histogram',
        xAxis: 1,
        yAxis: 1,
        baseSeries: 's1',
        zIndex: -1
    }, {
        name: 'Data',
        type: 'scatter',
        data: this.data,
        id: 's1',
        marker: {
            radius: 1.5
        }
    }]
});
  }
}

app.component.html

<div [chart]="histogram"></div>

Answer 2

默认情况下，

Angular-highcharts不会导入除默认值之外的任何模块。这意味着如果你想要任何使用 highcharts-more 模块、highcharts-exporting，或者任何东西的东西，你必须在适当的 NgModule 中为它编写自己的提供程序。自述文件包含以下示例，用于导入高图表 - 更多 和 高图表 - 导出：

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as more from 'highcharts/highcharts-more.src';
import * as exporting from 'highcharts/modules/exporting.src';
@NgModule({
  providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: () => [ more, exporting ] } // add as factory to your providers
  ]
})
export class AppModule { }