如何在Angular 5中设置Highcharts选项

时间:2018-07-19 20:54:27

标签: highcharts angular5

我尝试设置关注

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

2 个答案:

答案 0 :(得分:1)

发生错误是因为您通过以下方式import仅从Highcharts获得一个功能:

import { chart } from 'highcharts';

要使用setOptions,还需要导入此函数或导入整个Highcharts模块,如下所示:

import * as Highcharts from 'highcharts';

答案 1 :(得分:0)

// import Highcharts
import Highcharts from "highcharts";

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