|
| 1 | +# ์ฝ๋ฉ ๋ ํผ๋ฐ์ค |
| 2 | + |
| 3 | +## Props |
| 4 | + |
| 5 | +`vue-chartjs`๊ฐ ์ ๊ณตํ๋ ์ปดํฌ๋ํธ๋ค์ ๋ช ๊ฐ์ง ๊ธฐ๋ณธ์ ์ธ ์์ฑ๋ค์ ์ ์ํ๋ค. `ํ์ฅ`ํ๊ณ ์๊ธฐ ๋๋ฌธ์, ๊ทธ๋ค์ * ๋ณด์ด์ง ์๋ *์ด์ง๋ง, ๊ทธ ๊ฐ์ ๋ฎ์ด ์ธ ์ ์์ต๋๋ค : |
| 6 | + |
| 7 | +| Prop ์ด๋ฆ | ์ค๋ช
| |
| 8 | +|---|---| |
| 9 | +| width | ์ฐจํธ ํญ | |
| 10 | +| height | ์ฐจํธ ๋์ด | |
| 11 | +| chart-id | canvas ์์์ id | |
| 12 | +| css-classes | ๋๋ฌ์ธ๋ div css ํด๋์ค (๋ฌธ์์ด) | |
| 13 | +| styles | ๋๋ฌ์ธ๋ div ์ css ํด๋์ค (๊ฐ์ฒด) | |
| 14 | +| plugins | chartjs ํ๋ฌ๊ทธ์ธ (๋ฐฐ์ด) | |
| 15 | + |
| 16 | +## Events |
| 17 | + |
| 18 | +`reactData` ๋๋ `reactProp` ๋ฏน์ค ์ธ์ด ์ฌ์ฉ๋๋ฉด ๋ค์ ์ด๋ฒคํธ๊ฐ ๋ฐํ๋ฉ๋๋ค. |
| 19 | + |
| 20 | +| ์ด๋ฒคํธ ์ด๋ฆ | ์ค๋ช
| |
| 21 | +|---|---| |
| 22 | +| `chart:render` | ๋ฏน์ค ์ธ์ด ์์ ํ ๋ ๋๋ง ๋ ๋ | |
| 23 | +| `chart:destroy` | ๋ฏน์ค์ธ์ด ์ฐจํธ ์ค๋ธ์ ํธ ์ธ์คํด์ค๋ฅผ ์ญ์ ํ ๋ | |
| 24 | +| `chart:update` | ๋ฏน์ค ์ธ์ด ๋ค์ ๋ ๋๋ง ๋์ ์
๋ฐ์ดํธ๋ฅผ ํ ๋ | |
| 25 | +| `labels:update` | labels๊ฐ ์ค์ ๋๋ฉด | |
| 26 | +| `xlabels:update` | xlabels๊ฐ ์ค์ ๋๋ฉด | |
| 27 | +| `ylabels:update` | ylabels๊ฐ ์ค์ ๋๋ฉด | |
| 28 | + |
| 29 | +## Global Methods |
| 30 | +์ ์ญ ๋ฉ์๋๋ ๊ฐ์ ธ์ค๊ณ ์ฌ์ฉํฉ๋๋ค. |
| 31 | + |
| 32 | +### generateChart |
| 33 | + |
| 34 | +- **Type:** `Function` |
| 35 | +- **Arguments**: `chart-id`, `chart-type` |
| 36 | +- **Usage:** |
| 37 | + |
| 38 | +```js |
| 39 | +import { generateChart } from 'vue-chartjs' |
| 40 | +// First argument is the chart-id, second the chart type. |
| 41 | +const CustomLine = generateChart('custom-line', 'LineWithLine') |
| 42 | +``` |
| 43 | + |
| 44 | +## Instance Methods |
| 45 | + |
| 46 | +์ธ์คํด์ค ๋ฉ์๋๋ ๋
์์ ์ธ ์ฐจํธ ์ปดํผ๋ํธ๋ด์์ ์ฌ์ฉํ ์๊ฐ ์์ต๋๋ค. |
| 47 | + |
| 48 | + |
| 49 | +### generateLegend() |
| 50 | + |
| 51 | +HTML ๋ฒ๋ก๋ฅผ ๋ง๋๋ ๋์ฐ๋ฏธ ํจ์ |
| 52 | + |
| 53 | +- **Type:** `Function` |
| 54 | +- **Arguments**: `none` |
| 55 | +- **Usage:** |
| 56 | + |
| 57 | +```js{11} |
| 58 | +import { Line } from 'vue-chartjs' |
| 59 | +
|
| 60 | +export default { |
| 61 | + extends: Line, |
| 62 | + props: ['datasets', 'options'] |
| 63 | + data: () => ({ |
| 64 | + htmlLegend: null |
| 65 | + }) |
| 66 | + mounted () { |
| 67 | + this.renderChart(this.datasets, this.options) |
| 68 | + this.htmlLegend = this.generateLegend() |
| 69 | + } |
| 70 | +} |
| 71 | +
|
| 72 | +``` |
| 73 | + |
| 74 | +### ํ๋ฌ๊ทธ์ธ ์ถ๊ฐ |
| 75 | + |
| 76 | +Chart.js์์๋ ๊ธ๋ก๋ฒ ํ๋ฌ๊ทธ์ธ๊ณผ ์ธ๋ผ์ธ ํ๋ฌ๊ทธ์ธ์ ์ ์ํ ์ ์์ต๋๋ค. ๊ธ๋ก๋ฒ ํ๋ฌ๊ทธ์ธ์ [Chart.js docs] (http://www.chartjs.org/docs/latest/developers/plugins.html)์์ ์ค๋ช
ํ๋๋ก 'vue-chartjs'์์๋ ์ ์๋ํฉ๋๋ค. . |
| 77 | + |
| 78 | + |
| 79 | +์ธ๋ผ์ธ ํ๋ฌ๊ทธ์ธ์ ์ถ๊ฐํ๋ ค๋ ๊ฒฝ์ฐ๋ฅผ ๋๋นํ์ฌ `vue-chartjs`๋ `addPlugin()`์ด๋ผ๋ ํฌํผ ๋ฉ์๋๋ฅผ ๋
ธ์ถํฉ๋๋ค. |
| 80 | + |
| 81 | +`renderChart()` ๋ฉ์๋ ์์ `addPlugin()` ์ ํธ์ถํด์ผํฉ๋๋ค. |
| 82 | + |
| 83 | +- **Type:** `Function` |
| 84 | +- **Arguments**: `Array` of Plugins |
| 85 | +- **Usage:**### ํ๋ฌ๊ทธ์ธ ์ถ๊ฐ |
| 86 | + |
| 87 | +```js |
| 88 | +mounted () { |
| 89 | + this.addPlugin({ |
| 90 | + id: 'my-plugin', |
| 91 | + beforeInit: function (chart) { |
| 92 | + .... |
| 93 | + } |
| 94 | + }) |
| 95 | +} |
| 96 | +``` |
| 97 | + |
| 98 | +### renderChart() |
| 99 | + |
| 100 | +Chart.js์ ์ธ์คํด์ค๋ฅผ ๋ง๋ค๊ณ ๊ทธ๋ฆฝ๋๋ค. |
| 101 | + |
| 102 | +- **Type:** `Function` |
| 103 | +- **Arguments**: `Chart Data`, `Chart Options` |
| 104 | +- **Usage:** |
| 105 | + |
| 106 | +```js |
| 107 | +mounted () { |
| 108 | + this.renderChart({ |
| 109 | + labels: ['January', 'February'], |
| 110 | + datasets: [ |
| 111 | + { |
| 112 | + label: 'Data One', |
| 113 | + backgroundColor: '#f87979', |
| 114 | + data: [40, 20] |
| 115 | + } |
| 116 | + ]}, |
| 117 | + { |
| 118 | + responsive: true |
| 119 | + } |
| 120 | + ) |
| 121 | +} |
| 122 | +``` |
| 123 | + |
| 124 | +## Chart.js ๊ฐ์ฒด |
| 125 | + |
| 126 | +๋
์์ ์ธ ์ฐจํธ ์ปดํผ๋ํธ๋ด๋ก๋ถํฐ Chart.js ์ ์ค๋ธ์ ํธ์๋ `this.$data._chart` ๋ก ์ก์ธ์ค ํ ์ ์์ต๋๋ค. |
| 127 | + |
| 128 | +## Canvas |
| 129 | + |
| 130 | +Canvas ์์๋ `this.$refs.canvas`๋ก ์ก์ธ์ค ํ ์ ์์ต๋๋ค. |
0 commit comments