Как использовать высокочастотные диаграммы с угловыми 5?

Есть ли способ использовать highcharts.js с angular2? Есть ли какой-либо доступный вариант вместо графических карт?

Ответ 1

Вы также можете попробовать angular2-highcharts Я реализовал.

Ответ 2

Я знаю, что этот вопрос немного устарел, но является одним из первых хитов для запросов angular2 + highcharts... Это довольно просто и прямо вперед, чтобы заставить работать на высоких диаграммах. Вот пример plunker, 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();
  }
}

Ответ 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/master/tools/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>
```

Ответ 4

Чтобы установить эту библиотеку, сначала установите одноранговые зависимости:

$ npm install --save [email protected]^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 файлы в script

"../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>

Ответ 5

Добавлено это в package.json:

"angular2-highcharts": "^0.3.3",
"highcharts": "^5.0.0",

Добавлено это в файл main.module.ts:

import { ChartModule } from 'angular2-highcharts';

Добавлено это на main.module.ts в разделе импорта @NgModule

imports: [ // import Angular modules    
    ChartModule
],

Добавлено в файл vendor.ts:

//Angular2-highcharts
import { Highcharts } from 'angular2-highcharts';
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);

Добавлено это в файле chart.component.ts

import { Highcharts } from 'angular2-highcharts';

объявить это внутри кода класса chart.component:

options: HighchartsOptions;
chartData: any = [];

Добавьте этот код в метод, который привязывает данные к диаграмме:

this.options = {
      chart: { type: 'spline' },
      title : { text : 'chart' },
      xAxis: {
          type: 'datetime'
      },
      series: [{
        name: "name",
        data: this.chartData
      }]
    };

Добавлено это на странице chart.component.html:

<div>
      <chart [options]="options"></chart>
    </div>

Ответ 6

Схемы PrimeNG могут быть альтернативой. http://www.primefaces.org/primeng/

Ответ 7

Попробуйте этот подход без использования сторонней библиотеки.

import {Component} from 'angular2/core';

declare var jQuery:any;

@Component({
    selector: 'my-chart',
    template: `<div style="width:60%" id="container"></div>`
})
export class AppComponent { 
    private data = [
            {
                name: 'USA',
                data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
                    1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                    27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                    26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                    24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                    22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                    10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
            }, 
            {
                name: 'USSR/Russia',
                data: [null, null, null, null, null, null, null, null, null, null,
                    5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
                    4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
                    15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
                    33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
                    35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
                    21000, 20000, 19000, 18000, 18000, 17000, 16000]
            }];

    ngAfterViewInit() {
        this.renderChart();
    }

    renderChart(){
        jQuery('#container').highcharts({
            chart: {
                type: 'area'
            },
            title: {
                text: 'US and USSR nuclear stockpiles'
            },
            subtitle: {
                text: 'Source: thebulletin.metapress.com'
            },
            xAxis: {
                allowDecimals: false,
                labels: {
                    formatter: function () {
                        return this.value;
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'Nuclear weapon states'
                },
                labels: {
                    formatter: function () {
                        return this.value / 1000 + 'k';
                    }
                }
            },
            tooltip: {
                pointFormat: '{series.name} produced <b>{point.y:,.0f}</b>' +
                             '<br/>warheads in {point.x}'
            },
            plotOptions: {
                area: {
                    pointStart: 1940,
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            },
            series: this.data
        });
    }
}

И отложите это на index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

Или попробуйте этот модуль http://ngmodules.org/modules/angular2-highcharts, если вам нужно обработать событие выбора точки.

Ответ 8

Я еще не тестировал, но у HighCharts есть официальная Угловая библиотека, которая, похоже, активно поддерживается.

Ответ 9

По состоянию на октябрь 2018 года:

angular-highcharts - это новый парень на блоке и набирает популярность угловые2-highcharts.

angular-highcharts - это основанная на Angular директива на основе высоких карт, и ATTOW требует Angular 7 (который был выпущен совсем недавно)

У меня нет связи ни с одной из библиотек.

Ответ 10

Только с использованием официального модуля с высоким графическим интерфейсом (без угловых2-high-карт и других и даже с @типами/с высокими стандартами)

npm install --save-dev highcharts

import * as HC from 'highcharts';
...
export class MainComponent implements OnInit, AfterViewInit {
...
ngAfterViewInit() {
  let chartOptions = {
  ...
    chart: {
      renderTo: 'chartPanel', // need to have div #chartPanel in template
      ...
    }
  }
  this.chartInstance = new HC.Chart(chartOptions);
}

this.chartInstance будет иметь все высокопроизводительные методы, такие как addSeries, reflow, redraw и т.д.