Skip to content

Commit

Permalink
docs: Translate to korean (#1078)
Browse files Browse the repository at this point in the history
* docs: translate landing page to Korean
* docs: translate guide to Korean
* docs: translate api to Korean
  • Loading branch information
Leejaeyeop authored Jan 9, 2024
1 parent 197367f commit 8ca163b
Show file tree
Hide file tree
Showing 3 changed files with 631 additions and 0 deletions.
130 changes: 130 additions & 0 deletions website/src/kr/api/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
# ์ฝ”๋”ฉ ๋ ˆํผ๋Ÿฐ์Šค

## Props

`vue-chartjs`๊ฐ€ ์ œ๊ณตํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋“ค์€ ๋ช‡ ๊ฐ€์ง€ ๊ธฐ๋ณธ์ ์ธ ์†์„ฑ๋“ค์„ ์ •์˜ํ•œ๋‹ค. `ํ™•์žฅ`ํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, ๊ทธ๋“ค์€ * ๋ณด์ด์ง€ ์•Š๋Š” *์ด์ง€๋งŒ, ๊ทธ ๊ฐ’์„ ๋ฎ์–ด ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค :

| Prop ์ด๋ฆ„ | ์„ค๋ช… |
|---|---|
| width | ์ฐจํŠธ ํญ |
| height | ์ฐจํŠธ ๋†’์ด |
| chart-id | canvas ์š”์†Œ์˜ id |
| css-classes | ๋‘˜๋Ÿฌ์‹ธ๋Š” div css ํด๋ž˜์Šค (๋ฌธ์ž์—ด) |
| styles | ๋‘˜๋Ÿฌ์‹ธ๋Š” div ์˜ css ํด๋ž˜์Šค (๊ฐ์ฒด) |
| plugins | chartjs ํ”Œ๋Ÿฌ๊ทธ์ธ (๋ฐฐ์—ด) |

## Events

`reactData` ๋˜๋Š” `reactProp` ๋ฏน์Šค ์ธ์ด ์‚ฌ์šฉ๋˜๋ฉด ๋‹ค์Œ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœํ–‰๋ฉ๋‹ˆ๋‹ค.

| ์ด๋ฒคํŠธ ์ด๋ฆ„ | ์„ค๋ช… |
|---|---|
| `chart:render` | ๋ฏน์Šค ์ธ์ด ์™„์ „ํžˆ ๋ Œ๋”๋ง ๋  ๋•Œ |
| `chart:destroy` | ๋ฏน์Šค์ธ์ด ์ฐจํŠธ ์˜ค๋ธŒ์ ํŠธ ์ธ์Šคํ„ด์Šค๋ฅผ ์‚ญ์ œํ•  ๋•Œ |
| `chart:update` | ๋ฏน์Šค ์ธ์ด ๋‹ค์‹œ ๋ Œ๋”๋ง ๋Œ€์‹  ์—…๋ฐ์ดํŠธ๋ฅผ ํ•  ๋•Œ |
| `labels:update` | labels๊ฐ€ ์„ค์ •๋˜๋ฉด |
| `xlabels:update` | xlabels๊ฐ€ ์„ค์ •๋˜๋ฉด |
| `ylabels:update` | ylabels๊ฐ€ ์„ค์ •๋˜๋ฉด |

## Global Methods
์ „์—ญ ๋ฉ”์†Œ๋“œ๋Š” ๊ฐ€์ ธ์˜ค๊ณ  ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

### generateChart

- **Type:** `Function`
- **Arguments**: `chart-id`, `chart-type`
- **Usage:**

```js
import { generateChart } from 'vue-chartjs'
// First argument is the chart-id, second the chart type.
const CustomLine = generateChart('custom-line', 'LineWithLine')
```

## Instance Methods

์ธ์Šคํ„ด์Šค ๋ฉ”์†Œ๋“œ๋Š” ๋…์ž์ ์ธ ์ฐจํŠธ ์ปดํผ๋„ŒํŠธ๋‚ด์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.


### generateLegend()

HTML ๋ฒ”๋ก€๋ฅผ ๋งŒ๋“œ๋Š” ๋„์šฐ๋ฏธ ํ•จ์ˆ˜

- **Type:** `Function`
- **Arguments**: `none`
- **Usage:**

```js{11}
import { Line } from 'vue-chartjs'
export default {
extends: Line,
props: ['datasets', 'options']
data: () => ({
htmlLegend: null
})
mounted () {
this.renderChart(this.datasets, this.options)
this.htmlLegend = this.generateLegend()
}
}
```

### ํ”Œ๋Ÿฌ๊ทธ์ธ ์ถ”๊ฐ€

Chart.js์—์„œ๋Š” ๊ธ€๋กœ๋ฒŒ ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ์ธ๋ผ์ธ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธ€๋กœ๋ฒŒ ํ”Œ๋Ÿฌ๊ทธ์ธ์€ [Chart.js docs] (http://www.chartjs.org/docs/latest/developers/plugins.html)์—์„œ ์„ค๋ช…ํ•œ๋Œ€๋กœ 'vue-chartjs'์—์„œ๋„ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. .


์ธ๋ผ์ธ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ถ”๊ฐ€ํ•˜๋ ค๋Š” ๊ฒฝ์šฐ๋ฅผ ๋Œ€๋น„ํ•˜์—ฌ `vue-chartjs`๋Š” `addPlugin()`์ด๋ผ๋Š” ํ—ฌํผ ๋ฉ”์†Œ๋“œ๋ฅผ ๋…ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

`renderChart()` ๋ฉ”์†Œ๋“œ ์•ž์— `addPlugin()` ์„ ํ˜ธ์ถœํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

- **Type:** `Function`
- **Arguments**: `Array` of Plugins
- **Usage:**### ํ”Œ๋Ÿฌ๊ทธ์ธ ์ถ”๊ฐ€

```js
mounted () {
this.addPlugin({
id: 'my-plugin',
beforeInit: function (chart) {
....
}
})
}
```

### renderChart()

Chart.js์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ๋งŒ๋“ค๊ณ  ๊ทธ๋ฆฝ๋‹ˆ๋‹ค.

- **Type:** `Function`
- **Arguments**: `Chart Data`, `Chart Options`
- **Usage:**

```js
mounted () {
this.renderChart({
labels: ['January', 'February'],
datasets: [
{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 20]
}
]},
{
responsive: true
}
)
}
```

## Chart.js ๊ฐ์ฒด

๋…์ž์ ์ธ ์ฐจํŠธ ์ปดํผ๋„ŒํŠธ๋‚ด๋กœ๋ถ€ํ„ฐ Chart.js ์˜ ์˜ค๋ธŒ์ ํŠธ์—๋Š” `this.$data._chart` ๋กœ ์•ก์„ธ์Šค ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

## Canvas

Canvas ์š”์†Œ๋Š” `this.$refs.canvas`๋กœ ์•ก์„ธ์Šค ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
Loading

0 comments on commit 8ca163b

Please sign in to comment.