ดาวน์โหลด ng2 charts - ng2 charts ซอร์สโค้ดดาวน์โหลด

ng2 charts

ซอร์สโค้ดอื่น ๆ

v6.0.1

ดาวน์โหลด

NG2-charts Slack

แผนภูมิที่สวยงามสำหรับ Angular ตามแผนภูมิ js

การใช้งานและการสาธิต

ตัวอย่างที่ใช้ ng2-charts

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

การติดตั้ง

คุณสามารถติดตั้ง NG2-charts โดยใช้ Angular CLI:

ng add ng2-charts

แพ็คเกจที่ต้องการจะถูกติดตั้งโดยอัตโนมัติและ app.config.ts ของคุณจะได้รับการอัปเดตด้วยการเปลี่ยนแปลงที่จำเป็นเพื่อเริ่มใช้ไลบรารีทันที

ติดตั้งด้วยตนเองผ่านผู้จัดการแพ็คเกจ

คุณสามารถติดตั้ง NG2-charts โดยใช้ 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
เวอร์ชันเชิงมุม	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 >

คุณสมบัติ

หมายเหตุ : สำหรับข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกที่เป็นไปได้โปรดดูเอกสารประกอบแผนภูมิต้นฉบับ 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> ) - ตัวเลือกแผนภูมิ (ตามเอกสารประกอบเอกสาร. JS)
legend : ( boolean = false ) - ถ้าเป็นจริงจะแสดงตำนานแผนภูมิ

เหตุการณ์

chartClick : ไฟเมื่อคลิกที่แผนภูมิเกิดขึ้นข้อมูลส่งคืนข้อมูลเกี่ยวกับจุดที่ใช้งานและป้ายกำกับ
chartHover : ไฟเมื่อ Mousemove (โฮเวอร์) บนแผนภูมิเกิดขึ้นส่งคืนข้อมูลเกี่ยวกับจุดที่ใช้งานอยู่และฉลาก

สี

โดยค่าเริ่มต้นไลบรารีนี้ใช้สีตามที่กำหนดโดย 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 เพื่อรายงานข้อบกพร่องและคำขอคุณสมบัติ
โปรด ระบุโครงการตัวอย่างและเขียนขั้นตอนเพื่อทำซ้ำข้อผิดพลาด ด้วยวิธีนี้เราสามารถมุ่งเน้นไปที่การแก้ไขข้อผิดพลาดโดยไม่เกาหัวของเราที่พยายามทำซ้ำ

ขอบคุณสำหรับความเข้าใจ!