ng2 charts下載ng2 charts源代碼下載

ng2 charts

其他源碼

v6.0.1

下載

NG2-Charts鬆懈

基於圖表的Angular的精美圖表

用法和演示

使用ng2-charts樣品

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

安裝

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

ng add ng2-charts

所需的軟件包將自動安裝，您的app.config.ts將隨著所需的更改而更新，以立即開始使用庫。

通過包裝管理人員安裝手動

您可以使用NPM安裝NG2-tharts ：

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 ，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對像中匹配字段中所有數組元素。因此，在上面的情況下，每個軸都會有滴答聲和網格線顏色更改。