如何使用角度5的高图？

Question

有没有办法使用angular2的highcharts.js？有没有可用的选项而不是highcharts？

Answer 1

您也可以尝试我实现的angular2-highcharts.

Answer 2

我知道这个问题有点陈旧,但是对于angular2 + highcharts查询的第一次点击之一......这非常简单直接地让高级图表工作.这是一个吸引人的例子,https://plnkr.co/edit/8ccBrP？p = preview .

这是主要逻辑:

import {
    Component,
    ElementRef,
    AfterViewInit,
    OnDestroy,
    ViewChild
} from '@angular/core';

const Highcharts = require('highcharts/highcharts.src');
import 'highcharts/adapters/standalone-framework.src';

@Component({
    selector: 'my-app',
    template: `
        <div>
            <div #chart></div>
        </div>
    `
})
export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChild('chart') public chartEl: ElementRef;

  private _chart: any;

  public ngAfterViewInit() {
    let opts: any = {
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            name: 'Tokyo',
            data: [
                7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                26.5, 23.3, 18.3, 13.9, 9.6
            ]
        }]
    };

    if (this.chartEl && this.chartEl.nativeElement) {
        opts.chart = {
            type: 'line',
            renderTo: this.chartEl.nativeElement
        };

        this._chart = new Highcharts.Chart(opts);
    }
  }

  public ngOnDestroy() {
    this._chart.destroy();
  }
}

Answer 3

我想你可以试试ng2-highchart(https://github.com/Bigous/ng2-highcharts).

有关使用示例,请参阅此项目:https://github.com/Bigous/angular2-seed-ng2-highcharts.

• 如何在SystemJS配置中进行设置:https://github.com/Bigous/angular2-seed-ng2-highcharts/blob/master/src/index.html#L43和https://github.com/Bigous/angular2 -seed-NG2-highcharts/BLOB /主/工具/ config.ts#L108

  <script>
    System.config({
      map: {
        'ng2-highchart': 'node_modules/ng2-highchart'
      },
      (...)
    });
  </script>
  

• 如何在组件中配置它:https://github.com/Bigous/angular2-seed-ng2-highcharts/blob/master/src/home/components/home.ts#L10

  import {Component, OnInit} from 'angular2/core';
  import {Http} from 'angular2/http';
  import {Ng2Highcharts, Ng2Highmaps, Ng2Highstocks} from 'ng2-highcharts/ng2-highcharts';
  
  @Component({
    selector: 'home',
    moduleId: module.id,
    templateUrl: './home.html',
    styleUrls: ['./home.css'],
    directives: [Ng2Highcharts, Ng2Highmaps, Ng2Highstocks]
  })
  export class HomeCmp implements OnInit {
    (...)
  }
  

• 如何在组件模板中使用它:https://github.com/Bigous/angular2-seed-ng2-highcharts/blob/master/src/home/components/home.html#L9

  <div [ng2-highcharts]="chartOptions" class="graph"></div>
  

Answer 4

要安装此库,请首先安装对等依赖项:

$ npm install --save highcharts@^4.2.1

另外,请确保安装Highcharts的类型:

$ npm install @types/highcharts --save

然后,安装此库运行:

$ npm install --save ng2-highcharts

app.module

import { Ng2HighchartsModule } from 'ng2-highcharts';

add Ng2HighchartsModule to @NgModule => imports

angular cli在脚本中添加此JS文件

"../node_modules/highcharts/highcharts.js",
    "../node_modules/highcharts/highcharts-more.js", 
    "../node_modules/highcharts/modules/exporting.js"

组件文件

import { Ng2Highcharts } from 'ng2-highcharts';


private chartData = {
chart: {
  type: 'column'
},
xAxis: {
  categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
series: [
  {
    name: 'NC',
    data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2]
  }, {
    name: 'OK',
    data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2]
  }, {
    name: 'KO',
    data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2]
  }, {
    name: 'VALID',
    data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2]
  }, {
    name: 'CHECK',
    data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2]
  }, {
    name: 'COR',
    data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2]
  }
]};

和HTML

<div [ng2-highcharts]="chartData"></div>