ng2 charts

NG2-Charts松懈

基于图表的Angular的精美图表

用法和演示

使用ng2-charts样品

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

---

安装

您可以使用Angular CLI安装NG2-Charts ：

ng add ng2-charts

所需的软件包将自动安装，您的app.config.ts将随着所需的更改而更新，以立即开始使用库。

通过包装管理人员安装手动

1. 您可以使用NPM安装NG2-tharts ：

   npm install ng2-charts --save

   或纱线：

   yarn add ng2-charts --save

2. 您还需要在应用程序中安装并包含Chart.js库（这是此库的同行依赖性，可以在官方chart.js中找到更多信息）。

   npm install chart.js --save

   或与纱线：

   yarn add  chart.js --save

3. 导入您的独立组件中的指令：

    import { BaseChartDirective } from 'ng2-charts' ;
   
   @ Component ( {
     standalone : true ,
     imports : [ BaseChartDirective ] ,
   } )
   export class MyComponent { }

4. 提供一个配置，通常在您的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 ，Dolartarea， doughnut ， bubble和scatter 。您可以在canvas元素上使用指令，如下所示：

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

特性

注意：有关可能选项的更多信息，请参阅原始图表。

• 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>[] ） - 与data输入的datasets集属性相同。有关详细信息，请参见此处。
• options ：（ ChartOptions<TType> ） - 图表选项（根据图表。文档）。
• legend ：（ boolean = false ） - 如果为true，则显示图表图例。

事件

• chartClick ：单击图表时发射，返回有关活动点和标签的信息
• chartHover ：在图表上发生Mousemove（悬停）时会发射，返回有关活动点和标签的信息

颜色

默认情况下，此库使用图表的定义的颜色。如果您需要更多地控制颜色，例如：即时生成颜色，请参阅高级调色板。

动态主题

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对象中匹配字段中所有数组元素。因此，在上面的情况下，每个轴都会有滴答声和网格线颜色更改。

故障排除

在报告错误和功能请求时，请遵循此准则：

1. 使用GitHub问题报告错误和功能请求。
2. 请始终提供一个示例项目，并写下步骤以重现错误。这样，我们可以专注于修复错误，而不是挠头试图复制它。

感谢您的理解！

执照

麻省理工学院许可证（有关全文请参阅许可证文件）

如果您喜欢这个图书馆并想感谢，请考虑给我买咖啡！