Question

我正在尝试使用角度4实现直方图高图表。我在向图表添加系列时收到错误“Highcharts错误＃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应用程序中使用sample Histogram Highchart指令重新创建Angular-Highcharts。请参阅我的stackblitz working version，以下是我的示例代码

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中为其编写自己的提供程序。 readme的以下示例用于导入highcharts-more和highcharts-exporting：

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 { }

使用角度4

2 个答案: