使用角度4将序列添加到图表中时，Highcharts错误#17

问题描述

我正在尝试使用角度4来实现直方图高位图.我收到错误消息在向图表添加序列时出现Highcharts错误#17.我的代码如下.序列恰好看起来很好，不确定问题可能是什么是

I am trying to implement a histogram high chart using angular 4. I am getting error "Highcharts error #17 when adding series to the chart. My code is as follows. The series happens to look fine not sure what the problem could be

直方图分量

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);
    }

}

托管直方图成分的期末剩余成分

Ending surplus Component that host the histogram component

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>

推荐答案

默认情况下，Angular-highcharts不会导入任何模块.这意味着，如果您想要使用highcharts-more模块或highcharts-exporting的任何东西，或者实际上是任何东西，则必须在适当的NgModule中为其编写自己的提供程序. 自述文件包含用于导入highcharts-more和highcharts-exporting的示例:

Angular-highcharts doesn't import the any module besides the default by default. This means if you want anything that uses the highcharts-more module, or highcharts-exporting, or really anything, you have to write your own provider for it in the appropriate NgModule. The readme has this example for importing highcharts-more and 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将序列添加到图表中时，Highcharts错误#17的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！