Скачать ng2 charts - Загрузка исходного кода ng2 charts

ng2 charts

Другой исходный код

v6.0.1

Скачать

NG2-диаграммы Slack

Красивые диаграммы для Angular на основе chart.js

Использование и демонстрация

Образцы с использованием ng2-charts

https://valor-software.com/ng2-charts/

Установка

Вы можете установить NG2-диаграммы с помощью углового CLI:

ng add ng2-charts

Требуемые пакеты будут автоматически установлены, и ваше app.config.ts будет обновлено с помощью необходимых изменений, чтобы начать использование библиотеки сразу.

Ручная установка через менеджеров пакетов

Вы можете установить NG2-диаграммы с помощью NPM:
```
npm install ng2-charts --save
```
или пряжа:
```
yarn add ng2-charts --save
```
Вам также необходимо будет установить и включить библиотеку Chart.js в ваше приложение (это зависимость от этой библиотеки, это является дополнительной информацией в официальной документации chart.js )
```
npm install chart.js --save
```
или с пряжей:
```
yarn add  chart.js --save
```

Импортируйте директиву в вашем автономном компоненте:

 import { BaseChartDirective } from 'ng2-charts' ;

@ Component ( {
  standalone : true ,
  imports : [ BaseChartDirective ] ,
} )
export class MyComponent { }

Предоставьте конфигурацию, как правило, в вашем main.ts :

 import { provideCharts , withDefaultRegisterables } from 'ng2-charts' ;

bootstrapApplication ( AppComponent , {
  providers : [ provideCharts ( withDefaultRegisterables ( ) ) ] ,
} ) . catch ( ( err ) => console . error ( err ) ) ;

Альтернативно, включите минимальную конфигурацию для уменьшения размера пакета, например:

 provideCharts ( { registerables : [ BarController , Legend , Colors ] } ) ;

Или в вашем AppModule:

 import { provideCharts , withDefaultRegisterables } from 'ng2-charts' ;

@ NgModule ( {
  providers : [ provideCharts ( withDefaultRegisterables ( ) ) ] ,
  bootstrap : [ AppComponent ] ,
} )
export class AppModule { }

Таблица совместимости угловой версии

	NG2-Chart версия
Угловая версия	v1.x	v2.x	v3.x	v4.x	v5.x	V6.x
2 - 9	✓
10		✓
11		✓
12		✓
13			✓
14			✓	✓
15			✓	✓
16					✓
17					✓	✓

API

Типы диаграмм

Существует одна директива для всех типов диаграмм: baseChart , и есть 8 типов диаграмм: line , bar , radar , pie , polarArea , doughnut , bubble и scatter . Вы можете использовать директиву на элементе canvas следующим образом:

 < canvas baseChart [data] =" barChartData " [options] =" barChartOptions " [type] =" 'bar' " > </ canvas >

Характеристики

Примечание . Для получения дополнительной информации о возможных вариантах, пожалуйста, обратитесь к документации Original Cart.js

type : ( ChartType ) - указывает тип диаграммы, это может быть: line , bar , radar , pie , polarArea , doughnut или любой пользовательский тип, добавленный на chart.js
data : ( ChartData<TType, TData, TLabel> ) - вся структура данных, которая будет отображаться в диаграмме. Поддерживайте различные гибкие форматы и варианты анализа, см. Здесь. В альтернативе и в зависимости от type вашей диаграммы, вы можете использовать свойства labels и datasets для указания отдельных параметров.
labels : ( TLabel[] ) - Наборы данных метки. Это необходимо для диаграмм: line , bar и radar . И просто этикетки (на падении) для диаграмм: polarArea , pie и doughnut . Метки сопоставлены в порядке с массивом datasets .
datasets : ( ChartDataset<TType, TData>[] ) - то же самое, что и свойство datasets ввода data . Смотрите здесь для деталей.
options : ( ChartOptions<TType> ) - Параметры диаграммы (согласно документации chart.js).
legend : ( boolean = false ) - если это правда, отображается легенда диаграммы.

События

chartClick : Пожары, когда нажимает на таблицу, возвращает информацию о активных точках и метках
chartHover : Пожары, когда произошла MouseMove (Hover) на графике, возвращает информацию о активных точках и метках

Цвета

По умолчанию эта библиотека использует цвета, как определено chart.js. Если вам нужно больше контроля на цветах, например: генерирование цветов на лету, см. Усовершенствованные цветовые палитры.

Динамическая темация

ThemeService позволяет клиентам устанавливать структуру, указывающую настройки переопределения цветов. Эта услуга может быть вызвана при изменении динамической темы, с цветами, которые соответствуют теме. Структура интерпретируется как переопределение, со специальной функциональностью при работе с массивами. Пример:

 type Theme = 'light-theme' | 'dark-theme' ;

private _selectedTheme: Theme = 'light-theme' ;
public get selectedTheme ( ) {
  return this . _selectedTheme ;
}

public set selectedTheme ( value ) {
  this . _selectedTheme = value ;
  let overrides : ChartOptions ;
  if ( this . selectedTheme === 'dark-theme' ) {
    overrides = {
      legend : {
        labels : { fontColor : 'white' }
      } ,
      scales : {
        xAxes : [ {
          ticks : { fontColor : 'white' } ,
          gridLines : { color : 'rgba(255,255,255,0.1)' }
        } ] ,
        yAxes : [ {
          ticks : { fontColor : 'white' } ,
          gridLines : { color : 'rgba(255,255,255,0.1)' }
        } ]
      }
    } ;
  } else {
    overrides = { } ;
  }
  this . themeService . setColorschemesOptions ( overrides ) ;
}

constructor ( private themeService : ThemeService < AppChartMetaConfig > ) {
}

setCurrentTheme ( theme : Theme ) {
  this . selectedTheme = theme ;
}

Объект overrides имеет тот же тип, что и ChartOptions объектов диаграммы, и где бы ни встречалось простое поле, он заменяет поле соответствия в объекте options . Когда встречается массив (как в полях xAxes и yAxes выше), единственный объект внутри массива используется в качестве шаблона для переопределения всех элементов массива в поле соответствия в объекте options . Таким образом, в приведенном выше случае, каждая ось будут иметь свои клещи и цвета сетки.

Поиск неисправностей

Пожалуйста, следуйте этим рекомендациям при сообщении об ошибках и запросах функций:

Используйте проблемы GitHub, чтобы сообщать об ошибках и запросах функций.
Пожалуйста, всегда предоставляйте пример проекта и записывает шаги, чтобы воспроизвести ошибку. Таким образом, мы можем сосредоточиться на исправлении ошибки, не царапая наши головы, пытаясь воспроизвести ее.

Спасибо за понимание!