# angular-dj-chart

> D3, Crossfilter, DC library를 이용하여 Angular 모듈로 만든 차트

Latest version **0.0.2** (published 2021-07-20) · 0 weekly downloads

## Install

```sh
npm install angular-dj-chart
pnpm add angular-dj-chart
yarn add angular-dj-chart
bun add angular-dj-chart
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2021-07-20 |
| First published | 2021-07-20 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | odj0220 |

## Links

- npm: https://www.npmjs.com/package/angular-dj-chart
- npm.io page: https://npm.io/package/angular-dj-chart

## Dependencies (6)

- [d3](https://npm.io/package/d3.md) 5.16.0
- [dc](https://npm.io/package/dc.md) ^3.2.2
- [tslib](https://npm.io/package/tslib.md) ^2.2.0
- [d3-cloud](https://npm.io/package/d3-cloud.md) ^1.2.5
- [crossfilter2](https://npm.io/package/crossfilter2.md) 1.4.8
- [d3-selection](https://npm.io/package/d3-selection.md) ^3.0.0

## Recent versions

- 0.0.2 (latest) — 2021-07-20
- 0.0.1 — 2021-07-20

## README

# AngularDjChart

D3, Crossfilter, DC library를 이용하여 Angular 모듈로 만든 차트

## 설치

`npm install angular-dj-chart` 
 

## 사용
#### app.module.ts
````ts
import ...
import {AngularDjChartModule} from 'angular-dj-chart';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
   ...
   AngularDjChartModule
  ],
  entryComponents: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
````


#### component.ts
````ts
import {DjChartOption} from 'angular-dj-chart';

compositeChart = new DjChartOption({
    type: 'composite',
    data: [
        { "key": ["티셔츠", "20200201"], "value": 860},
        { "key": ["팬츠", "20200201"], "value": 635},
        { "key": ["풀오버", "20200201"], "value": 462},
        { "key": ["원피스", "20200201"], "value": 454},
        { "key": ["베스트", "20200201"], "value": 63},
        { "key": ["티셔츠", "20200203"], "value": 3547},
        { "key": ["팬츠", "20200203"], "value": 3228},
        { "key": ["원피스", "20200203"], "value": 2184},
        ...
    ],
    seriesTypes: {
        '티셔츠': 'lineSymbol',
        '원피스': 'stepLine',
        '팬츠': 'line',
        '풀오버': 'symbol',
        '스커트': 'line',
        '가디건': 'line',
        '블라우스': 'symbol'
    },
    yAxisOptions: [
        {
            axisLabel: '판매량',
            keys: ['티셔츠', '원피스'],
            domain: [200, 5000]
        },
        {
            axisLabel: '판매량2',
            keys: ['팬츠', '가디건', '스커트'],
            domain: [0, 5000]
        },
        {
            axisLabel: '판매량3',
            keys: ['풀오버', '블라우스'],
            domain: [0, 2000]
        }
    ],
    xAxisOption: {
        axisLabel: '날짜 (일)',
        type: 'date',
        dateFormat: 'YYYYMMDD',
        dateTickFormat: 'YYYY-MM-DD',
    }
})
````

#### component.html
```angular2html
<wise-chart [option]="compositeChart"></wise-chart>
```

---
_Source: https://npm.io/package/angular-dj-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._