如何在Angular 5中设置Highcharts选项

Question

我试着设置以下内容

Highcharts.setOptions({ lang: { thousandsSep: ',' } });

尝试将千位分隔符设置为默认值是空格。

错误TS2686：'Highcharts'是指UMD全局，但当前文件是模块。请考虑添加导入。

我正在使用"highcharts": "^6.1.0"。

import {Component, OnInit, ViewEncapsulation,Inject, ViewChild,ElementRef,AfterContentInit, OnDestroy, Input} from '@angular/core';
import { chart } from 'highcharts';
import { Race } from '../../../race';
import { BaseComponent } from '../../../base/base.component';
@Component({
  selector: 'nc-mobility',
  templateUrl: './mobility.component.html',
  styleUrls: ['./mobility.component.css']
})
export class MobilityComponent extends BaseComponent implements OnInit, AfterContentInit, OnDestroy {
  @Input() mobility: Array<any>;
  // highchart declarations
  @ViewChild('mobilityDist') chartTarget: ElementRef;
  chart: Highcharts.ChartObject;

  constructor() { super(); }

  ngOnInit() {
  }

  ngAfterContentInit() {
    const options: Highcharts.Options = {
      chart: {
        type: 'column'
      },
        series: this.mobility.map(x => {
        return { name: x.name, data: [x.value] };
      }),
      credits: {
        enabled: false
      }
    };
    this.chart = chart(this.chartTarget.nativeElement, options);
  }
  ngOnDestroy() {
    this.chart = null;
  }
}

Answer 1

发生错误是因为你只有一个来自Highcharts的函数import，由此：

import { chart } from 'highcharts';

为了使用setOptions，您还需要导入此函数或导入整个Highcharts模块，就像这样：

import * as Highcharts from 'highcharts';

Answer 2

// import Highcharts
import Highcharts from "highcharts";

//set the options in your constructor
Highcharts.setOptions({
  lang: {
    thousandsSep: ","
  }
});